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;
}
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;
}
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.
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?
Hi @mbrasseau! Yes, you are right, there are three columns, and this is a typo 
I’ve fixed this now; thanks for reporting it.
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/
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;
}
@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.
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 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!
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.
@chrisdavidmills For example, when I want to click on the source code in active learning, I don’t go to github.
Hrm, sounds like this should work. What pages exactly are you having a problem on? What sections, etc.?
Here is my answer, can anybody help me to check it?
/* 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: "acmeregular";
src: url("Acme-Regular-webfont.eot");
src: url("Acme-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("Acme-Regular-webfont.woff2") format("woff2"),
url("./fonts/Acme-Regular-webfont.woff") format("woff"),
url("Acme-Regular-webfont.ttf") format("truetype"),
url("Acme-Regular-webfont.svg#acmeregular") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "aliceregular";
src: url("Alice-Regular-webfont.eot");
src: url("Alice-Regular-webfont.eot?#iefix") format("embedded-opentype"),
url("Alice-Regular-webfont.woff2") format("woff2"),
url("./fonts/Alice-Regular-webfont.woff") format("woff"),
url("Alice-Regular-webfont.ttf") format("truetype"),
url("Alice-Regular-webfont.svg#aliceregular") format("svg");
font-weight: normal;
font-style: normal;
}
body {
font-size: 10px;
line-height: 1.5;
font-family: acmeregular;
letter-spacing: 1px;
word-spacing: 3px;
}
header,
footer {
text-align: center;
}
p,
li {
font-size: 2em;
}
h2 {
font-size: 3em;
}
nav {
font-size: 1.4em;
}
h1 {
font-size: 4em;
font-family: aliceregular;
letter-spacing: 8px;
}
section > p {
text-indent: 20px;
}
a:link {
color: #a66;
}
a:visited {
color: #a66;
}
a:focus {
outline: 0;
color: #a66;
text-decoration: none;
}
a:hover {
color: #a66;
text-decoration: none;
}
a:active {
background: #265301;
color: #cdfeaa;
}
a[href^="https"] {
padding-right: 19px;
background: url("./external-link-52.png") no-repeat 100% 0;
background-size: 16px 16px;
}
li,
p {
margin: 5px 0;
}
li {
list-style-type: square;
}
nav li a {
text-decoration: none;
}
nav li {
border: 2px solid #a66;
width: 100%;
height: 100%;
list-style-type: none;
text-align: center;
vertical-align: middle;
padding: 20px;
margin: 20px 0;
}
Hi @Fgui_Zhang and welcome to the community 
Could you please put your code in an online editor and start a new topic as described at the bottom of the task page:
Assessment or further help
If you would like your work assessed or are stuck and want to ask for help:
- Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
- Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
- A descriptive title such as “Assessment wanted for Typesetting a community school homepage”.
- Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
- A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it’s very hard to help someone with a coding problem if you can’t see their code.
- A link to the actual task or assessment page, so we can find the question you want help with.
It makes it much easier for us to assess your work 
Thank you very much and have a nice day!
Michael