Submitted my Tribute page

Just wondering what you guys think. I definitely learned a lot while doing it, and yes, I realize that it’s a bit lachrymose, but it ended up being a good creative outlet for me at the moment. Thanks in advance for any comments.

Here’s the codepen: https://codepen.io/tehDrew/details/XRLvQr/

Hoping the best for Doc.
As for your tribute page, I like the images and overall layout.
I see you are trying to use bootstrap, but your project is totaly non responsive at this point.

Bootstrap is a framework that allows you to have web pages that look good at any device width. When used properly pages look good form a 55 inch t.v. screen down to a 300 pixel phone screen.
Bootstrap uses a proprietary CSS, Javascript, & JQuery to accomplish this.
When you do decide to use bootstrap in codepen there are some settings
you will have to make in codepen. Click on the settings button in the top portion of the codepen window.

  1. Click on HTML and copy and paste the following in the panel that says “Head Stuff”
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">.

  2. Click on CSS and in the panel near the bottom where you add external resources paste this in.
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
    If you try to use the quick add feature it will use the newer beta version of bootstrap. You really don’t want to use the beta version.

  3. Click on Javascript and again in the panel near the bottom paste in this:
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
    While still in the Javascript settings, also paste this into one of the panels.
    https://code.jquery.com/jquery-3.2.1.min.js

Click on the green Save & Close button.
Your codepen should now be configured to run bootstrap.

1 Like

Thank you, both for your feedback and the well wishes.

With regard to adding Bootstrap to Codepen, the project video specifically shows us how to set up our Codepen using the “quick add” feature, so no wonder I ran into so much conflicting information (for instance, fCC tutorials use “wells,” which are replaced in v4 with “cards”).

As for the HTML and JQuery information needed, this is the first anyone’s brought it up (in my limited experience thus far), so I really appreciate you sharing it.

I wonder if perhaps this should be added to the video/project page (or even sooner)? It’s so useful and seems pretty fundamental, so maybe we could get a mod/someone like that to weigh in? I wonder, too, whether we should learn Bootstrap v3, which while “stable” is soon to be made less useful by v4, which makes some major changes?

Regardless of those questions, thank you once more for the time and effort you put into your response as both the information and the time it took to gather and format it are much appreciated!

Actually. I brought this up in the meta forum see post:(set up for front end development(codepen) . Others have posted as well that newbies need to be informed of this settings process. Don’t know if anything will become of it.

Informing new campers ahead of using codepen could have saved them lots of time, effort and frustration.

When my pens didn’t initially work, it took a lot of logical deduction to figure this out.

Glad to have helped you.
Happy coding :relaxed:

1 Like