How I Learned HTML5 CSS3 in 446 Hours with 8 Projects | Hacker Noon

Author profile picture

For some people, the title could look funny or interesting. But it is true because I made that trip, I spent 9 weeks working hard learning HTML and CSS. 

First, let me introduce myself and my background on this topic.

I’m a student at a software online developer school. The main curriculum is very attractive. For example, it has HTML&CSS, Ruby, Databases, Ruby on Rails, JavaScript, React & Redux. 

Moreover, the main idea for me is that in this course you can work with a team and with a coding partner. 

At the beginning of the program, I read about HTML and CSS. I recommend this: HTML5 For Masterminds, Beginning HTML5 and CSS3 For Dummies. Those books helped me to make the first approach. But when I try to learn flex and grid I made my first go around. So I looked for another runway to make a new approach.

This runway was seeing videos on the internet. I found these videos ( https://wesbos.com/ ). This guy is awesome, also you can download the examples from the website.

So I learned Flex and Grid from there. I could not say that I am a master with that, but I learned the basics to start with.

After seeing and skimming the previous material I continued with the program. For the first project, I had created a YouTube clone. it helped and motivated me to understand how a site so popular is build. 

This is the project (https://github.com/AhmedTohamy01/video-player). It looks very simple but it helped me a lot to learn. I learned to make a Navigation Bar, embedded image, align a logo, use the search bar, embedded video, use a sidebar.

The second project I made was a Sign-Up page. In this project, I learn to use and fill a form with all kinds of elements. 

Displaying and inputting data, this is my project: (https://github.com/JasemDuncan/mint-signup)

The next part was one of my favorites because I could lean to understand how the famous box model works. I floated elements on the site. I used backgrounded images and spectacular gradients. Check out the results: (https://github.com/JasemDuncan/appleWebsite).

One important part as well when you create a website is to learn about Design and UX. This means that your website has to catch the attention of visitors. So the next project has a gray gradient to identify the most important part to the least important part. Judge yourself (https://github.com/JasemDuncan/Smashing-Magazine).

Nowadays, almost all online website has these features and is to be responsive. Responsiveness means that your web can fix on almost every screen. For example a mobile screen, tablet screen, laptop screens, desktop screen, etc. 

When I made this project also I learned bootstrap. This is a framework for CSS. Using this you can create a very fast and responsive website. Check the results (https://github.com/JasemDuncan/NewsWeek).

Finally, after making those project I proved myself with a solo project for 72 hours. In this project, I had to create a free solo website like in the real world. I tried to use the most I learned before. I received recommendations from people that reviewed my project. This is my final version: (https://github.com/JasemDuncan/Concert-Site).

I would like to say that this 446 hours was easy and fun, but it was not/ Learning HTML and CSS was very complex. Thanks for taking the time to read this article. 

Continuing to code is the only way to learn. 

Tags

The Noonification banner

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

read original article here