How to Learn HTML, CSS and JavaScript

Thinking about learning HTML, CSS, and Javascript? Learning a new language takes time. Learning three, even though they link together quite significantly, is going to take longer. You won’t be able to get to grips with all three overnight.  

But these languages aren’t particularly difficult. The trickiest aspect is the JavaScript. And even that can be learnt relatively easily. If you already have experience programming, you’re likely to pick it up quite quickly. So what are these languages, and how do you go about learning them?

How do they tie together?

HTML, CSS, and JavaScript aren’t all programming languages. Not exactly. Instead, they all serve different functions when creating a website. Here’s how they break down:

  • 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.
  • JavaScript – This is the actual programming language used on most websites. It can receive inputs from the user, perform calculations and give outputs. That could be something as simple as a survey form or as complicated as an entire game.

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:

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

The best way to learn HTML, CSS and JavaScript is to start coding your own website. So if you’re driven and can teach yourself, there are a bunch of resources online that can help you learn:

  • 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.
  • W3Schools – This website is the home of all things HTML, CSS and JavaScript. If you’ve got a question, the answer will be here. Somewhere. There are tutorials, but it’s also the webpage you’ll want to bookmark for whenever you bump into a problem.
  • 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.
  • Khan Academy – A mixture of videos, practical lessons and challenges to help you through the first stages of HTML, CSS and JavaScript.

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.)

 

  • Step three: Add a more complex widget or interaction. Now you’ve got your multi-page website using CSS, it’s time to start playing with JavaScript. What can you add to your page to show off your JavaScript skills? Maybe it’s an extra page with a game on it or maybe you program a simple search bar?

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.

dojo guide

Looking for a Career in Web Development?

Read our quick-start guide to becoming a Developer

  • Includes exclusive insight from a seasoned Web Developer
  • Uncovers the top career misconceptions holding you back
  • Highlights the must-have qualities all employers require
  • 89,615 downloads to date

Leave a Reply

Your email address will not be published. Required fields are marked *