Tribute Page - Need (lots of) advice

Tribute Page - Need (lots of) advice
0

#1

Hello All,

I apologize in advance for the length of this message, but I’m having a terrible time of this and could use some advice.

For starters, here is “my” tribute page: https://codepen.io/Tauro43/pen/yJxpBE. I had no idea who I could write about or what to say about them, so I just did my best to replicate the example given in the lesson. Per the instructional video, I selected Bootstrap in the settings, and copied the only CSS used: body {margin-top: 60px;}

As I was trying to re-create this page, I had a hunch that there was some code being used in the example that was either never mentioned during the lessons or that we had only touched briefly upon before moving on to the next lesson (i.e. saw it and practiced it exactly one time). When I finally took a look at the source code, turns out I was more right than I imagined.

So here are the things I’m wondering about (these all pertain to the example page):

1 - The rounded corners on the primary div and the image. During the lessons, the only way we discussed how to round corners was via custom CSS:

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 10px;
}

I’m wondering how this was achieved without using any custom CSS on the example page. Does it have something to do with this jumbotron class that’s being used (which we’ve never learned about)? I’m not seeing anything else in the code that looks like it would have this effect.

2 - The background color on this page is gray, which I assumed needed to be figured in to the code somehow. After looking at the source code though, I’m not seeing anything color-related at all. How is this possible?

3 - Almost the entire example page is nested within

After a lot of consideration I *think* I can understand the reasoning for this - to present the page as basically a single column - but it doesn't feel intuitive to me (I certainly never would have thought to do it that way). For a simple page like this, doesn't it make just as much sense to skip that code entirely? I'm just curious about what the possible justification would be to code it this way. For that matter, why specify col-**xs**-12 rather than col-**sm**-12 or some other variation?

4 - Both my page and the example page are using the exact same H1 code:

Dr. Norman Borlaug

Yet, the H1 on the example page is noticeably larger than mine and I can’t figure out why. Does this also have something to do with this mysterious jumbotron class?

5 - In line 10, just before the H3 and the unordered list, the following code is used:


I’ve never seen or learned about this “offset” property before. If I had to guess, I’d say it has something to do with the way the margins are presented on different screen sizes. Can someone please clarify/confirm? On my page I just played around with the margins until it looked roughly similar to the example, but it never would have occurred to me to use the code above

6 - There are two instances of <footer> being used on this example page (once on line 32, and again on line 39). This is yet another element that we haven’t learned about in the lessons so I don’t know what the proper usage would be, but I would assume a footer should be used just once at the bottom of the page. Clearly that’s not the case, so I’m curious about the justification for its usage here. Why use it on line 32, as opposed to just styling the text to be italic and dark gray? And why use it on line 39 vs a regular paragraph? Is it better/worse to code these items one way vs the other?

Not to be a pessimist, because I know staying positive and not giving up is the key to getting through this, but this project feels like something we were intended to fail on. I really hope that all of these things will be explained in further detail as the course continues, and that the next project we are given is more in line with what we have been learning and practicing. The lessons on here are great, and I feel like I’ve learned a lot, but it’s not very encouraging to be given a project where I feel less knowledgeable at the end than when I started :confused:

Thank you all in advance for any feedback or advice you can offer!


#2

You actually can’t fail this or any of the projects. As far as I know, the only way to fail at freeCodeCamp is to get yourself expelled from the community for seriously violating the guidelines, or by quitting one of the non-profit jobs after you’ve committed to it. No, what you’re doing isn’t failing, it’s struggling, and there’s a huge difference.

Let’s try to address your questions:

1 - The image is wrapped in a div with the thumbnail class. That’s what takes care of the corners, as well as the spacing and border.

2 - The grey comes from the class of jumbotron.

3 - I wouldn’t have done it that way either, and I don’t suggest you do. But they did, and it’s a valid method. They chose col-xs-12 rather than the other sizes because they want it to work for all sizes. Each column size will only work for the indicated size and up.

4 - Yes, this is probably due to jumbotron.

5 - Offsets follow the same logic as the other grid classes. col-sm-offset-1 means that on small sizes and up, there will be 1 empty column on the left side.

6 - The first <footer> is for the <blockquote> element and is used to place the quote author’s name. Check this out.

Being a developer doesn’t mean that you know or understand everything that you see, read, or hear. Never will everything you need to know be presented for you. Check out the documentation (I promise, the Bootstrap documentation is quite pleasant), and search YouTube for tutorials. Being a developer means you’re learning for the rest of your life, so it’s important to get a mental map of where to go for information when you need it.

It’s also important to understand that you are not required to make anything that looks as good as the example. I suggest you make an ugly page. Like, dog-vomit ugly. Just get it out of your system and every project thereafter will feel like an improvement. If you force yourself into making some masterpiece that would bring Michelangelo to tears, you’re setting yourself up for a painful process that will only end in frustration and disappointment. If you wait until you know everything before building a project, you’ll end up both knowing nothing and doing nothing. I know it seems like the challenges should have taught you more or that you don’t really understand what you did, but the only way - not the best, the only way - to progress at this point is to just start building something. So, the tribute page is meant to throw you into that fire. The hardest part of this whole program is realizing that you’re capable of it.