So you are looking to get into web design but you don’t know where to start? Being a web designer I know how difficult it can be to get to grips with designing and coding… I’ve been there myself! If you know this is something you want to do then my only advice would be to stick with it, and eventually you’ll get there.

Now that we have the emotional part out of the way let’s get into it. Be sure to check the bottom of this post for some extra resources and tools to help you with further learning.

Fundamentals

The basis of any page on the web is built upon two languages: HTML and CSS. They both serve important jobs, as I will explain, and both need to be mastered in order to create a successful website.

HTML

HTML, or hypertext markup language, defines the hierarchical structure of elements that build up a webpage. Anything like text, links, images – they are all HTML elements. HTML was originally written in 1992 by Tim Berners-Lee and has been through five major versions. The most recent of them being HTML5.

To have a look at some HTML code – append “view-source:” to the front of this URL (it should read “view-source:https://ash.guru/…”), and hit return. This should show the source code of this page.  At first it can be pretty scary if you don’t have any idea what all this means, but it’s actually a lot easier to learn than it may look.

HTML should be the first place to start when learning how to build a website. There are many different methods you can choose from to learn it as I will explain in further detail below.

HTML 5

CSS

CSS, or cascading style sheets, defines the style of how each HTML element should look. Things like sizing, colour and layout is all determined in the CSS file by selecting HTML elements, and defining properties.

CSS was initially released back in 1996. It was created so that websites could move away from table-based designs. The most recent release is CSS3 which notably allowed for media queries that are commonly used in responsive design.

Learning how to style HTML in CSS can be a tricky process to wrap your head around, but there are tons of resources that can help you.

CSS3

Where to Learn?

There are many different options to choose from when learning to code, it depends on what suits you best. I took the easiest (and cheapest) solution and learnt by using free and paid online tutorials. Once wrapping my head around the basics I found it quite simple and built my first website within only three months of starting. Here are some of the main options to choose from to learn web design.

School

You may find it best going to university or college and getting a degree at the same time, although racking up a huge debt isn’t appealing to most people. It’s also not the most efficient in learning the core skills, and you may find some courses cover topics that don’t interest you.

However, I wouldn’t discount formal education as it can give your CV/resume the boost it needs to land a great job. There are pros and cons to school learning and it’s up to you to decide whether you think they’ll pay off in the end.

Reading

Maybe you’re a book worm and would prefer reading about web design; this is a cheaper and possibly more effective way of learning. There are hundreds and hundreds of books on learning web design, some very basic and others that go into great detail of specific aspects. Here is some of the best books for beginners.

HTML & CSS by Jon Duckett

HTML & CSS by Jon Duckett

“A book about code that doesn’t read like a 1980s VCR manual… It’s not just for programmers, it’s written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages…”

Learning Web Design by Jennifer Niederst Robbins

Learning Web Design by Jennifer Niederst Robbins

“Do you want to build web pages, but have no previous experience? This friendly guide is the perfect place to start. You’ll begin at square one, learning how the Web and web pages work, and then steadily build from there. By the end of the book, you’ll have the skills to create a simple site with multi-column pages that adapt for mobile devices.”

Don’t Make Me Think by Steve Krug

Don't Make Me Think by Steve Krug

“Since Don’t Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug’s guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject.”

Responsive Web Design by Ethan Marcotte

Responsive Web Design by Ethan Marcotte

“From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft beautiful designs that anticipate and respond to your users’ needs. Ethan Marcotte will explore CSS techniques and design principles, including fluid grids, flexible images, and media queries, demonstrating how you can deliver a quality experience to your users no matter how large (or small) their display.”

Online

There are many websites you can take advantage of online to learn web design – some free and some paid. I find it best to use a mixture of both articles and video tutorials to learn, here are some of the best websites that I’ve found:

Treehouse

Treehouse is a subscription based web service that has a library of web design and development based courses. They cover a range of different languages as well as more real-world use tutorials like how to make a website. You can choose from different tracks which will teach you all you need to know on a subject in a series of video tutorials, also giving you time to practise in code workspaces.

Treehouse: Learn Web Design, Web Development, and More

For me, Treehouse was a complete life saver as they offer a student discount which helped me to learn web design when I was strapped for cash. I found their user-interface really easy to use and their forums are always helpful if you get stuck. Treehouse is the best option if you want to start learning from the ground up.

Tuts+

Tuts+ have tutorials on pretty much anything including web design, business, photography and more. They frequently post new articles on new technologies and industry advancements as well as having a paid subscription service which have more in-depth video guides on various topics.

Tuts+

I regularly check their website for new tutorials – I find they have more tutorials on obscure, less heard of languages and tools rather than just simply HTML and CSS.

CSS-Tricks

CSS-Tricks is pretty much the place to go for all things CSS. They’ve helped me out with many tips and tutorials over the years, with anything from the basics all the way up to advanced CSS like SVGs and animation.

CSS-Tricks

Codecademy

Codecademy is another great place to start out if you have little to no knowledge of web design. They use interactive coding tutorials to help you learn the basics of HTML, CSS and more. I find their courses aren’t very in-depth and they overlook a lot of elements, however it doesn’t hurt to give it a go… especially since it’s free.

Codecademy: Learn to code

Code School

Code School is similar to Codecademy in which you “learn by doing”. They have different ‘paths’ which have in-depth videos on a topic, and then you will solve real-life problems in their ‘challenge interface’.

Code School: Learn by Doing

W3Schools

W3Schools is like the unofficial documentation for web technologies. If you’re unsure on what a single element or property does then consulting their website will usually return the information you were looking for. Back when I was just starting out coding I would use W3Schools all the time to ingrain my existing knowledge.

Creating your First Website

Now that you have the knowledge it takes to code a website – it’s time to get some real world practise. Build something… anything! Ask a friend or family member for ideas or simply create a website for a pet. It doesn’t matter, the point is to use your skills.

Along the way you will come across problems, this is normal, after a bit of trial and error you will find a solution and know for next time how to get around it. This is an important step if you eventually want to become a professional web designer.

Frameworks

You may choose to start your first web project using a CSS framework. This can make the process much easier and is something I would recommend doing, however if you don’t have sufficient knowledge of CSS it can lead to gaps in your knowledge. Some of the more popular CSS frameworks are Bootstrap and Foundation. It is worth noting each framework will have a small learning curve.

Further Learning

Now that we’ve covered the basics, it’s time to do some further research. I’ve put together some different resources that will help you on the way.

Coding

Tools

Programs

Frameworks

Let's work together

Tell me about your project and we can get things moving.

Contact Me