Help with tribute page project please

Hello. I just finished my first project and wanted some feedback. As I was very excited and confident going in, now I am filled with questions and confusion. I was making notes and trying to memorize on everything I have learned in each course, but as soon as I opened up Codepen to work on this project my mind went blank, it took me over ten minutes setting up <main>,<h1>…etc. I wanted to do so many things like visual design, using flexbox, grid, and user accessibility, which I have done none of. As I move on to my next project(Survey form), I wanted to ask some questions as well as some feedback.

  1. The guideline said that plain CSS is recommended but everything I did was on HTML and almost felt no need for CSS, is it because I didn’t use the proper tags I needed?
  2. When I add <style> at the beginning of my CSS, it shifts my <h1> so I took it off, reason why?
  3. User story#8 & 9 asks to resize “img” to be responsively and relatively to the width and centered of its parent element, without exceeding its original size. I did text-align: center; but that doesn’t seem like the right tag to use, what is the right way?

Along with each course on HTML and CSS, I’m using w3school to understand each tag and reference but I just don’t know when and where I need to use them. Any feedback is a chance for improvement so please let me know. Thank you so much and I apologize for the lengthy questions.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.93 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

Whenever you include html tags in your posts, the app will try to interpret them. If you put a backtick (`) immeadiately before and after, it will stop it.

I used a `<p>` here...

The backticks will show up in the editor but not on the screen. It’s also a nice way to highlight code.

I’ve edited your post to put those it to make it more readable.

You just didn’t add a lot of styling to the page so it looks pretty plain. HTML by itself is all you need to deliver content to someone, but CSS allows you to make that content look nicer so it is easier and more interesting to read. It can also help with accessibility as well. For example, right now the content will take up the entire width of the page, which makes for very long line lengths when the browser is wide. This can be hard to read for some people so generally you would put max width on the content so it doesn’t get too wide.

But you do actually have some errors with your HTML. I suggest you use codepen’s HTML analyzer to help you find them.

The guideline said that plain CSS is recommended but everything I did was on HTML and almost felt no need for CSS, is it because I didn’t use the proper tags I needed?

I see some CSS in there. But if you are getting the look you want, then you don’t need CSS. But most people will think bare HTML is kind of boring and something that we’ve seen 10,000 times. Most people will want to add at least a little CSS.

When I add <style> at the beginning of my CSS, it shifts my <h1> so I took it off, reason why?

How do you add a style to CSS. Can you show what you mean?

User story#8 & 9 asks to resize “img” to be responsively and relatively to the width and centered of its parent element, without exceeding its original size. I did text-align: center; but that doesn’t seem like the right tag to use, what is the right way?

Another common trick is:

margin: 0 auto;

That tells it to use 0 on the vertical margins and to automatically calculate the horizontal margins, in other words, center.

See if you can get that to work.

@kevinSmith

The backticks will show up in the editor but not on the screen. It’s also a nice way to highlight code.

oh that’s nice. Thank you! I was using “” but from now on I will remember to use ``'s. Thank you so much!

How do you add a `style` to CSS. Can you show what you mean?

As stated in this course (https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements), I thought you had to use <style> open and close tags in CSS and everything falls under it, but whenever I typed it on the very first line, for some reason it shifts my <h1> Led Zeppelin to the left so I deleted it and did everything without it.

That tells it to use 0 on the vertical margins and to automatically calculate the horizontal margins, in other words, center.

I think I have below in my code, but I did it without knowing what I was doing so thank you!

img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

Also could you tell me what you are using to put quotes from my post like that code above? when I do it for regular statements the way I do it for codes, it just has the dark gray background like it does above.

@bbsmooth
Understood. Thank you. I will go over the entire basic css and accessibility courses to see if I can make any improvements on this current project, which seems more important than just blindly moving on to the next project. But just to talk about the example you have mentioned about max width (https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-principles/create-a-media-query),

@media (max-width: 500px) {
  #main {
    margin: 0;
  }
}

would this be what you are talking about? to cover my entire <main> elements ? If I understood it correctly, max&min-width property is so regardless of the viewport’s width, you have the absolute or relative value to your page, but how would I know which value to set? I just picked 500px for this one instead of setting a percentage value to it.

If you don’t mind how would I use that analyzer on Codepen? I couldn’t find them on my current screen.

You use the HTML tag <style> in your HTML to tell it that you want to put some CSS code there. In codepen, you just put it in the CSS pane, without the need for a <style> tag. In the real world, you can put CSS in its own file and pull it in.

If you put that in the codepen CSS pane, that might have caused problems.

Yeah, for block quotes of text, I often put greater than sign (>) before each line. I think this is standard markdown.

You can also use [quote][/quote] tags.

Oh this is neat! Thank you :grin:

So when you work on an application, do you put everything on one page instead of seperate panels like codepen?

A “real world” app will have things split among several files. I would have several html files, and server css files.

But things like codepen are a good learning tool. It’s not a perfect example of “real world” dev work, but it allows you to simply that part of it so you can just worry about getting comfortable with code.

Will do. I feel I was getting over my head working on this first project like I knew everything I learned up to this point. I don’t and I can’t even comprehend some of them. I realized I need to go back to the basic HTML and CSS courses and re-read everything and make improvements on my tribute page before I rush to move onto the next survey form project, which will be meaningless without having that firm understanding of HTML and CSS. I’m glad I made this post because it helped me realize that. I will reply back once I have a cleaner and more accessible tribute page. Thank you!

The max width I was referring to was for the content (the text on the page), such as the text in the list items or figcaption. There are a number of ways you could put a max width on these. You could target each one individually:

li, figcaption {
  max-width: 45rem;
}

Or perhaps you could put the max width on the tribute-info section so that everything in that section would be constrained by the same max width. You could even put it on the <main> so that everything on the page is restricted to the same max width. These are the types of decisions that front end developers get paid for :slight_smile:

The media query example you gave is more about styling changes based on the width of the viewport. Your example says that while the viewport <= 500px wide don’t put any margins on main. This particular example doesn’t really have anything to do with constraining the width of the content itself. It could, if you added a max-width property to main, but I don’t think you need to in this case.

If you google for “common query breakpoints” you will get a bunch of links back with recommendations about all the different sizes of view ports you need to take into account based on the pixel size. And if worrying about all these different pixel sizes is your thing then go for it :slight_smile: But I never use px for media queries, I always use rem. Using rem allows you to take into account not only the width of the view port but the font size as well, which is an extra accessibility enhancement. And it allows you to forget that all of those different view port widths even exist because you are basing the break points on the needs of the content, not the device. I’ll be the first to admit that not everyone agrees with my approach or thinks it is necessary for accessibility. But I can tell you that not having to stress out over the perfect break points (in px) is a very nice feeling.

@lexjp8748

Yeah, it is hard stuff and it’s hard to get the basics down in the beginning. Cut yourself some slack.

I would also warn to be careful of trying to learn everything perfectly. It’s good to think about learning things well, but you also need to keep some forward momentum. You need to find a balance.

Note to self…use rem! Thank you I will definitely keep this in mind moving forward. :smiley:

Also, I found that HTML/CSS analyzer feature under settings, thank you for letting me know about it!

Will do. I will keep that in mind. Thank you so much for your advice!