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:
- The img element should responsively resize, relative to the width of its parent element, without
exceeding its original size. - 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