Assessment wanted for A community college homepage

MDN Learn
#1

Task:
Task of styling text when learning CSS

My homework
my work

And here are my questions:

  1. When I want to achieve the horizontal consistency, I almost forgot all the default margins and paddings of ul and ol. Is it necessary to clear the margins and paddings of all elements before writing CSS? Or I need to remember the default styles of some common elements.
  2. When I am writing this task, I need to constantly refresh the page to prevent my style from not working. Are there any irregularities in my code？Or Is there any better-practice for me to following in order to reduce the number of times I refresh the page?

Any suggestions are welcome. Thanks in advance.

#2

Hi @Hwa_He and welcome to the community! :wave:

You habe done a great job in styling the page. Congratulations!
Two small remark regarding the fonts:

  • You assigned the serif font to p, ul and ol. For simplicity you can just assign it to the <html> tag. Because the heading font definition comes after the html font definition, it overwrites the serif font with the sans-serif font for headings.
html {
  font-family: "Text font", serif;
}

h1, h2 {
  font-family: "Heading font", sans-serif;
}
  • You used a slab font for the text. Slab fonts are designed for larger texts like headings. So I would recommend using a serif font optimized for body text (like “Noto Serif”)

Regarding you questions:

  1. I wouldn’t recommend neither clearing everything nor remembering everything. As you already did in this exercise you start with some HTML, you look at it and start adding more and more CSS so the page finally looks like you want. Something that is popular nowadays is using a base style sheet like normalize.css to have a consistent look across all browsers before adding your own styles.
  2. Nothing wrong with your code. If you change a file, the browser needs to know about the update by reloading. When you become more experienced, you will be able to write more code before checking how it looks. In modern development environments there often is a service integrated which automatically detects changes and reloads the browser for you.

If you have any further questions, feel free to ask!

Have a nice day!
Michael

#3

Hello! It’s very kind of you. This is the first time I know the concept of slab font and the necessity of normalize. I’ve learnt a lot.

1 Like