FCC Front-End Programming Project

1 min read

\"front-end_programming\"

So I started the second front-end programming project for Free Code Camp which is the portfolio. I shared a Pen from a former Free Code Camp alum who built an interesting portfolio, which is what Free Code Camp uses as their example, which is high-praise.

I had trouble with getting my background image to show. I had this as my html:

<div class=\"container-fluid\"><img class=\"\" src=\"https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg\" alt=\"\" />

This didn’t make it responsive, however. So I did this:

<div class=\"container-fluid\"><img class=\"img-responsive\" src=\"https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg\" alt=\"\" />

It still didn’t work.So I went to the Gitter chat and asked around. Someone suggested adding the image to a div and not inside a container inside another div.

So I did this:

<div id=\"mySection\" class=\"container-fluid\">

padding-top: 50px;
display: block;
height: 200%;
background: url(“https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 100px;
color: #fff;

Someone gave me this suggestion in the Gitter chat. This made the background a sliver across the screen. He told me to play with the padding at the bottom. So I ended up with:

padding-top: 50px;
display: block;
height: 200%;
background: url(“https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 2000px;
color: #fff;

I also found a stray div with my navigation. Now it’s starting to look good.

CC BY-SA 4.0 FCC Front-End Programming Project by Tiffany White is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.