Frontend Mentor - Testimonials grid section solution

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Your users should be able to:

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

Screenshot

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• mobile-first workflow

What I learned

I learned about the different properties of background-image

  .daniel-clifford{
    grid-column: auto / span 2;
    background-image: url('./images/bg-pattern-quotation.svg');
    background-repeat: no-repeat;
    background-position: 90% 10%;
  }

I also implemented media queries and grid columns and rows to make the cards responsive on different devices.

    @media (max-width: 1000px) {
        main{
            grid-template-columns: repeat(auto-fit ,minmax(14em,1fr));
            padding: 1.3em 1em ;
        }
    }
    
    @media (max-width: 550px){
      .jeanette-harmon, .jonathan-walters, .kira-whittle{
        grid-column: span 2;
      }
    }

I created a Json file to facilitate data entry, dividing the data by studentName, rol, studentImage, resume, testimonial, color, and colorFont. I used colorFont to apply a font color according to each student, which helped me to reduce the amount of CSS needed

 {
    "studentName" : "Jeanette Harmon",
    "rol": "Verified Graduate",
    "studentImage" : "./images/image-jeanette.jpg",
    "resume":"An overall wonderful and rewarding experience",
    "testimonial": "Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living while doing something I love." ,
    "color": "hsl(0, 0%, 100%)",
    "colorFont" : "black"
 },

        let section = document.createElement("section");
        section.style.backgroundColor = element.color;
        section.style.color = element.colorFont;
        main.appendChild(section);

To bring the data from the JSON file, I used the Fetch API and created a function that retrieves the data and creates the respective elements

  function getElements(callback){
      fetch('data.json')
          .then(response => response.json())
          .then(data =>callback(data.testimonials))
  }

Then, I created a function that adds the elements to the DOM from the retrieved data.

 function createCards (){
    main.innerHTML = "";
    features.forEach(feature =>{
      //html elements
      })
    }

Continued development

In future development, I plan to focus on several key areas:

- Advanced CSS Grid Techniques: Further exploration of complex grid layouts and the use of grid-template-areas for more flexible and maintainable designs.

- Responsive Design: Enhancing responsive layouts using media queries to ensure that web applications look great on all devices.

- JavaScript Best Practices: Improving JavaScript code readability and performance by refactoring and leveraging ES6 features like template literals and destructuring.

- Integrating APIs: Fetching and displaying data from external APIs to create more dynamic and interactive web applications.

These areas will help me build more sophisticated, user-friendly, and performant web applications.