As I am learning from videos, a lot of the projects have been planned and I don't get to hear the decisions made about the markup. With a code along, you don't think about how you want to approach the project.
After every major concept that I learn, I usually try to find something that I can recreate on my own. The main criteria is that it's a project that I don't have access to solutions or how someone else did it. I would choose a site or think of something and I will start coding.
Here are a few small pages that I have recreated on my own:
1- Restaurant Homepage
This was inspired by the Bareburger website. I had just started learning CSS and done a few projects with the course. I did this the hard way but this is where I started to really understand how to use divs and positioning.
2- Presentation website
Another project is a presentation site. This was mostly working with media queries, image overlay and CSS variable.
You can find a video here:
https://twitter.com/jojonwanderlust/status/1173079788489183233
3- YouTube Homepage
This last attempt was a little different because I learned Flexbox and CSS Grid and I spent sometime thinking about how I wanted to layout the markup. I wanted to recreate the YouTube homepage. I have not completed it as I want to add more pages and continue to practice. I wanted to add this as I am super proud of how it came out.
I used Font Awesome for the icons and they are wrapped in a tags. As such I created 4 columns to display the different sections. Then for columns 2-4, I displayed them as flex to have the elements lined up in a row.
As I am going on this journey, I get frustrated when something doesn't work and I start to question if I am learning at all. I usually try for a while to solve the issue then I leave it alone and return to it and work through the logic of what I am trying to do.
I never thought I would enjoy puzzles like that but I love trying different solutions and see what changes and how I can fix something.
On to the next one!
Top comments (0)