How I Build My First Project in HTML and CSS

#html #css #beginners

I have some people DM on Twitter asking me how I build my first project. So I figured I'd write this post. How everyone learns programming is unique and my approach is not the best. But it worked for me, so I believe it's worth sharing. I have left JavaScript out as this will be a story for another day.

So without any further ado, here are the exact steps I did to learn HTML and CSS.

Watch and code

I started from absolute zero when I go through the first video of HTML Crash Course from Traversy Media. I watched and coded along and while the video length is 1 hour, it took me 3 days because it was a new concept to me and wanted to pay attention as much as I can.

The word HTML may seem like a big word and scary words but surprisingly it was easy to understand. It's all about open tags and close tags. As long as you understand what each semantics does, then that is good enough.

The second video I watched after HTML is CSS Crash Course from him again since I liked his teaching style. Similar to the first one, it also took me another 3 days to complete the tutorial. I was amazed at how CSS can turn any ugly websites into beautiful ones and giving a unique identity to these sites.

The third video I watched after CSS is Build An HTML5 Website With A Responsive Layout and the most important one because from here I learn how he will use HTML and CSS to build a professional website and also make it mobile-friendly. While I was watching and coding along, I was shocked at how powerful these tools are. By the end of the video, I was thinking, "Hey, I can make a website!"

Armed with HTML, CSS, and responsive web design tools, I am ready to build my first website!

How I picked a project idea

This step is not that hard really. Instead of sitting down and brainstorming project ideas, I simply just copy from existing websites.

The main benefit of doing this is you are taking away the burden of coming up with designs, type of website, and more which is time-consuming. That way, I can skip all of these steps and just focus on polishing my HTML and CSS skills.

What I choose to make is the clone of Postmates. I liked their designs and it looked like something that I can reproduce it. I also borrowed a few styling from Quiqup and added some of my original styles.

The building process

This part can be long, so to keep things short, this is how my building process looks like:

I used the finished codes from the last tutorial as the foundation for the project.
I split the project into 11 pages which includes Homepage, About us, log in, career, privacy policy, etc.
If there is something else that I want to build but I don't know how I'll go to W3Schools and learn those missing pieces.
When I got stuck, I'll go to Google and type exactly the problems I have in the search box. I usually go to Stack Overflow, but any other sites will work fine.

After a month of building and hitting my head against the wall, this is the final result of my project.

I have intentionally left bad designs and codes behind because this project will serve as a reminder of how far I've come since the day I started coding and wanted to show you that I used to be bad in coding. It is living proof that everyone started from the bottom.

Conclusion

In a nutshell, what I did is watching Traversy Media's crash courses videos on YouTube, and also mobile-responsive video just to see how these tools are put into practical use.

Then I used these newly acquired skills to build a website and got the project idea by copying existing platforms. Finally, I used Google to find ways to build a website and troubleshoot my problems.

Now that you know how I build my first project with HTML and CSS, I hope these will encourage you to build your website. I know this is going to be hard, but you can do it!

Do you still have your first project? If so, post it on the comments below to help inspire more code newbies.

Say hi on Twitter