How do they tie together?
- HTML – It stands for HyperText Markup Language. Essentially, it’s just a way to tell the computer what to show on the screen. It doesn’t do the mathematics or computations, but instead lists what the computer should show and where. For example, what goes in the tab at the top of the screen? Where does the menu go?
- CSS – This stands for Cascading Style Sheets. It creates standards across various pages to make sure they all look consistent. For example, imagine you’re developing a blog. You’d use the CSS to define what “heading one” should look like: what font it uses, how large it should be and its colour. Now, when you use HTML to say “this is heading one” the browser will check the CSS to see what to do.
When learning to create websites, especially anything with any interaction, it’s important to know how all three work and how they link together.
Read up on the languages
The best way to learn these languages on your own is to read a few books. There are a lot out there with basic tutorials that’ll get you creating your first web page. For example:
- HTML and CSS by Jon Duckett – This book guides you through how to add text, images, tables and forms to your website and add some style with CSS.
- Learning Web Design by Jennifer Robbins – This beginner’s guide teaches you all three languages.
- Sams Teach Yourself HTML and CSS in 24 Hours – If you’re looking for a quick recap or to learn the basics over a weekend, this book is a great place to start.
Whichever book you choose to use, you’ll learn the fundamentals of creating a website and can get started with your own.
Refer to the basics
- Interneting Is Hard – As the tagline says: But it doesn’t have to be. This completely free website walks you through HTML and CSS, step by step, and all the principles you’ll need to know.
- Codecademy – While you’ll need to pay for a pro membership, the free lessons are a great way to learn the fundamentals of making a website.
- freeCodeCamp – This site boasts thousands of hours of practice. To earn you certification, you need to complete five projects without any bugs.
Read a lot of code
Unlike other languages, it’s easy to see the source code of a website. On any webpage, you can right-click and pick ‘inspect’. On Chrome, a sidebar will appear with the code inside. Or you can choose ‘show page source’ to see the full code all together.
Use this to explore how a website works and get used to reading the code. You can also, in inspect mode, change variables in the code and immediately see how it affects the website. Playing around with this, you can discover how to write your own website. Try it now, can you change this paragraph to say something else? (Don’t worry, it only changes it for your local version.)
Once you’ve got a good idea of how code looks, you can use Codepen to find snippets of code that solve specific problems, for example how to animate a button or add a login form.
Make your own website in three stages
Now it’s time to put that knowledge into practice. Try setting up your own website from scratch. No WordPress, or any other platforms. Just host it yourself and see if you can access it from another computer.
Don’t try and write complex scripts straight away. Instead, start with a simple website and build on it.
- Step one: Create a simple website. Using just HTML, can you create a one-page website. If you need inspiration, try making it your CV.
- Step two: Add a few more pages, with CSS. Now you’ve got your CV, add a blog or a few other pages to the site. Use CSS to make sure that all the pages are consistent and so you don’t need to keep typing out the same code again and again. (You might need to change your original HTML a bit, maybe trimming some parts out.)
Congratulations, you’re now a web developer. You’ve created a fully functioning website. All that’s left is to find a more complicated project.
Go on a bootcamp
Joining a bootcamp will teach you all the skills you need to know, from scratch, while giving you practical experience that you can talk about in any web development interviews. Get a teacher to help you along the way, pointing out any bad habits or mistakes you’re making, and learn to code. In just three hours, you could be programming your own site.