This is a solution to the News homepage challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: [https://github.com/Zdravko93/frontendmentor_challenge_news-homepage_project]
- Live Site URL: [https://zdravko93.github.io/frontendmentor_challenge_news-homepage_project/]
- I felt it is far easier and more convenient for this specific homepage project to take mobile-first aproach. Only taking up as much space as needed, without adding further unnecessary complexities, keeping it as simple as possible.
- Semantic HTML5 markup
- CSS3
- Flexbox
- CSS Grid
- Mobile-first workflow
To see how you can add code snippets, see below:
<h1>Some HTML code I'm proud of</h1>
Gained deeper insight about how I can make better choices regarding project HTML structure, which further allows for better, more accurate ways of writing CSS Layout part was the tricky one for me. Had to write it multiple times, over and over again, until I was satisfied with how my CSS GRID turned out to be.Nothing really difficult for me in this part, but I found better and cleaner ways to write the code that gets the job done.I plan on delving deep into CSS grid, and layouts in general, learning more efficient ways to get my project to look as close to the design as possible, with minimum of the code written. Also, I want to further hone my Vanilla JavaScript skills, and gain lot more experience in Frontend Development. Also, I am interested in React, which I also have some experience with.
- Resource 1 - This helped me better understand some basics and reducing complexities in my project.
- Frontend Mentor - Zdravko