Tiffany R. White Blog

Dark Mode
Light Mode

FCC Front-End Programming Project

March 10, 2016 • ☕️ 3 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.

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.

Share article
LinkedIn

Discuss on TwitterEdit on GitHub


Tiffany R. White Blog

Tiffany White

Blog of Tiffany White. Thoughts on React & web development. My stuff: /uses.