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.
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.
-
Main Element: Contains all other elements with an id of
main
. -
Title: An
h1
element with the idtitle
describing the subject of the tribute page. -
Image Container: A
div
element with the idimg-div
that includes:-
An
img
element with the idimage
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 idtribute-link
linking to additional information about the subject, withtarget="_blank"
to open in a new tab.
-
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.
-
HTML5 for structuring the content and elements.
-
CSS3 for styling and layout.
-
freeCodeCamp: For providing the guidelines and user stories for this project.
-
Girls Printing House: For the stickers images used in the project.