First FCC Challenge: Tribute Page

Code Feedback
1

Hi Everyone, I am new to the FCC community and hope to be a fullstack developer someday.
I have just finished the responsive web design chapter and would appreciate some feedback on the tribute page that i had made and what could have been done better. (p.s. i am pretty terrible at designing)

I am also using FCC content for the design as i spent too much time procrastinating on whom to do a tribute page for. :sweat_smile:

The link to the page can be found here : https://codepen.io/thyashley/pen/YzPGxXw

There are also a few question i have after finishing this first project that i hope someone could help answer.

  1. I notice in most website, the id and class name seems to be very random and doesn’t make any sense, why is this so?

  2. Should i create a id/class for every tag even if they are not being used?

  3. is it a good idea to start my CSS by setting

    body{
        margin: 0;
        padding: 0;
    }

  1. Should i be using rem, % and em and avoid px as much as possible?

  2. when using rem, it seem that i need to set the default px in the html element instead of the body element, is this the right way of using rem?

    html{
        font-size: 10px;
    }

  1. when should i decide to use grid or flex for a project?

  2. is there any best practice to the number of media query that should be used in a project?

Thanks in advance!

1 Like
2

Great Work Man.

I am really impressed. Thanks that you asked these questions. Even, I am looking for the answers of these questions.

3
  1. I notice in most website, the id and class name seems to be very random and doesn’t make any sense, why is this so?

Class names are needed to give schematic representation. It is a problem in representation of data if every content is classified as div or paragraph. Instead using class name we should give a strong hint about the location of content, colour etc. For example container green.
2. Should i create a id/class for every tag even if they are not being used?
It is a good practice
3. is it a good idea to start my CSS by setting

    body{
        margin: 0;
        padding: 0;
    }

Depends on what you are trying to do
4. Should i be using rem, % and em and avoid px as much as possible?
5. when using rem, it seem that i need to set the default px in the html element instead of the body element, is this the right way of using rem?

    html{
        font-size: 10px;
    }

Rem, em and px have their importance and each gets it place based on specificity of the element and location. Px is very specific, whereas em and rem are on the outer elements, rem being the outermost or more global. Trying a few examples on a regular basis will help. Try setting up tables, paragraphs etc.
6. when should i decide to use grid or flex for a project?
**For responsive design **
7. is there any best practice to the number of media query that should be used in a project?
**

As there are many kind of devices, it is important to test for device that makes maximum importance to your CSS. Rarely you will run into issues because of number of media queries

**
Thanks in advance!

1 Like
4

Hi @Tashhy, your page looks okay. Some things to revisit;

  • Not everyone uses Windoze. I’m one of them so I don’t have the Calibri font on my box. Put in a backup font, such as sans-serif.
  • Review the lesson about giving meaningful text to links
    • ‘click here’ is a 1990’s thing
  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
5

@datageekrj, I tried finding some of these answers but didn’t get much info on them

@deepalimayekar , thanks for the guidance and clarification, do you have any examples where we should use px? i have read online that em’s should be use mainly for media query and rem should be use for majority if not all of the text on a webpage.

@Roma, Thanks for the feedback, other then using a backup font is there by any chance a way to style css based on the user browser type?
I will also take note of the head stuff, i do my code on visual studio code and port it over to codepen :rofl:.

6

It’s not the browser type. It’s the operating system. Not all operating systems have all of the same fonts loaded by default. You can probably Google to see if a font that’s loaded by default on one OS is loaded by default on another OS. Otherwise, choose a font or two from google fonts and link or import it and then choose a backup font based on what you chose, either sans-serif or serif.

I did my projects in Brackets and then ported over only what was needed to codepen. I was just trying to help you work smarter with codepen.

7

Ah, okay i misunderstood the browser and operating system previously.
Thanks for clarifying!

8

Some examples with a higher specificity:

[https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }