Beta Tribute page - Feedback please

I really appreciate any feedbacks… self-sabotage is killing me

Don’t use <em> to make the person’s roles italic. The <em> element has a semantic meaning and is not supposed to be used to italicize text for presentation. Use CSS instead.

Don’t use <br> elements to add space between sections. Use margin or padding instead.

I think the “learn more” link should be placed below the awards section. Also IMO, it could use a better color (that better fits the pages overall color scheme) than the default Bootstrap blue.

Other than those your page looks neat :+1:

1 Like

Thanks for your feedback , it was really helpful. I,ll make changes that you suggest.
Good points about <em>and <br> , should CSS be used instead of HTML whenever it’s possible?

Use HTML where it’s appropriate. I recommend looking up an element on MDN to see proper usage.

If you’re going to make changes that are entirely presentational (like making text italic for style, or increasing space between elements), use CSS.

Thx for the advice, I’ll make use of MDN more.

@zeinab88 Very nice work here! :tada: You use HTML5 semantic elements and your understanding of HTML and Bootstrap shows through clearly in this project. Here are some thoughts to consider for improvement:

  • Bootstrap: It’s ok to use bootstrap for this project. It seems like your use of bootstrap is correct as well. Nice work! As a challenge, and to demonstrate your understanding of CSS, you may want to try to refactor your code using CSS only. Here’s the text in the beta curriculum test suite regarding the tech stack one is expected to use for this project:

    You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding! [Emphasis Mine]

  • Alt Attributes: Some of your images do not have alt attributes. I notice that the images without alt attributes do have figcaption, so that’s good. However, I think in this case, you’ll want to add an empty alt attribute (alt="") because the img element requires an alt attribute. I like to read through WebAIM’s guidelines when I’m writing my alt attributes:

    The alt attribute should typically:

    • Be accurate and equivalent in presenting the same content and function of the image.

    • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

  • HTML Errors: When I copy/paste your HTML into this HTML validator, I notice a few errors that you may want to fix.

  • !imporant rule: I see you’re using the !important rule a few times in your CSS. I think you’re doing this because it’s sometimes difficult to get around the default bootstrap styling. If you choose to refactor without using bootstrap, you may find less of a need to use the !important rule. Here’s some more info from MDN on Specificity:

    Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

Overall, your site looks very good and is a great first project for fCC! :sunny:

1 Like

Thanks for your feedback, you cant imagine how much that means to me.
I’ve refactored my code using CSS only, so all !importants are gone! :slight_smile:
I don’t know why i didn’t pay attention to alt, i’ve fixed them and also there is no errors any more using the html validator.

1 Like

@zeinab88 The changes look great and you used CSS Flexbox! :rocket:

Can you figure out a better way to select what you want instead of child selectors like section > figure and section > h3? This is why I ask:

By keeping selectors short you are likely to be reducing the amount of descendant (e.g. .sidebar .promo {}) and child (e.g. .sidebar > .promo {}) selectors. By removing these descending types of selectors you are reducing the necessity for an element to live inside another one.

Ok , I think i got your point, but i need to read more about this.:thinking: (English being my second language is making me struggle to learn stuff!!!)

i’ve used id s to do so, although i was not sure if i should use id or class. would you help me more with this?
THX

1 Like

@zeinab88 I think it’s better to use classes instead of ids for selectors in CSS. I only use ids in HTML to link to sections within a page and to make JavaScript element selection a little easier … Oh, and to pass the fCC tests. :slight_smile:

2 Likes

OK :+1: changed :slight_smile:

i didn’t get the point of using those ids in FCC test!!! i don’t know how these tests are helping us !!!:confused:

1 Like