How I Learned HTML5 CSS3 in 446 Hours with 8 Projects

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.