"Typesetting a community school home page" assessment

MDN Learn
#41

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

#42

@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.

1 Like
#43

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!

#44

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

#45

@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!

#47

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

#48

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.

#49

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

#50

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

#51

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

#52

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

#53

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

#54

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

Hi @Fgui_Zhang and welcome to the community :wave:

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:

  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
  2. 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 :blush:

Thank you very much and have a nice day!

Michael

1 Like