/testimonials-grid-section-main

Newbie Challange on Frontend Mentor

Primary LanguageHTML

Frontend Mentor - Testimonials grid section solution

This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

This is my second time adding a project to my repository on git. I did this challenge 1,5 month after starting to learn CSS / HTML / JS.

I am currently switching paths in my carrer and I am not sure how long it will take to get a job, but having learned quite a bit in a short time makes me confident it is possible.

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Note:

  • I changed min-width to 800px. In my design, the desktop version shrinks as the screen gets smaller, and it felt unreasobable to have it shrink all the way down to a phone screen size before transitioning the layout.

My process

  • I tried to keep it simple and reutilize CSS styles as much as possible, but I am sure it can be further improoved.
  • I used flex containers within flex containers to adjust the layout
  • The desktop version gave me some toruble, I had to add more containers to be able to fit kira's testimonial to the right of the screen.
  • Final adjustments to the design made so that my CSS become a bit too long, I would like to have kept it simples, but I did not find a way.

Built with

  • (YES) Semantic HTML5 markup
  • (YES) CSS custom properties
  • (YES) Flexbox
  • (NO) CSS Grid
  • (YES) Mobile-first workflow
  • (NO) React - JS library
  • (NO) Next.js - React framework
  • (NO) Styled Components - For styles

Continued development

  • Now that I am somewhat familiar with the foundations of front-end, I want to continue towards back-end using react and node.
  • The ultimate goal is to have enough knowledge to get a job and develop as I work.

Acknowledgments & useful resources

FreeCodeCamp youtube's channel is a gold mine, thank you to them and to Zack Gollwitzer for putting together one of the best introductions to front-end (https://www.youtube.com/watch?v=zJSY8tbf_ys&list=PLv_jzhQRz9gdlVzCNh6phVI33gPef_plC&index=5&t=421s).

If you decide to follow the video, my advice would be to pause every time a new concept is introduced and play around with it until you get a feel for how ti works.

This challange was suggested at the end of Zack's video.