Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

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

Lucy Hattersley | May 2, 2016
Learning how to build a website is a vital skill in the modern age, and it's easy to learn HTML and CSS in Mac OS X. Here's how

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

Source: Macworld 


Sign up for CIO Asia eNewsletters.