"Typesetting a community school home page" assessment

(Filip sky) #21

thanks very much

I used “section p” that select all p in html.

again thanks


Hello Chris,

I appreciate the good works you’re doing at MDN. I have a question as regards the “bulletproof @font-face code.” The code generator on Fontsquirrel doesn’t provide the .eot, .eot?#iefix, and .svg formats on the occasions I have tried.

So I would like to ask if I can manually include those formats in my @font-face rule code or are there any other services you can recommend that generate the code?


(Chris Mills) #23

Hi there!

The reason the code is different is that the font face generator has updated the code it generates since I wrote the article.

It no longer provides the stuff you are highlighting because that stuff is needed to support old browsers like IE6, which are no longer deemed as needing support any more.

I guess I should update the article at some point.

(adilson) #24

this is my first post so, before anything, thank you @chrismills and all MDN staff for this course and its content. I’m learning a lot thanks to you.
And now to the topic, these are my live page and css:



how is it? I tried to shrink the ‘buttons’ in the navbar when pressed, but they got always out of vertical alignment. I tried many workarounds, but I gave up at the end.

(Chris Mills) #25

Hi @2alin! Thanks for the kind words about the course — it really means a lot.

Your code looks really good — its not exactly the same as our version, but it’s near enough. Your choice of fonts probably accounts for most of the differences.

In terms of shrinking the buttons, I’m not 100% sure what you mean, so I’ll take a guess. Do you mean that you want them to get narrower (smaller width) when pressed, but maintain vertical alignment?

I’ve written the following updated code for the nav menu CSS — is this sort of thing you mean? I’ve commented the important lines:

/* nav menu */

nav ul {
  padding-left: 0;
  margin-top: 0.8rem;

nav li {
  list-style-type: none;
  margin-bottom: 2rem;
  /* layout the children of the <li>s (the <a>s) as flex items */
  display: flex;
  /* Force them to stay in the center of the parent space */
  justify-content: center;

nav li a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  line-height: 3;
  text-align: center;
  font-size: 2.5rem;
  border: 1px solid #a66;

nav li a:focus, nav li a:hover {
  /* add a transition so that when the state changes, the width will animate over 0.6 seconds */ 
  transition: width 0.6s;

nav li a:active {
  /* change the width to 70% upon activation of the link; this change animates because of the above transition */
  width: 70%;

(adilson) #26

Thank you! Flex box was the key. I haven’t learned it properly (I think you’ll talk about it in the next section). The transition effect was awesome too.
I wanted the buttons to shrink in both axis not just horizontally. But looking at your suggestion as well as using align-items and adding a line-height transition, made the trick.
This is the new and last live version:


Thank you again, chris. And let’s keep learning.

(Chris Mills) #27

Perfect, nice work! Yes, transitions are really cool, as are CSS animations.