Build a Tribute Page Project Questions, Discussions, and Resources (January 2018 Cohort)

do you have to define the id’s or do they come as established or something?

  1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size
  2. The element should be centered within its parent element.
    what is the parent element? the div? and i cant remember how to responsively resize. I dont know if it is because i skipped an exercise but i am looking through the challenges and i dont see anyone explaining how to do this.
    i went on the net and a site said set height to auto and max width to 100%. I did that but it did not fix the first bug

Elements resize responsively when you set their sizes in relative units (like percentages) rather than absolute units (like pixels).
The parent element is whichever element surrounds the element in question. In this case it is the <div> element if you followed this requirement:

  1. Within the “img-div” element, I should see an element with a corresponding id=“image”.

In a real project, you choose the names for your ids. In this project, however, the id names are pre-determined.

Use Twitter Bootstrap to make your website responsive. Look over the FreeCodeCamp exercises pertaining to Bootstrap for a review.

The parent element is the element in which the specific div (or any element) is nested inside of. For example,

<div id="parent">
  <div id="child">
     <!-- This div should be centered according to the project specs -->
  </div>
</div>

I hope this helps and good luck!

This is good advice, however, I would recommend not using Bootstrap for this project in order to focus more on HTML and CSS. If one only uses CSS and HTML for this project, one will get more practice with these languages and become more fluent in them. Having a strong understanding of these languages is essential for success in more complex technologies later.

2 Likes

As an extension, if you choose not to use Twitter Bootstrap, learn and implement Flexbox.

1 Like

but fcc already made us put a bootstrap link in our css in codepen

1 Like

I got 10/10 but i am trying to add more style to my page and some things are not working for me and i dont know if its my fault or codepens
This doesnt work:
h1 {

}
I am trying to make my heading be bold with a big font size but its not working and i dont know why.
This is my code:
CSS

h1 { color: black; font-family: VT323; font-weight: bold; font-size: 100px; }

Can you share a link to your pen?

@deedee Nice catch! :clipboard: I think you’re referring to item 6 of the Get Set for Our Responsive Web Design Projects challenge:

Click the gear in the upper left hand corner of the CSS box, then copy this link https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css inside the text box. Now give your h1 element the class of text-primary to change its color and prove that Bootstrap is now available. Note that by using the dropdown menu and selecting “Bootstrap”, the Alpha v.4 will be added instead.

I’m pretty sure this needs to be changed since in the beta curriculum, bootstrap hasn’t been covered up to this point.

I’d chalk this one up to an error/bug that needs to be fixed, or at the least, clarified. If you want to file an issue about this so someone can fix or change it, go here: How to Report a Bug. Let me know in a private message if you’d like help with this. :sunny:

For the tribute page project, I don’t think one will need to use too much (if any) Bootstrap, CSS Flexbox, or CSS Grid in order to pass the tests. This project is basically to get people used to the basic interactions between HTML and CSS.

I just finished up the layout of my tribute page (just need to clean up the code now) and I can’t figure out why my background image isn’t showing up on mobile devices. I tried a small moto x phone, a galaxy note 8, and a fire tablet and it wouldn’t show on any device. I also used multiple mobile browsers to test it an none would work correctly. However, in chrome dev tools it shows that it should be there on all of the screen sizes. Any ideas?! My pen is located here. Thanks!

I did a super quick search on Stack Overflow. It seems the issue may be that
background-attachment: fixed;
is not compatible with mobile devices.

:frowning_face:

1 Like

Nice tribute page btw. Very nice

1 Like

Ahh that explains it, I’ll have to mess around with it later or maybe just use a gradient background on mobile devices.

Thanks! I’ve spent way more time on it than I care to admit.

@slamoureux This seems to work for me on mobile. Not sure about larger viewport widths:

body {
  margin-top: 50px;
  background: url("https://awesomewallpapers.files.wordpress.com/2016/01/nebula-2710ceb3c3a7c3a5x1694-16x10.jpg") fixed center center no-repeat;
  font-family: sans;
  color: #f5f5f5;
  text-align: center;
}
1 Like

seriously can someone please look at my code to help me figure out why my styles are not working? i cant figure out what the problem is.

You have defined the id attribute twice on your h1 element. According to the HTML spec,

There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.

If I were you, I’d ditch the id altogether. You have only a single h1 element on this page, so just select the h1 for your styling instead of adding a superfluous id attribute to hook your styles into.

@deedee I think the problem you’re having with styling the h1 element is that you’re also styling the #title id! This is a great example of why people recommend not styling ids. :clipboard: The specificity of ids can sometimes lead to misunderstandings about why something is styled the way it is. To fix this, remove the #title id from your starting h1 tag and your CSS will apply to it correctly.

I agree with @raddevon about not using an #h1 id. Here’s some more information that may help you learn how to properly style the h1 element. In the challenge example, they use the h2 element, but the same process can also be applied to the h1 element (and any element):

1 Like