My first front-end challenge
I completed my first front-end challenge!! I’m excited about it because I found it a fun project. I was completely absorbed in it for several days, and what’s important, I learned a lot of new things.
The challenge was offered by Frontend Mentor and the task was to build a landing page based on the design for desktop and mobile. On the platform, they provided you also with a starter code and a style guide. There is no time limit for you, so you can start whenever you want. Just download it and go ahead.
I decided on Huddle landing page with alternating feature blocks. The decision was easy because I didn’t notice that there were more possibilities to chose from, and this one was for beginners. So I went straight into it.
I downloaded the starter code and read through the instructions for coding. After that I continued with the instructions on how to use GitHub and how to create a repository there. At that time I wasn’t familiar with GitHub.
I created my repository and wrote my code from scratch using HTML and CSS. For layout, I decided on Flexbox and I have to admit that nested Flexbox was a challenge to me.
With nested Flexbox, I had to think out and correctly apply styles for containers and items. Suddenly an item became a new container and styles for the container should be used on the item. I draw schemas and watched the Wes Bos tutorial What the Flexbox to understand what should apply where.
I had to figure out more issues, e.g. how to use vector image and how to style it. Because of the footer, I needed to change the colored logo to the white logo to use it on the black background. And the button calling for action was also a good one…
Finally, it was a short code, but I rewrote it several times. I’m not still completely satisfied with some parts, however, I decided to move on and deployed my solution on GitHub Pages and call it finished.