A Little Guide To Learning HTML5 And CSS3 | Hacker Noon

June 11th 2020

Author profile picture

The first step to becoming good at something is to first know that you are going to suck the first time you attempt it. Do you see this article? I have rewritten this part so many times already but I will only publish the best version for you to see. I will never share all my failed attempts (which for this first paragraph is in the hundreds). Programmers forget that the final product is not the first attempt and that is the reason why we feel imposter-syndrome.

So now I have made you feel a bit better about failing. Let me share with you some of the wisdom that I have learnt from spending some of my life failing. No one is going to remember your failures, they will only remember their own failures. Stop caring so much about failure because there is no such thing as failure, only progress.

I understand if you may be a little confused by this article. This article so far is more focussed on self-help than the nitty-gritty technical stuff and that is because if you are reading this then you are most likely new to programming. So let’s start setting a good mental foundation before going into the technical stuff. To learn any new skill you first need to get out of your comfort zone. You then need to overcome the limiting beliefs that you may be facing and start believing in yourself so you will no longer remain stuck.

The Pathway

I decided to make a path for you to follow so you can learn HTML & CSS in the way I would have learnt it again if I were to teach myself. I am going to give you specific resources that ensure your experience learning HTML and CSS is a fun and interactive one. You will also receive multiple choices so this journey will be as cost-effective as possible and accessible to people on low budgets.

HTML5

The first thing to start with would be HTML. I recommend the next time there is a big sale on Udemy.com you should grab The Web Developer Bootcamp by Colt Steele. The course is usually $199.99 but on sale, you can get it for $16.99. This is a complete Web Developer course that covers everything but if you use it for the section on HTML you will master HTML in a few hours.
Colt also gives you tests so you can keep yourself accountable for your learning. If there is no Udemy sale on and you can’t justify the cost then use The Odin Project (HTML) (This resource is a Bible to any beginner Web Developer). HTML is a pretty easy topic to understand so I will not need to give you any more resources than this.

CSS3

Learning CSS is a little more challenging, now you’ve learnt how to write semantically correct HTML. It’s time to learn how to style it. I decided to break this section into a few different sections where we will learn basic CSS styling and then we will learn how to use CSS Flex and CSS Grid.

The goal of this guide isn’t to teach you but to direct you to the resources that can teach you this. The purpose of this guide isn’t to reach mastery either but to give you enough to begin your journey as a Web Developer.

Use these to understand basic CSS and get used to writing the syntax. We will use different resources to learn CSS Flex and CSS Grid when you are comfortable with basic CSS.

CSS Flexbox

The first step to learning CSS Flex is to play the first four chapters of Flexbox Zombies by Mastery Games (this game is free). This will give you a good understanding on how to enable and use flex. You will not need to learn everything about CSS Flex from this game.
Being a good developer isn’t about learning everything about a language. It’s more about learning how it works and what are the main concepts behind it. After you get a good understanding of how to enable and use CSS Flex. You can use A Complete Guide To CSS Flex by CSS-TRICKS.com as a reference for whenever you need to use the Flex system.

CSS Grid

Wes Bos has an extensive course on CSS Grid and if you go to cssgrid.io you’ll notice that it’s also a free course. This is the ultimate resource to learning CSS Grid. Whenever you need to implement CSS Grid you can refer to A Complete Guide To Grid by CSS-TRICKS.com for any information that you need.

The Next Step

After completing this you will be ready to take the next step in your Web Developer journey. So what is the next path you should follow? That depends on what you want to achieve. If you want to do this as a hobby, then keep browsing the web and learn whatever you want to learn. I recommend cloning websites to test your new skills.

If you want to pursue a career in this then I can tell you about the path I decided to take. I am currently a Microverse.org student studying the Fast Track Program. Microverse.org is the first Code Bootcamp to offer its ISA agreement to every country in the world.

I am proud to be a part of a newfound system that offers an opportunity to everyone across the globe.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!

read original article here