How To Teach Yourself Web Design

Dana NicoleEntrepreneur TipsLeave a Comment

Person writing on paper with laptop
Last updated on December 25th, 2019

One of my most popular blog topics is how to become a graphic designer after I taught myself graphic design. While learning graphic design, I was simultaneously learning web design, (and simultaneously losing my mind slightly)!

Teaching myself web design was more difficult than teaching myself graphic design, which is why I invested a little bit more money into learning web design. However, I kept my budget to less than $100 to learn web design so I wouldn’t say I spent an outrageous amount (and considering I’ve earned it back as soon as I opened up web design services).

There weren’t any specific steps I took to learn web design, other than just code, code, code! The best thing you can do is to practice!

Step 1: Learn HTML & CSS

You will want to start learning HTML/CSS first, which will help you to build a website, and then learn programming lanuages such as JavaScript to give functionality to your website (and PHP if you want to be a WordPress developer).

HTML stands for Hypertext Markup Language and is a computer language to create websites. I know that might not mean much to you right now, but HTML basically gives you the skeleton of your website.

CSS, which stands for Cascading Styling Sheets, is a styling sheet language that styles your website.

HTML and CSS work together in that you can build a very basic website with HTML, and then make it look nice with CSS.

Here is the homepage of my website with no CSS applied:

As you can see, there’s not much to look at it.

Now, once I have applied CSS, things start looking much better:

To start becoming familiar with HTML, I’d recommend taking Codecademy’s free HTML course. Codecademy has a ton of free resources, and once you are familiar with HTML you should hop right into CSS.

If you already know a bit about HTML, you can go straight to CSS. I knew a little bit of HTML before I started learning and found it was easiest to learn CSS while learning HTML at the same time.

Step 2: Learn JavaScript

After you’re confident in your ability with HTML and CSS, you will want to learn JavaScript. JavaScript is a scripting/programming language and it adds functionality to your website, and adds an interactive level.

So what can JavaScript do? Well, it can be a bit confusing when you’re unfamiliar with web development, however, JavaScript can:

  • make calculations
  • validate data in forms
  • make web page customization based on the person visiting the website

Luckily, there are lots of people who specialize in JavaScript and if you just plan to be a web designer (not a developer) you won’t need to know a ton of JavaScript – especially if you choose to design websites in WordPress as there are plugins that are already made.

JavaScript is an important language to learn and get familiar with, but as I said, if you just plan to design and not develop websites from scratch, you will just need a basic understanding of JavaScript.

A great resource that I picked up when learning HTML, CSS and JavaScript were these books. They served as a great reference.

Step 3: Learn PHP (optional: for WordPress Web Designers)

WordPress is the most popular platform in the world, so if you plan to use it for web design, you will want to get familiar with PHP. PHP is a server-side scripting language that WordPress uses to build websites.

Without knowing a little bit of PHP, you will have a hard time creating websites on WordPress.

Tools To Learn Web Design

You don’t need much other than a computer and the text editor (such as Notepad) that comes installed on your computer. As you get more advanced, you might find you need something with more functionality. There are tons of great text editors to choose from!

Free Resources To Learn Web Design

There are so many free resources out there to learn web design, that I didn’t know where to begin! Here are my favorite free resources.

Codecademy

Codecademy is a popular free option to get yourself familiar with code. There is a premium version of Codecademy, but I used the free version to get a feel for what I was getting myself into.

With Codecademy, you have tons of selection as to what courses you’d like to take for free. You can learn:

  • HTML
  • CSS
  • how to make a website
  • how to publish a website
  • Saas
  • JavaScript
  • JQuery
  • Ruby on Rails

and more.

I personally wouldn’t have been able to learn web design from Codecademy alone, however, I found it very useful to get familiar with certain types of programming languages, and test the waters in regards to web design.

Above is how Codecademy teaches you web design. On the left, there is an objectives pane that provides you with tutorials and instructions to complete a task.

In the middle, you have your code, and on the right, you have your output.

Free Code Camp

Free Code Camp is another highly reputable resource to learn web design on your own. You can learn HTML, CSS, JavaScript and many extra programming languages through Free Code Camp.

Premium Resources To Learn Web Design

The free resources above are excellent, however, like I said at the beginning of this article, I had greater difficulty learning web design on my own. I needed a place with video instruction and somewhere to ask questions. So I did a bit of digging to find an affordable place.

Treehouse

Treehouse was the best investment I used to learn web design! For $25 a month, you have unlimited access to a library of courses. I wanted to get my money’s worth, so I spent a couple of hours per day working through their courses. With Treehouse you have the option to pay month-to-month, and get to try a week for free when you click here!

Treehouse was my all-time favorite way to learn because their teachings are based on video instruction where you can follow along with your coding in their platform. You don’t need to know how to set up anything fancy on your computer in order to follow along!

After each lesson, there are quizzes to keep you accountable, and you are able to see you work real-time as you code along with the video instruction.

There is also a great community of support, and when you get stuck you can speak with experts and other students to work through any problems you may be facing.

Treehouse has a huge library of resources ranging from web design all the way to app development and computer programming.

I spent two months going through a couple of different courses to learn web design, and after that spent a month extra just learning computer programming and broadening my skills.

One great thing about Treehouse is that if you get busy, you can actually pause your enrollment and you will not be billed! So if you spend a month learning HTML/CSS, and then want to take a month to try and apply your skills on your own before moving forward with another course, you can pause your membership and start it back up when you are ready – and you won’t be charged any extra.

This was a huge selling point for me as I like to take my time and learn at a steady pace. Had it not been for the ability to pause my enrollment, I don’t think I would have signed up. It took me several months to be comfortable with web design (as I said, I was a slow learner), but I only had to pay for a couple of months of Treehouse.

Udemy

If you’re lucky, you can find Udemy courses at a fraction of the cost! This best selling course on how to learn web design is currently on sale for 90% off and teaches you everything you need to know to get started in web design.

Unlike Treehouse, Udemy courses don’t have an interface you can use to code simultaneously while watching the instructional video.

If you are confident in your ability to learn on your own but still would like some videos to watch, Udemy would be a good option!


Now let’s recap quickly the steps you can take to learn web design:

  1. Learn HTML/CSS
    1. Resources: Codecademy, Free Code Camp, Treehouse, Udemy, HTML & CSS resource (+JavaScript)
  2. Learn JavaScript
    1. Resources: JavaScript resource (+HTML/CSS)Codecademy, Free Code Camp, Treehouse, Udemy
  3. Familiarize yourself with PHP (optional: for WordPress designers only)
    1. Treehouse

I hope you found this article helpful! Let me know any questions you have in the comments below.

This article contains affiliate links meaning I will make a small commission if you choose to purchase from them. I do not recommend products I don’t think would benefit my audience, and the prices are never inflated to compensate for my commission.



This article may include affiliate links. www.dananicoledesigns.com is a participant of Amazon.com Services LLC Associates Program. As an Amazon Associate, I earn a commission from qualifying purchase. www.dananicoledesigns.com participates in other affiliate programs, and recieves commissions when purchases are made through the links. This is at no extra cost to you.

Share this Article

About the Author

Dana Nicole

Facebook Twitter Instagram Pinterest

Dana Nicole is a freelance content marketer. She has a Bachelor of Business with a major in marketing and has over 10 years of experience in marketing. She's passionate about Instagram marketing, blogging and SEO. Dana currently works with B2B and SaaS clients and uses her blog to help small businesses and bloggers learn online marketing!

Leave a Reply