Need review for first 2 projects and some questions

Tribute page:

Survey form:

After I worked on first 2 projects, I have some questions.

  1. Is it usually necessary to divide a page in sections and wrap each section with a tag? For example, in the survey form demo, each question(small section) was wrapped with a div.

  2. How can I make my survey form having background picture at the back as shown in the demo?

  3. I have learned about different ways to define a color in CSS, like using HEX number and rgba value. Does frontend developer have to understand well how those work when develop web?

  4. In the demos, I noticed that they referenced everyone of them with both id, class and name… Are they all usually needed ? I understand id and class can be referenced for writing CSS. I work on some other JS project myself, I knew class is always needed.

  5. When defining margin/ padding, which measurement is recommended or people usually use since rem and px are both used by developers?

2 Likes

Hi, nice start to your projects! Here are some of my thoughts on your questions:

  1. You might use many divs or none for an HTML element—it depends on how you can accomplish the styling you are trying to achieve. There are also section elements called landmarks, e.g. <main>, <aside>, <header>, <footer> that give more meaning to regions that you can consider using instead of <div>, but it’s best to research them more before using them. They don’t always work the way you might think.

  2. You can add a background tag using CSS similar to the following:

#survey-form {
  background-image: url('https://www.freecodecamp.org/news/content/images/size/w2000/2020/08/Meetings.jpg');
}

There are more background CSS options like position, repeat, size and more.

  1. Knowing how a hex or rgba are calculated (color-wise) isn’t too important. Common programs like VSCode make it easy to choose colors while working. These days, more web developers are actually using HSBL due to the ease of changing the color.

  2. For styling, my best practice is always to style using classes, even if the item only appears once in your code. Styles are intended to be reusable. IDs should only be once per page, and are more useful when targeting a single item using JavaScript. I believe the name is only used for forms after submitting, or for targeting using JavaScript. Anchor tags used to use name/ID, but these days anchor tags (links that jump to the middle of a page) are normally done using the ID tag.

  3. I try to stick with rems for padding and margin. A common approach is to use the 8-pixel grid. Since my normal default size for projects is 16px, this works well with the rem measurement (.5rem).

Happy coding!

1 Like

Your pages look okay @gvghk1. Some things to revisit;
tribute

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There is an HTML coding error you should be aware of and address.
  • Review the lesson about giving meaningful text to links.
  • His last name is spelled Washington

survey

  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
1 Like