freeCodeCamp > Responsive Web Design Projects

Build a Tribute Page

This is a solution to the freeCodeCamp's Build a Tribute Page project. Projects are ment to apply all of the skills, principles, and concepts learned so far: HTML, CSS, Visual Design, Accessibility, and more.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

Overview

The challenge

• Users complete 9 User Stories to pass the test
• Users can use HTML, JavaScript, and CSS to complete this project
• Plain CSS is recommended

Screenshot

Desktop layout

Mobile layout

Links

• Solution URL: https://github.com/PavlinaPs/Project1-Tribute
• Live Site URL: https://pavlinaps.github.io/Project1-Tribute/

My process

Built with

• Semantic HTML5 markup
• CSS Grid areas
• Flexbox

What I learned

This is my first project ever.

I am proud of using grid areas:

.grid-container {
    display: grid;
    grid-template-areas: 
        "item1 item2";
    }

Grid areas helped me to re-arange the layout for mobile devices:

@media (max-width: 700px) {
    .grid-container {
      grid-template-areas: 
      "item1"
      "item2";
    }

Author

• GitHub - PavlinaPs
• Frontend Mentor - @PavlinaPs

Acknowledgments

I would like to say a big Thank You to freeCodeCamp for everyting they do and for all I have already learned from them.