"Typesetting a community school home page" assessment

filip.sky · January 22, 2018, 10:10pm

thanks very much

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

again thanks

oluphetty · January 23, 2018, 12:26am

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

chrisdavidmills · January 23, 2018, 12:26am

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.

2alin · February 25, 2018, 9:09am

Hi,
this is my first post so, before anything, thank you @chrisdavidmills 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.

chrisdavidmills · February 20, 2018, 8:42am

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%;
}

2alin · February 25, 2018, 9:09am

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.

chrisdavidmills · February 21, 2018, 8:30am

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

Tom-Vanderboom · October 21, 2018, 8:37am

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;
}

chrisdavidmills · October 22, 2018, 11:33am

@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 · October 22, 2018, 3:19pm

Thank you for your replying!

martinp · November 22, 2018, 5:45am

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 */
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;
}

chrisdavidmills · November 22, 2018, 11:09am

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.

amaryllis · July 15, 2019, 8:23am

Hi!
I also tried to challenge.
It is published on GitHub Pages.
Please rate it.
thanks.

ms.zhangzb · July 16, 2019, 12:54am

hi friends,good job.

Amaryllis via Mozilla Discourse discourse@mozilla-community.org 于2019年7月15日周一下午9:11写道：

chrisdavidmills · July 17, 2019, 10:22am

Hi @amaryllis,

This one also looks good. the only thing I will say is that the. font sizes in general look a bit small compared to our original (https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/)

In the typography section, our rules look like so:

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

h2 {
  font-size: 3.2rem;
}

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

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.5px;
  word-spacing: 3px;
}

UnorthodoxThing · September 10, 2019, 2:22am

Hi all, I think I just completed my CSS assessment. Feedbacks are welcome! One thing I might have trouble with is with adding the external link icon. I found out there may be three possible ways to do. 1, by inserting via content property and use the pseudo selector ::after. 2, by using background: url(...) and giving padding space for that. I can’t recall the third one correctly but maybe it had to do with list styling (nonetheless it wasn’t recommended to remember).

/* ===== Fonts Styles =====*/

/* For heading font-styles */
@font-face {
font-family: ‘chunkfive_exregular’;
src: url(‘fonts/chunkfive_ex.woff2’) format(‘woff2’),
url(‘fonts/chunkfive_ex.woff’) format(‘woff’),
url(‘fonts/chunkfive_ex.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

/* For body font-styles */
@font-face {
font-family: ‘agathoregular’;
src: url(‘agatho_regular.woff2’) format(‘woff2’),
url(‘agatho_regular.woff’) format(‘woff’),
url(‘agatho_regular.oft’) format(‘opentype’);
font-weight: normal;
font-style: normal;

}

html {
font-size: 62.5%; /* = 10px*/
}

body {
line-height: 1.5rem;
letter-spacing: 0.1rem;
word-spacing: 0.3rem;
}

header {
text-align: center;
}

h1 {
font-family: ‘chunkfive_exregular’, ‘Times New Roman’, serif;
font-size: 2rem;
letter-spacing: 0.8rem;
}

h2 {
font-family: ‘chunkfive_exregular’, ‘Times New Roman’, serif;
font-size: 1.8rem;
letter-spacing: 0.2rem;
}

p {
font-family: ‘agathoregular’, sans-serif, monospace;
}

h2 + p {
text-indent: 2rem;
}

/* ===== Links Styles ===== */

a {
text-decoration: none;
outline: none;
}

aside a:link,
section a:link,
section a:link {
color: green;
border-bottom: solid 1px green;
}

aside a:visited,
section a:visited,
section a:visited {
color: darkred;
border-bottom: solid 1px darkred;
}

aside a:focus,
section a:focus,
section a:focus {
outline: blue solid 1px;
border-bottom: none;
}

aside a:hover,
section a:hover,
section a:hover {
color: orange;
border-bottom: none;
}

aside a:active,
section a:active,
section a:active {
color: orange;
border-bottom-color: solid 1px orange;
}

a[href^=“https://”] {
/* content: url(‘external-link.png’); */
background: url(‘external-link.png’) 100% 0 no-repeat;
padding-right: 18px;
background-size: 10px;
}

/* ===== List Styles ===== */

ul li {
line-height: 2rem;
}

aside ul li {
list-style-type: square;
}

/* nav styles */

nav ul li a {
font-size: 1.5rem;
letter-spacing: 0.1rem;
color: darkred;
border: 1px solid darkred;
border-left: 3px solid darkred;
display: block;
margin: 2rem auto;
padding: 2rem 3rem;

}

nav ul li a:active {
color: orange;
border-color: orange;
border-left: 3px solid orange;
}

nav ul li {
text-align: center;
list-style: none;
}

chrisdavidmills · September 10, 2019, 10:56am

Hi there @UnorthodoxThing!

I’ve had a look, and I think there might be a bit of your CSS missing? When I try to CSS you have given me, it looks to be generally going in the right direction, but a bunch of stuff is missing, most notably the layout styles, for example that float the columns left and right.

You can see our example, code and marking guide here:

As for the question about how to insert the external icon, I’d say using a:link { background: url(); } or a:link::after { content: url(); } are both equally OK.

mbrasseau · September 24, 2019, 8:15pm

I am working on this assessment, and noticed the instructions described it as a 2-column layout. But there are definitely 3 columns.

Is this a typo? or is one of the columns not typically “regarded” as a bonafide column?

chrisdavidmills · September 25, 2019, 8:14am

Hi @mbrasseau! Yes, you are right, there are three columns, and this is a typo

I’ve fixed this now; thanks for reporting it.

Pawper · December 15, 2019, 1:00pm

Hello again @chrisdavidmills, I have another one here for you, if you could please mark it. Thank you!

Live example: https://typesetting-a-homepage.hashbase.io/

github.com

Pawper/Typesetting-a-community-school-homepage---MDN/blob/5e6e1a0d3873f2d6b30bcb3c4a62bcbf42dcb392/style.css#L45-L162


/* WRITE YOUR CODE BELOW HERE */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on December 15, 2019 */
@font-face {
  font-family: 'bree_serifregular';
  src: url('fonts/breeserif-regular-webfont.woff2') format('woff2'),
       url('fonts/breeserif-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'alfa_slab_oneregular';
  src: url('fonts/alfaslabone-regular-webfont.woff2') format('woff2'),
       url('fonts/alfaslabone-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


html {
  font-size: 10px;

This file has been truncated. show original