Need help with something on my first tribute page using codepen

Need help with something on my first tribute page using codepen
0

#1

Hello everyone. I’m making my first tribute page on fcc so I can move on with the lessons. I wanted to make a bullet point of positive and negatives. I was wondering if anyone could help me move my negative on the right side aligned with positive. Currently it is under my “Positive”

Also, if I wanted to add a background color to my first three headings would that mean I would have to nest the three headings under

and then add a declaration in css? like div{ background-color: grey;}. My current background is set as black using div {} Little confused. Thank you for your time.

Can you guys see my page from this link?


#2

@cryptokim1 Funny! :laughing: This is a good start.

Your CodePen is here.

To answer your question about the bullet points, the general idea is to create a container that contains both lists and then align the lists within that container the way you want them, side-by-side.

I recommend reading through the FCC Beta site about bootstrap or better, Flexbox. If you want to go the Flexbox direction, which I recommend, I’d suggest also taking a look at Flexbox Zombies. Flexbox Zombies really helped me understand Flexbox!

In response to your question about section background colors, your background color seems to be set to black in your <body> element. To add a different background color to specific HTML elements (like a <div> that creates a section), you’ll want to select the sections in your CSS. Here’s a good resouce for learning more about CSS Selectors.

As far as I know, there are no <p1>, <p2>, <p3> elements in HTML. I could be wrong about this, but I’ve never seen them used before. Do you have a citation to reference where I can learn more about them?

The other main suggestion I have is to copy and paste your HTML code into an HTML validator. This will show you some errors in your code that you can fix and help you learn what web browsers are expecting from HTML code.

Frankly, you have a lot of errors in your HTML and CSS. It’s to be expected at this stage, so that in and of itself isn’t a problem. However, I strongly recommend that you re-read the HTML & CSS challenges so you can correct some of these errors and learn more about best practices when writing HTML & CSS.

Keep up the good work and let us know if you have any questions.


#3

Hello Camper, thank you so much for the detailed reply and awesome links your provided! I’m slowly getting a better understanding of each element as I read more and review. I’m slowly understanding containers. I took a look at flexbox and it seemed very interesting. I will definitely learn this as the reviews seem very positive. So by my understanding, flexbox does the same thing as bootstrap, but more responsive and easier to navigate?
Yes, I understand now how to set specific colors for any element with the

and id tag. Everyday different codes are getting more understandable and I feel like I know what I’m doing.

is just a paragraph element that I learned from the ffc guide. https://www.freecodecamp.org/challenges/inform-with-the-paragraph-element Yes, I need much work to keep my codes cleaner, but I think I'm getting better. I have finished my tribute page, but I wanted to add an element at the bottom of my page with a long horizontal line with


, but it doesn't seem to show. Do you know what is wrong with my code? Thank you so much again for your time and response! Much appreciated.

#4

@cryptokim1 Not exactly. Bootstrap 4 uses Flexbox, as Flexbox is native to CSS3. Many people probably find that working with Bootstrap is easier than using Flexbox. However, I feel it’s better for beginners to learn positioning with Flexbox and then use Bootstrap as a tool once they understand more about what’s happening.

The only valid HTML paragraph element I know of is <p>. The elements that you’re using, <p2> and <p3> etc…, are not valid HTML elements. <p id='p3' class='p3'> is valid, but that’s only because the id and class names can be anything you want and this is still, at it’s base, a <p> element.

Your problem with the <hr> element can be solved by giving it a border width in your CSS. Also, apparently Bootstrap defaults to a black border. You tried to make the border white in your CSS, since your background is black, but you have border: 0 also which makes the border have no width and is therefore essentially invisible.

Also, do you know how to use DevTools? That’s how I researched your <hr> problem.


#5

Yes I will practice both. Before I didn’t really understand what was gong on. Now I do. I finally got the border, but adding border-width didn’t help. I tried many different codes, but I finally found one that worked. I needed to add a border-top and then I could config the color and style. Heres a link with more info on the different styles. https://codepen.io/ibrahimjabbari/pen/ozinB

No I didn’t know what DevTools was, but now I do. Haha thank you again so much for these awesome links and help. I will deff go through all the free lessons in the future. Right now, I’m currently learning the basics of javascript. FFC was kind of confusing, but https://www.sololearn.com/ helped me better understand what I was doing on FCC. Will go back and forth from these two links for now and then study Devtools, which looked like I needed to understand Javascript first.