Set up for front end development (codepen)

Set up for front end development (codepen)
0.0 0

#1

Can someone please change the challenge for setting up codepen.io to include instructions for new campers how to make settings similar to 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">.
    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.
    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.

#2

This information needs to be included in the fCC codepen setup if we newbie campers are going to have to keep asking the same questions time and again until it is.

As Learning4Earnings points out in this thread (and as he was kind enough to point out in a feedback thread I created for my tribute page – thanks again!! :smiley: ) there are key elements to the setup that are just plain absent in the case of the HTML/JQuery settings and outdated in the case of using Codepen’s built-in “Quick Add” Bootstrap (which as many have pointed out in this thread and others is, as of ~Feb of 17, now Bootstrap v4 rather than v3 (which is what most of the bootstrap tutorials are about)).

As for which one to use, since I’m just starting out and I don’t want to have to learn v3 and then re-learn v4, and since there is now a lot of good documentation for v4, I think I’m going to stick with v4. Also, the visual changes in v4 are more in line with the “Material Design” style aesthetic than v3 (wells replaced by cards, for instance) in addition to some nice features that don’t seem as easy to work with on v3. I realize that I’m making things a bit harder on myself in using v4, but I’d rather do so now than have to go back and re-code everything later.

In any case, campers (and here I’m speaking for myself, a n00b if ever there was one) should at the very least be aware of the HTML and JQuery settings for Codepen as well as the choice of Bootstrap version. Version 4-alpha works just fine for me on Windows 8, 8.1 & 10 in Chrome. I haven’t yet tested it for other environments.