"Typesetting a community school home page" assessment

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

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

andreeapetrescu16 · December 15, 2019, 3:29pm

Hi, Mr, Chris! I’ve just finished my Typesetting exercise! Could you please give me feedback on the work?
Here the CSS code

@font-face {
font-family: ‘enigmaticregular’;
src: url(‘EnigmaB_2-webfont.eot’);
src: url(‘EnigmaB_2-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘EnigmaB_2-webfont.woff2’) format(‘woff2’),
url(‘EnigmaB_2-webfont.woff’) format(‘woff’),
url(‘EnigmaB_2-webfont.ttf’) format(‘truetype’),
url(‘EnigmaB_2-webfont.svg#enigmaticregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
@font-face {
font-family: ‘20_dbregular’;
src: url(‘20db-webfont.eot’);
src: url(‘20db-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘20db-webfont.woff2’) format(‘woff2’),
url(‘20db-webfont.woff’) format(‘woff’),
url(‘20db-webfont.ttf’) format(‘truetype’),
url(‘20db-webfont.svg#20_dbregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘open_sansbold’;
src: url(‘OpenSans-Bold-webfont.eot’);
src: url(‘OpenSans-Bold-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘OpenSans-Bold-webfont.woff2’) format(‘woff2’),
url(‘OpenSans-Bold-webfont.woff’) format(‘woff’),
url(‘OpenSans-Bold-webfont.ttf’) format(‘truetype’),
url(‘OpenSans-Bold-webfont.svg#open_sansbold’) format(‘svg’);
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 */
/Fonts and general styling/
html{
font-size:10px;
}
h1{
font-family: ‘enigmaticregular’,;
font-size:50;
text-align: center;
}
body{
font-family: ‘open_sansbold’, sans-serif;
font-size:20px;
word-spacing: 0.3rem;
letter-spacing:0.2rem;
line-height: 1.5;
}
h2{
font-family: ‘20_dbregular’,bold;
letter-spacing:0.2rem;
font-size:35px;
}
section >p{
text-indent:20px;
}

/Links/
a{
outline:none;
text-decoration:none;
padding: 4px 2px 0;
}
a:link{
color:blue;
}
a:visited{
color:blueviolet
}
a:focus{
border-bottom: 1px solid;
background:pink
}
a:hover{
border-bottom:1px solid;
background:lightsalmon;
}
a:active{
background:burlywood;
color:brown;
}
a[href*= “http”]{
background: url(‘external-link-52.png’);
background-size: 16px 16px;
padding-left:19px;
background-repeat: no-repeat;
background-position:0 2px;
}

/List styling/
ul#course{
line-height: 1.5;
list-style-type:square;
list-style-position:inside;
}
aside{
font-family: serif;
}
ul#lessons{
line-height: 1.5;
list-style-type: circle;
list-style-position:inside;
font-family: serif;
}
ol li{
list-style-type: lower-alpha;
}

/Navigation menu styling/
nav{
padding-left:0;
}
nav a{
text-decoration:none;
}
nav #NavMenu a:hover,nav #NavMenu a:focus {
text-decoration: none;
background-color:rgb(163, 60, 60);
color: white;
}
nav ul li a{
display: inline-block;
line-height:5em;
width: 100%;
border: 2px solid lightcoral;
background: lightgrey;
border-radius: 3px;
text-align: center;
margin-top: 1em;
}
nav ul li{
list-style-type: none;
}

/Footer/
footer p{
font-size: 15px;
}

chrisdavidmills · December 16, 2019, 9:12am

@Pawper Hey there!

I’ve taken a look, and this looks really nice — well done! You’ve chosen some different styles to my originals, and I think they hang together well.

chrisdavidmills · December 16, 2019, 9:15am

Hi there @andreeapetrescu16, and thanks for sending your code in!

It is quite difficult to mark in this format, so could you put it inside an online code plaground like codepen, or glitch, and send me the URL? Thanks!

andreeapetrescu16 · January 2, 2020, 5:52pm

Oh, sorry!
Here the URL https://codepen.io/Andreea96/pen/BaymoKL

chrisdavidmills · January 3, 2020, 12:26pm

@andreeapetrescu16 no worries! Thanks for sending the code in.

So this looks pretty good. Because it is in a codepen, there are some things missing from the design (the fonts are not applied, and neither is the external link icon), but the code is looking fine. Well done on a great job!

krasnovdanial · January 24, 2020, 3:24pm

https://krasnovdanial.github.io/School-Page/
Hi, my dear teacher @chrisdavidmills, look it please).

chrisdavidmills · February 3, 2020, 6:38pm

Hi @krasnovdanial, hope you are well!

I have had a look at your page, and can’t see anything obviously wrong with it. Well done on some great work.

krasnovdanial · February 19, 2020, 1:15pm

Thank you. @chrisdavidmills why do some links on the MDN resources don’t work when clicked it.

chrisdavidmills · February 19, 2020, 1:31pm

@krasnovdanial Can you give me some examples of ones that don’t work?

krasnovdanial · February 19, 2020, 2:10pm

@chrisdavidmills For example, when I want to click on the source code in active learning, I don’t go to github.

chrisdavidmills · February 19, 2020, 4:51pm

Hrm, sounds like this should work. What pages exactly are you having a problem on? What sections, etc.?

1298527319 · March 9, 2021, 12:35pm

https://jsbin.com/miforec/edit?html,css,output