"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


#22

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?

Regards


(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

Hi,
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:

https://2alin.github.io/learn/mozilla/school-homepage/

https://github.com/2alin/2alin.github.io/blob/master/learn/mozilla/school-homepage/styles/style.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:

https://2alin.github.io/learn/mozilla/school-homepage/index.html

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


(Chris Mills) #27

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


(Tom Vanderboom) #28

Hi, Mr Chris, I had just finish the Typesetting a community school home page assessment, could you please give me feedback on the work?
It looks like as follow


and here are the css code

/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}

/* Layout */

section {
  float: left;
  width: 50%;
}

aside {
  float: left;
  width: 30%;
}

nav {
  float: left;
  width: 20%;
}

footer {
  clear: both;
}

header, section, aside, nav, footer {
  padding: 20px;
}

/* header and footer */

header, footer {
  border-top: 5px solid #a66;
  border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE */


@font-face {
    font-family: "bodyfont";
    src: url("Alegreya-Regular.otf");
}

@font-face {
    font-family: "headingfont";
    src: url("Cabin-Bold.otf");
}

html {
    font-size: 10px;
}

body {
    font-family: "bodyfont", Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 1px;
    word-spacing: 2px;
}

h1, h2 {
    font-family: "headingfont", Arial, sans-serif;
    letter-spacing: 4px;
}

h1 {
    font-size: 3.2rem;
    text-align: center;
}

h2 {
    font-size: 2.4rem;
}

h2 + p {
    text-indent: 20px;
}

a[href^="http"] {
    background: url("external-link-52.png") no-repeat 100% 0;
    background-size: 16px 16px;
    padding-right: 18px;
}

a:link,
a:visited {
    color: brown;
}

a:focus {
    color: coral;
    text-decoration: none;
    outline: none;
}

a:hover {
    color: coral;
    text-decoration: none;
}

a:active {
    color: brown;
    outline: 1px dashed grey;
}

ul {
    list-style-type: square;
}

nav li {
    list-style-type: none;
    text-align: center;
    width: 20rem;
    padding: 1.5rem;
    margin: 1rem;
    border: 2px solid #aa6666;
}

nav a {
    text-decoration: none;
    font-size: 2.4rem;
}

(Chris Mills) #29

@Tom-Vanderboom, this is looking like a good effort too, nice work.

The only definitely comment I could come up with is that you’ve set the default font on the <body>, whereas really it should be set on the <html> element, for a few different reasons. Basically, things like size inheritance don’t work properly when you don’t put it here.

You could also take a look at our finished example/marking guide to check out the differences between yours and mine:

I don’t think there is really any cause for concern here though. Your design choices are different to mine, but this is fine.


(Tom Vanderboom) #30

Thank you for your replying!


#31

Hi Chris,

Could you take a look at my “Typesetting a Community College” exercise from the CSS - styling text section of the MDN webdev tutorial?

I encountered some difficulty with selectors and inheritance, but for the most part it works and looks ok. Any and all feedback (what could have been done differently/improved upon from either visual or code perspective) much appreciated.

NOTE: I didn’t realize the (casual and not very on point) replies from my e-mail got re-posted here as well, and got (rightly) marked as “spam”. Ufff, embarrassing.
Incidentally it occurs to me I’d probably be well advised to start using IRC for advice/debate/feedback. Is there a dedicated channel specifically for discussion of these initial projects from the MDN webdev tutorial beyond the generic #mdn?

Kind Regards,
Martin P.

CODE:

@font-face {
font-family: ‘argh’;
src: url(‘fonts/argh-webfont.woff2’) format(‘woff2’),
url(‘fonts/argh-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘libre’;
src: url(‘fonts/libre-regular-webfont.woff2’) format(‘woff2’),
url(‘fonts/libre-regular-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;

}

/* General setup */

  • {
    box-sizing: border-box;
    }

body {
margin: 0 auto;
min-width: 1000px;
max-width: 1400px;
}

/* Layout */

section {
float: left;
width: 50%;
}

aside {
float: left;
width: 30%;
}

nav {
float: left;
width: 20%;
}

footer {
clear: both;
}

header, section, aside, nav, footer {
padding: 20px;
}

/* header and footer */

header, footer {
border-top: 5px solid #a66;
border-bottom: 5px solid #a66;
}

/* WRITE YOUR CODE BELOW HERE /
/
general text styling */
body {
font-family: libre;
font-size: 10px;
}

h1, h2 {
font-family: argh;
letter-spacing: 3px;
}

h1 {
font-size: 4em;
text-align: center;
}

h2 {
font-size: 3em;
}

p, ul, ol {
font-size: 2.2em;
line-height: 1.5;
letter-spacing: 1px;
word-spacing: 3px;
}

/* this is weird, spec says not to use ::first-line at all /
/
also ::first-line actually doesn’t do anything, but “p” by itself does /
/
update: :first-child also disables the whole thing :slight_smile: */
section > h2 + p {
text-indent: 20px;
/color: red;/
}

/* link styling */
a {
outline: none;
}

a[href*=“http”] {
background: url(external-link-52.png) no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 18px;
}

a:link, a:visited {
color: #a66;
}

a:focus, a:hover {
/background: #a66;/
/color: white;/
text-decoration: none;
}

a:active {
background: #a66;
color: white;
}

/* list styling /
li {
/
this doesn’t change anything at all */
line-height: 1.5;
}

ul {
list-style-type: circle;
}

/* navigation menu */
nav li {
/background: red;/
list-style-type: none;

}

nav li a {
/background: red;/
outline: none;
text-decoration: none;
display: inline-block;
width: 100%;
line-height: 3;
text-align: center;
/color: #a66;/
border: 2px solid #a66;
/margin-top: 1.5em;/
margin-bottom: 1.5em;
}

nav li a:focus, nav li a:hover {
background: #a66;
color: white;
}

nav li a:active {
background: #d66;
color: white;
}


(Chris Mills) #32

Hi @martinp, thanks for submitting your version of the assessment. Let’s have a look…

OK, a few bits to comment, but overall this looks pretty good. Nice effort!

  • In the following rule, where you set the base font family and size for the entire document, you are better off setting this on the <html> element instead, so it will definitely apply to everything. If you set it on the body, you sometimes get unexpected behaviour.
body {
font-family: libre;
font-size: 10px;
}
  • Your code isn’t generally indented very much — it is a good idea to indent the declarations by two spaces, so they are easier to read.

  • Re: Your comments about ::first-line and :first-child. Yeah, you didn’t need these, and how they work is possibly a little unexpected. the former only really works when attached to a selector that selects a block level element with multiple lines of text in it, e.g. p::first-line to select the first line of all paragraphs. The latter selects the element it is attached to, if it is the first child of another element, so e.g. if you have three paragraphs inside your body, p:first-child would select the first one of those. If you have a div followed by two paragraphs, nothing would be selected, as there is no paragraph that is the first child of something.

  • Re: " this doesn’t change anything at all " in reference to setting line-height: 1.5 on your list items. Correct. This is because you already set line-height: 1.5 on your ul/ols earlier in the code, and the lis inherit it from them.

That’s the only major-ish stuff. If you want to explore our code and marking guide in more detail, see the links earlier in the thread.

With reference to spam, I am not sure what you mean; you replied by e-mail to posts on this thread, and it got marked as spam? Sorry to hear you had trouble there; I didn’t see any spam. I always go to the page and reply, and don’t seem to have any troubles. There isn’t a dedicated IRC channel for learning area help, although I think there probably should be. I might look at setting it up.

For now, the best IRC channel is probably #mdn. I’m in there as chrisdavidmills, and you are welcome to ping me and ask for help if I’m around.