Skip to content

This is one of the required projects to earn your certification. For this project you will build a tribute page for a subject of your choosing, fictional or real.

Notifications You must be signed in to change notification settings

DrAcula27/freeCodeCamp_responsiveWebDesign_tributePage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

freeCodeCamp_responsiveWebDesign_tributePage

Live Demo

Tribute Page

Project Information

The second of five(5) certification projects in freeCodeCamp's Responsive Web Design course.

The course/project description from their website is as follows:

This is one of the required projects to earn your certification. For this project you will build a tribute page for a subject of your choosing, fictional or real.

Project Requirements

Objective:

Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks. Do not copy this demo project.

User Stories:

  • Your tribute page should have a main element with a corresponding id of main, which contains all other elements
  • You should see an element with an id of title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug")
  • You should see either a figure or a div element with an id of img-div
  • Within the #img-div element, you should see an img element with a corresponding id="image"
  • Within the #img-div element, you should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div
  • You should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page
  • You should see an a element with a corresponding id="tribute-link", which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of target and set it to _blank in order for your link to open in a new tab
  • Your #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size
  • Your img element should be centered within its parent element
  • Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!

Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS

Releases

No releases published

Packages

No packages published