I have been asked, both online and offline,  by people is what they should do to master HTML and CSS so they can become website developers. I’m so sympathetic to their struggle to grow as a coder and their goals of getting that “dream job”.

To be really honest, I still am! Even just recently, I was asking someone more established in their career what advice they had for me in my career.

DISCLOSURE: This post contains affiliate links to products and services. This means that if you click on my link to make a purchase then I will get a small commission at no extra expense to you. You can read my Disclaimer and Privacy Policy for more details.

I have been asked, both online and offline,  by people is what they should do to master HTML and CSS so they can become website developers. I’m so sympathetic to their struggle to grow as a coder and their goals of getting that “dream job”.

To be really honest, I still am! Even just recently, I was asking someone more established in their career what advice they had for me in my career.

So my first advice to any coder, including myself, keep asking those questions and never think you’ll reach a point when you’re done learning.

But my MAIN advice for coders who feel stuck or want to start finding internships is to start a project.

It is while you’re building something from scratch that you’ll really learn. You’ll see what works, what doesn’t (and have no idea why, but that’s okay!) and have something to show for the hours you’ve spent trying to learn these skills. This is so important for yourself and prospective employers who need to know you’re passionate AND a self-starter.

It’s not enough to be passionate. Everyone is passionate. You have to build by yourself to separate yourself from everyone else.

Here are 5 different project ideas to get you started!

1. Follow Along With YouTube Tutorials

This one is free and probably best for beginner-level coders. Simply search YouTube for HTML, bootstrap, or “build a website” tutorials and you’ll find plenty of options. What’s great about starting here is that you’ll work along with someone who is guiding you and explaining their decisions. It’s a nice way to start thinking like a coder.

Level up: Throw a CSS framework in there. You could start with Bootstrap, Bulma, or Foundation. If you want to try your hand at Javascript instead, create an alert or a button that triggers an event, or use a JQuery plugin such as wow.js–I suggest this plugin since it’s fun, and keeping things fun can make all of the difference in learning.

Make it Portfolio-Ready: With the website you built, make it dynamic by adapting it to WordPress. This will take some PHP knowledge. A tutorial that helped me back in the day was Brad Hussey’s “WordPress Theme Development with Bootstrap” course available on Udemy.  Wait for it to go on sale or find a coupon code. You can probably get it for about $20.

2. Make A Website For Yourself

I seem to always have at least one obvious option in my lists. Let me talk this one through because the question that follows this suggestion is usually “what do I put on it?”. Make it your personal branded website where you have a coded out resume. This is fun because if you already have a resume, you’ll essentially be coding an established design. This shows you know how to code a more complex layout since resumes tend to have layouts uncommon in websites. You could even add fun animation into it with CSS3 and JQuery.

Plus this gives you an opportunity to learn how to set up a domain and hosting account. If you make it a WordPress site, this will give you even more opportunity to learn about control panels (c-panels), databases and PHPMyAdmin.

NOTE: I recommend Green Geeks for hosting and domains. They are competitively priced, have all the features you’ll need, are a more eco-friendly hosting option AND have great customer support. Pick the cheapest hosting option and your new domain will be included! I am an affiliate for Green Geeks because after dealing with many hosting companies in my career, they are my favorite hosting provider. In fact, I’ve used them for over 5 years now.

You could have a place for your portfolio and case studies. You could show your work and talk about your projects from beginning to end. And of course, you can have an About Me page for your fun bio information.

Level up AND Make it Portfolio-Ready: Make it a custom WordPress theme (a good first introduction to database, the c-panel and PHPMyadmin) and add a blog about your progress as a coder. You can write about what courses you’ve taken, what has inspired you, and the new things you’ve learned.

Bonus level up: Add a contact form with a WordPress plugin such as Contact Form 7 or Gravity Forms.

Super extra bonus level up: If you really want to impress, code the form from scratch. I recommend every coder do this at least ONCE. Even if you never hand code a form again, this will give you insight into how it works. You need to have an idea of what makes a form secure and how they can be compromised. You need to know about basic anti-spam measures common in forms too. If you’ve never done something like this, find a GOOD tutorial that goes over security and spam to walk you through it.

Not a level up, but a nice bonus: Set up a SSL certificate and forward/connect your domain email to your private email.

3. Create a Fake Client Project

Graphic design students get assignments like this all the time. This is a way to challenge yourself to work within a box rather than doing anything you want. “How do I make up a client?” you ask. I’ve got you covered, my friend. I’ve been here and done it before and so have others–so much so that they’ve built websites with fake client briefs for you to work from. Here’s three I found with a lazy Google search: Fake Clients, Briefbox and Good Brief. A lot of these may be geared towards graphic designer but it can easily be adapted to your needs.

This will require design time so if you have an interest in web design, this may be a perfect project for you. You can use a web design mockup tool such as Adobe XD, Sketch or Balsamiq. If you are lacking in the graphic design department, you can find a list of free stock photo websites in my Resources page and find website graphic elements on marketplaces like Creative Market.

Level up: Challenge yourself in thinking from a UX perspective in what the client would need. What are the client’s goals and target demographics? Let that guide how you build. You could build this site out in WordPress and create a backend that’s easy for the “client” to maintain the site. You can check out plugins I recommend in my Resources page.

Make it Portfolio-Ready: Show your work! Create sketches, a slide show presentation, or a report to show what guided your decision making in the project. Show the reasons behind your choices. If you have an interest in SEO, write a SEO strategy the fake client could utilize.

4. Recreate an Existing Website

In one of my internships, they often handed homework out to interns to recreate an existing website they’ve made in the past. This is made easier because all the assets are readily available. You can do this, too. I recommend finding a simple brochure website. A brochure website is a simple informational website that typically explains who, where and what of a local business. It doesn’t really do much more than that. This makes it an easier starting point.

Level Up: Make it better. If you want to go towards a UX design route, how would you improve the visitor experience or the website’s purpose? If the site has crummy SEO, what would you do different? Is it not mobile friendly? Make it responsive.

Make it Portfolio-Ready: Show your work and explain any decisions you made in the project to improving it. Make sure it’s responsive. And then, make it dynamic with a CMS such as WordPress.

5. Code A Premade Design

If you’re having trouble with the above suggestions, you could purchase a website design. You can find a design from a marketplace website like Creative Market. Usually you will get the designs through a .PSD file (photoshop).

Level Up: Make it responsive, then dynamic with a CMS like WordPress.

Make it Portfolio-Ready: With it responsive and dynamic, create a case study or presentation to discuss the project from beginning to end. You could put this case study in your personal website or where ever you may have your portfolio.

What are you waiting for?

I truly hope this gives you a starting point, because so often when we feel lost, we don’t know where to start. Get to work and let me know what project you’ve created! I’d LOVE to see what people come up with!