This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
In search for resources to better my front-end Journey, I discovered an amazing site that provides front-end developers with design files to replicate. This is one of the many solutions I have submitted so far. Do give me your feedbacks on how I can improve.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover and focus states for interactive elements
- Solution URL: 3 Column Preview Card
- Live Site URL: 3 Column Preview Card
- The project details and files were gotten from Front-end Mentor
- I read the README file before starting the project, there I got directives on how to work out the challange.
- Afterwards, I wrote the HTML first then created a separate style sheet for my CSS.
- I used Figma to get the best judgement for margins, paddings and width.
- The Desktop View was styled first, then I used CSS media query to make it responsive.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- CSS Media Queries
From this project and many other projects I've completed, I've been continually learing the best approach to reproducing a UI/UX design and how to better handle a project.
In future projects, I want to be able to combine my HTML and CSS knowledge with JavaScript to be able to build a flexible, responsive, functional and interactive websites, landing pages, blogs and a Portfolio for myself.
- Figma.com - This helped me to get the best judgement for font-size, margin, padding, width and border-radius. I really liked this pattern and will use it going forward.
- Github - Nwali Joseph
- Frontend Mentor - @Source-Web
- Facebook - @joseph.nwali.5249
I want to thank front-end Mentor for this design challenge. My front-end journey has been a smooth one with you.
I also appreciate Github pages for allowing me host this challange for free.