Responsive Web Design Projects - Build a Tribute Page
- Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/zNqgVx.
- Fulfill the below user stories and get all of the tests to pass. Give it your own personal style.
- User Story #1: My tribute page should have an element with a corresponding
id="main", which contains all other elements.
- User Story #2: I should see an element with a corresponding
id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug").
- User Story #3: I should see a
div element with a corresponding
- User Story #4: Within the
img-div element, I should see an
img element with a corresponding
- User Story #5: Within the
img-div element, I should see an element with a corresponding
id="img-caption" that contains textual content describing the image shown in
- User Story #6: I should see an element with a corresponding
id="tribute-info", which contains textual content describing the subject of the tribute page.
- User Story #7: I 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 (i.e.
- User Story #8: The
img element should responsively resize, relative to the width of its parent element, without exceeding its original size.
- You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like:
- Once you're done, submit the URL to your working project with all its tests passing.
- Remember to use the Read-Search-Ask method if you get stuck.