Some webpages are coded for mobile first, like the one in this Brad Traversy project that I just completed:
Here is the site Brad teaches you how to create:
It’s a pretty sleek looking site.
Cool effect: Fade in effect when visiting the site
One thing I like about Brad Traversy’s videos is that he always adds in a cool effect to what he helps you build.
In this project, the site starts off at the logo, which then fades out to reveal the site:
Mobile first, desktop second
Most websites are coded to look good on desktop first, then modified for mobile.
This site is the opposite.
Although it’s coded for mobile, modifications have been made to make it look good on desktop:
You can see here that the images have been made larger, and the number of columns have been changed from two to three.
Modification: I aligned each image to the bottom right corner of its box
The positioning of the images on the site were kind of annoying me. So I made it so that each image sat in the bottom right corner of its respective box.
Before and after:
This was a simple issue to fix. All I had to do was add the following code:
justify-content: space-between;
Probably the easiest modification I’ll ever make.
Conclusion
So what did I learn?
- I learned how to create a fade-in effect on a webpage
- I learned how to create a webpage for mobile
- I learned a bit more about image alignment
The more of these projects I do, the more I understand. When I first began doing these projects I would say that I understood about about 50% of the CSS. Now I understand close to 90%.
If you want to learn how to make this same website, then you can watch his video titled HTML & CSS Mobile UI Layout | CVS Clone and code along with him. However, I recommend you gain a basic understanding of HTML and CSS before undertaking such a task.
Leave a Reply