This Tribute Page project was created as a certification requirement for the Responsive Web Design course from freeCodeCamp. The goal was to build a tribute page similar to the freeCodeCamp Tribute Page, focusing on implementing HTML and CSS to meet the provided requirements. Although the project needed to be functionally similar, I had the freedom to design the page according to my personal style and preferences, and choose any subject I wanted to feature.

Important

This project is part of the freeCodeCamp Responsive Web Design course. While freeCodeCamp provides guidelines and user stories for certification projects, it does not offer tutorials or step-by-step guides for development. This project was built entirely from scratch using my own approach to meet the requirements.

Screenshot

📝 Project Objective

The primary objective of this project was to create a tribute page that effectively showcases the chosen subject through a variety of HTML and CSS elements. This involved building a tribute page with functional elements similar to those found in the freeCodeCamp Tribute Page. For this project, I selected NewJeans as the subject, highlighting their impact and contributions. The design and presentation choices, including the layout and styling, were tailored to reflect the unique aspects of NewJeans and present them in an engaging and visually appealing manner.

🔧 Features

• Main Element: Contains all other elements with an id of main.

• Title: An h1 element with the id title describing the subject of the tribute page.

• Image Container: A div element with the id img-div that includes:

  • An img element with the id image for displaying the image.

  • An element with the id img-caption providing a description of the image.

• Tribute Information: An element with the id tribute-info containing textual content about the subject.

• External Link: An a element with the id tribute-link linking to additional information about the subject, with target="_blank" to open in a new tab.

📖 Learnings

• HTML Structure: Developed skills in structuring a web page with proper HTML elements and IDs.

• Flexbox Techniques: Gained experience in using Flexbox for responsive design and layout adjustments, including centering elements and creating flexible grids.

• Absolute Positioning: Utilized absolute positioning to precisely place elements within the layout, enhancing control over element placement and alignment.

• Flexibility in Design: Learned how to balance functional requirements with personal design preferences.

💻 Technologies Used

• HTML5 for structuring the content and elements.

• CSS3 for styling and layout.

💡 Acknowledgments

• freeCodeCamp: For providing the guidelines and user stories for this project.

• Girls Printing House: For the stickers images used in the project.