Chapter 4: Move from CodePen to VSCode

Working in CodePen is super fun. It's very responsive and you get to see the results of your work immediately. However, in the long run, we'd like to have a real website! Let's move the sections of the page that we've created so far from CodePen and into VSCode.

Part 1: Setting up our file structure

On your desktop, make a folder called "portfolio". Inside of that, make a folder for images and one for CSS.

Open up VSCode and drag your folder into the editor. Make a HTML file for index.html in the portfolio folder. Make a blank stylesheet called styles.css and place it in the CSS folder.

Part 2: Copy over the code

Visit the CodePen Collectionfor the course, or look back at your own work in CodePen to this point. Locate at your ending state CodePens for the text, navbar, footer, and contact pane, and open each in its own tab.

1. From the very last CodePen we worked on, copy the CSS and paste it into the CSS file.
2. In your index.html file, make sure you've got links to the Oxygen and Oxygen Mono Google fonts, as well as the Font Awesome 5 font pack.

3. From the appropriate CodePens, copy over your HTML, starting with the header, then the introductory text, then the contact area, and finally the footer.

   View the answer on Github - ch-4-begin

4. It's not going to be perfect! Can you work through the issues in VSCode and figure out how to resolve the problems?
5. Bonus: Can you turn the Contact email link into a button similar to the one in the navbar?

Part 3: Adding the lines in between sections

Our finished page shows some thin lines that go from magenta to aqua (similar to the ones you see on this page). One possibility would be to use a border for the line. However, a border can't have a gradient like this and work consistently across browsers. (Jen got it working in Chrome and Firefox, but Safari was another matter...)

Instead, we'll use a div element with a class of gradient to generate this line. We'll need to generate the gradient and set a height for the div as well.

• Generate the gradient. Use #ff17e4 as the starting color and #86fbfb as the ending color.
• Set up a style in your stylesheet with the gradient, create the div, and apply the class to get the line.

View the answer on Github - ch-4-end