Objective: Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks
Creating a tribute page involves a few key steps to ensure that it meets the requirements outlined in the user stories. In this document, we will discuss the thought process behind creating a tribute page that fulfills the requirements and also has a personal touch.
-
Step 1: Creating the HTML structure The first step in creating a tribute page is to create the basic HTML structure. We need to create a main element with a corresponding id of "main" that contains all other elements. Within the main element, we need to add an element with an id of "title" that contains a string describing the subject of the tribute page.
-
Next, we need to add either a figure or a div element with an id of "img-div". Within the "img-div" element, we need to add an img element with a corresponding id of "image". We also need to add an element with an id of "img-caption" that contains textual content describing the image shown in "img-div".
-
Finally, we need to add an element with an id of "tribute-info" that contains textual content describing the subject of the tribute page. We also need to add an a element with a corresponding id of "tribute-link" that links to an outside site containing additional information about the subject of the tribute page. It is important to remember to give the "tribute-link" element an attribute of "target" and set it to "_blank" to ensure that it opens in a new tab.
-
-
Step 2: Adding CSS Styling Once we have created the HTML structure, we need to add CSS styling to make the page visually appealing. We can start by using CSS to center the "img" element within the "img-div" element. We can also use CSS to resize the "image" element using max-width and height properties, relative to the width of its parent element, without exceeding its original size.
- We can also add CSS styling to change the background color, font family, and font size of the text elements on the page. It is important to remember to link the CSS file to the HTML file using the tag.
-
Step 3: Adding Personal Touches Finally, we can add personal touches to the tribute page to make it unique. This could involve adding additional images, quotes, or videos related to the subject of the tribute page. We could also use different font styles or colors to make the page stand out.
Overall, creating a tribute page involves following the user stories outlined in the project brief, adding CSS styling to make the page visually appealing, and adding personal touches to make the page unique. By following these steps, we can create a tribute page that honors the subject while also showcasing our design and development skills.
Made via: https://www.freecodecamp.org/learn/2022/responsive-web-design/#build-a-tribute-page-project Only HTML and CSS is being used for this project.