Need to Learn more for Tribute Page. Suggestions?

Got through the first sections like a breeze. Got to the tribute page and Im stuck in the very beginning stages, like the best way to center, and why certain code is negated/not active. Truly feel like Im missing a huge chunk of education to complete this.
Ive already done Udacity’s HTML/CSS:intro, and Khan Academy’s intro in the past.
Im at the point where Im just typing anything from W3schools in hopes that it works.

-Do I HAVE to figure out bootstrap for this? Is this a best practice? Will I actually need it? Some ppl chose not to use it, some did.
-What concepts/practices do I need to learn to better manipulate and control my grid system? Im having the biggest problems getting things to sit or conceptualizing what the code looks like for what I want the page to look like.

Can I expect to have to spend about 10 hours learning bootstrap before having enough knowledge to complete this with decent code?

Im not trying to be lazy, just trying to get a sense of my education here.

Thank you everyone!

P.S.: I had to delete all my CSS once before and heavily edit the HTML already, so I guess im not the brightest bulb in the box. So far Ive spent…6 hours? So maybe thats not a lot and im not too dull? Im so lost…

See the Pen Tribute Page by Nneka Lyn (@Nnekalyn1) on CodePen.

Hi,

Don’t worry about it. It’s absolutly normal to get stuck. The best tip I can give you is to search in the web for every little task that you want to complete. I mean in an specific way. If you want to know how to center, search and study the techniques you find and decide what you’ll do after that. Talking about centering, take a look at this video from DevTips.

If you want to do some more exercises to feel more confortable coding, you can use the Codeacademy courses.

I noted that you are using the Bootstrap class names in your CSS, but your code have no link to the Bootstrap files. If you wanna use Bootstrap, add the following code to your HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

If you wanna know how to control your grid system without Bootstrap, take a look here.

Another sources to learn is CSS-Tricks, Sitepoint and Stack Overflow.

I hope that helps! :slight_smile:

Hi. I was also in a similar situation when I reached the tribute page. There are so many ways to move elements and containers that it gets very confusing. You have bootstrap classes, css values (and more than one way to get the same results), html attributes (many deprecated), etc.

What I recommend is learning all the ways you can order the elements (html, then css, and finally frameworks like bootstrap) but it takes quite some time. If you want quick results then I think you should use bootstrap classes, you should be able to order everything in less than 10 hours. Then if you want to learn a bit more check how each html tag places itself (display attribute) and css properties like position, float, top, right, left, bottom, margin, width, height, max-width, overflow, clear, etc.

Hi,
previous commenters have provided you with good suggestions of resources to delve into; I will say this: the time allotted to the completion of exercises and challenges is approximate. You should in no way feel that you are under par for not having completed a task in the allotted time. Everyone’s rate of learning is different, as are our strategies for learning. Coding is hard; accept that. It requires a type of thinking that is quite different to what most of us are used to, but we can train ourselves to solve problems in a logical, methodical manner - just don’t expect results overnight!

I approached my portfolio with the knowledge that I acquired from the course. We were urged not to cheat and look at the code from the portfolio example, so based on what I saw and what I had learned, I put my page together. It is not finished, it is not how it ought to be, but at this stage, it is to be expected. We are learning to be web developers, so there will be many times when we just do not have a clue, or we are tantalisingly close, but can’t quite find that one piece of code that would complete a stage or the whole project. Frustrating, it will be, but you will learn and move on.

Thanks for your reply.
I have a link to boostrap in my CSS settings, didnt realize I needed it also in the HTML.
Can you rewrite the code? I didnt show up in the message.

I edited the my reply above. Now the HTML code is showing up. :slight_smile:

1 Like