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:
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?Dr. Norman Borlaug
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 above6 - 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
Thank you all in advance for any feedback or advice you can offer!