Responsive Web Design Projects - Build a Tribute Page: Getting Started

I tried to find a forum post about getting started on this project but could find none. Needless to say, I was a bit confused getting started on this 1st project, especially with the ‘codepen.io’ site, setting up an account & forking over the source code to create my own tribute page. After setting up an account with codepen as recommended, the instructions suggested the codepen FCC (freeCodeCamp) source template would only work in Chrome so, not exactly being a fan of google I opted to use Chromium instead and it seemed to work just fine…

After hitting the ‘Fork’ button however, the ‘test box’/hamburger menu button disappeared in the display content / bottom segment of the screen so I figured to go back and CUT the following, starting on line 1 of the HTML (left) side of the screen & pasted it into my Text Editor (same as Notepad in Windows):

< script src=“https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js”>

(minus the space between < and script)
This allowed me to replace the test-box at will by pasting it back onto line 1 of the HTML panel and run the test to see if I passed all 10 marks and if not, which were failing.

Next, I found the following video which demonstrates this project helpful:

My hats off to the guy that created this video, although there are a few errors, it still helped immensely. Perhaps some might think it’s ‘cheating’ to watch & replicate the STEPS taken, but that’s just the way some people learn best: by demonstration. Even after going through all the programming challenges up to this point as background familiarity with the concepts, it can still be sort of daunting to jump right in relying ONLY on memory. Since all this stuff is new to me, every extra bit helps, and besides - its not like a proctored exam, so whatever works best to learn the skill. Ultimately, repetition is the key.

Obviously the content each person chooses for their page will be different, so the end result will reflect these variables and be different overall.

Even after watching the video & passing most of the test script, I still found the ‘User Story’ (project requirements) #'s 8 & 9 a bit challenging to get through:

  1. The img element should responsively resize, relative to the width of its parent element, without
    exceeding its original size.
  2. The img element should be centred within its parent element.

The answer to number 8 was found in the ‘Make an image Responsive’ section of the ‘Introduction to the Responsive Web Design’ challenges, where the solution to number 9 I was able to better find by duckduckgo-ing the topic ‘centering image elements’ and came across the following page:

https://www.w3.org/Style/Examples/007/center.en.html#block

A final step for me is to document the steps I’ve take to complete the project to sort of de-mistify & explicate the issue so it doesn’t seem so puzzling as it did when I began…

Here is my end result tribute page:

https://codepen.io/gJohn/full/BEXrbw

While it’s nothing fancy in any way, it passes the tests. If I want to experiment with some of the other programming challenges learned, I can simply tweek this forked template and see the results as I get more familiar with the concepts.

Anyway, cheers!

G

3 Likes

@gJohn, nice job for your first time. A few things;

  • there’s a Project Feedback forum, this would get more exposure there and possibly more feedback
  • codepen provides you with a validator for your HTML, CSS and JS code. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link. I mention it because you missed a closing > for your image element
  • try not to use <br> in HTML. Instead, use CSS. For what you’re using <br> for you can accomplish by making each of those sections their own paragraph. So instead of;
    <p id="tribute info"> Lot of text <br><br> more lot of text <br><br> </p>

You can do;
<div id="tribute-Info> <p>Lot of text</p><p>more lot of text</p></div>

There’s no such element as <p1> Did you mean to use <h1>?

Thanks for your feedback Roma! Being a newb, there is no way I would have known about these things since the tests showed as ‘passed’ although they are validating for different criteria than what you pointed out…

I believe I’ve correctly made the changes based on your suggestions - is there any way you can check to see if I did it right?

Thanks again and cheers!

G

Good job @gJohn. Looks like you cleaned everything up.

Thanks I wouldn’t have been able to identify the errors without your help!

1 Like