Home / Mac / How-To
How-To

How to learn HTML, CSS and web design on your Mac

Discover how to build your website by learning HTML and CSS on your Mac. It's pretty easy to get started with web coding in OS X, and there are plenty of great courses to help you learn HTML and CSS
By Lucy Hattersley
Macworld MAY 2, 2016 6:45 am PDT

How do I learn to code in HTML and CSS on my Mac?

Web design is one of the most useful skills you can learn, and it’s easy to learn HTML and CSS (the two main pillars of web pages) in Mac OS X. In this feature, we’ll look at the tools you need to start learning web design, give some basic information about how web pages work, and then point you in the direction of the best courses for learning web design on a Mac.

For more coding advice, take a look at  Learn how to code in Java on a Mac and  How to learn Python coding on a Mac. And we’ve also got a roundup of the best web design software for Mac.

How to learn HTML and CSS and web design on your Mac: what you’ll need

You don’t need much to create web pages in OS X. But as a bare minimum you need two things: a text editor and web browser. TextEdit and Safari are both included in OS X, so you’re pretty much good to go when you boot up your Mac.

In fact, realistically speaking, you’ll need a few more tools. And TextEdit is a pretty terrible choice for coding. Our current favourite text editor is Sublime, but there’s no end to the argument about which text editor is best.

You’ll also need a basic image editor; we like Pixelmator, but if you don’t want to buy it then GIMP is a good free option. You can practise building websites on your computer, but if you want to put them out on the web you’ll need hosting and FTP (File Transfer Protocol Software).

So here’s our list of software before we get started.

How to learn HTML, CSS and web design on your Mac: Create a simple page

Building web pages really couldn’t be easier. Web pages are (mostly) set up using HTML (Hyper Text Markup Language). HTML isn’t a programming language, although it can be quite complicated.

Open a text editor and enter the following code:

How to learn HTML, CSS and web design on your Mac: Learn HTML and CSS on Mac

Save this to your desktop as “index.html”. If you use Text Edit, it’ll throw up a warning and try to change the extension to “txt”. Click “Use .html”.

Now double-click the file (or click and drag it on top your web browser icon). Safari will open and display “Hello World”. While it’s not going to win any awards, it’s that simple to start building a web page. Incidentally, here’s a decent blank web page template to start making more text. (Note: our readers suggest you use this, more up-to-date template instead).

CSS (Creative Style Sheets) are separate documents used to style up a web page, changing the design and layout. These are also small text documents, although they end in .css, and you need to add code to link them to your HTML pages.

How to learn HTML, CSS and web design on your Mac: What are HTML and CSS? Where can I learn more about them?

Now that you’ve got everything set up you’ll be wanting to learn about coding. As luck would have it, there are hundreds of great web design courses for you to follow. Here are some of the best we know of. (But it doesn’t end here. Please leave any courses you found useful in the comments.)