Here is my typesetting project, how’d I do 
It is slightly hard to tell from this JSFiddle, as a lot of the paths, etc. aren’t correct for this context, so things aren’t working, etc.
The finished live example is here:
https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/
The finished source code is here:
The marking guide is here:
Have a look and see how your code matches up 
Hi!
I’ve been working on Typesetting a Community School Page for a few days now, and I’ve been struggling to get the navigation aligned along the top. I finally got it where I wanted it, but I feel like there may have been a better way. Here is that bit, could someone take a look?
/*Navigation Styles*/
nav {
float: right;
margin-top: -600px;
}
nav li {
list-style: none;
margin-bottom: 2em;
}
nav li a {
border: 1px solid #a66;
text-align: center;
text-decoration: none;
display: inline-block;
width: 100%;
font-size: 1.5em;
line-height: 2;
}Hi there,
Sorry for missing your question for so long! In the final assessment answer, we align the nav menu on the right hand side; you can check the code we used here:
You can also see the live final answer here:
https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/
For a good example of a top-aligned menu, see this one:
Hi, I have just finished “Typesetting a community school homepage project”. Please can you give me feedback on the work. I paste the CSS here. Many Thanks
/* General setup */
-
{
box-sizing: border-box;xbackground-color: pink;
}
body {
dbackground-color: orange;
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: ‘abhaya_libresemibold’;
src: url(‘fonts/abhayalibre-semibold-webfont.woff2’) format(‘woff2’),
url(‘fonts/abhayalibre-semibold-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘candalregular’;
src: url(‘fonts/candal-webfont.woff2’) format(‘woff2’),
url(‘fonts/candal-webfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
html {
font-size: 10px;
}
body {
font-family: ‘abhaya_libresemibold’, sans-serif;
xfont-family: sans-serif;
font-size: 1.5rem;
}
h1, h2 {
font-family: ‘candalregular’;
font-size: 2rem;
letter-spacing: 1px;
word-spacing: 2px;
}
p, ul,ol {
letter-spacing: 1px;
word-spacing: 2px;
line-height: 1.5;
}
section ul, aside ul {
list-style-type: disc;
}
section ol {
list-style-type: decimal;
}
nav ul {
list-style-type: none;
}
h1 {
text-align: center;
}
section h2 + p {
text-indent: 20px;
}
a {
outline: none;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:focus {
color: green;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: none;
}
a:active {
background: #265301;
color: #CDFEAA;
}
nav a {
outline: none;
text-decoration: none;
display: inline-block;
width: 80%;
margin-bottom: 7%;
text-align: center;
line-height: 5;
border: 1px solid purple;
xcolor black;
}
a[href*=“http”] {
background: url(‘https://mdn.mozillademos.org/files/12982/external-link-52.png’) no-repeat 100% 0;
background-size: 16px 16px;
padding-right: 19px;
}
Hi Rad,
Your CSS looks mostly fine, although it creates a different effect to the answer; see the live version here: https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/
Also have a look at the marking guide here and see if it matches up to what you’ve done: https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/marking-guide.md
You can also find the source code here to check against: https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/index.html
Hi guys! I’ve just finished my Typesetting exercise! Any body could look at it? I particularly have a doubt on “Remove the default focus outline from ALL the links on the page”. I could do it but I don’t understand very weel how that appears and if is it well done!
Thanks!
I am always happy to have a look. Do you have it available online anywhere?
You could also take a look at our finished example/marking guide:
- https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/
- https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/marking-guide.md
- https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-finished/style.css
Thanks again @chrisdavidmills! I’m learning how to use github and have a question that couldn’t find anywhere: could I inside the platform move multiple files from one folder to another, on the same repository?
I’m trying to upload the Typesetting ex and want to move all the fonts to the /fonts folder and doing it one by one seems odd giving the circumstances! hehe.
You should be able to just do this. If you want to commit these changes though, you might have to add the files where they are in the new location (e.g. git add path/to/added/file) and then remove the files from the old location (e.g. git rm path/to/added/file).
After you’ve moved the files, but not tried to add/commit them, you should be able to see what you’ll need to add and remove by doing git status
@chrisdavidmills Hi! Sorry for the delay but I was learning how to use git. hehe. Here is the page: https://maurodibert.github.io/typesetting/
Now that I was reading and trying all week long (I’ve just had 50 min a day for studying 
), I understand what you’re talking about! hehe. Thanks again @chrisdavidmills!
Cool Mauro, that looks pretty good. If you compare it to our finished example (https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-finished/), you’ll see that it is similar. You’ve chosen different fonts, but that’s fine.
1 Like
Can I get the marking guide for the screenshot image on this page: https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage .
Or simply the corrected html of the screenshot at the end of the page on the link above.
Please kindly send it to alfredgareth10@gmail.com
Hi Chrismills
thanks for old replies
could you give me feedback,please on this assesment for fundamental css
i just strugled how to do not intend last paragraph in section
here is my css code:
/* General setup */
@font-face {
font-family:“alegreya”;
src: url(“fonts/Alegreya-Regular.otf”);
font-family:“arcon”;
src: url(“fonts/Arcon-Regular.otf”);
}
- {
box-sizing: border-box;
}
body {
margin: 0 auto;
min-width: 1000px;
max-width: 1400px;
font-family: alegreya;
line-height: 1.5;
letter-spacing: 1.5px;
word-spacing: 2px;
}
h1, h2 {
font-family: arcon;
}
html {
font-size: 10px;
}
h1 {
font-size: 3.2rem;
text-align: center;
letter-spacing: 3px;
}
h2 {
font-size: 2.4rem;
}
/* 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 */
section p {
text-indent: 20px;
}
section:last-child p {
text-indent: 0px;
}
li a, a {
color: firebrick;
}
li {
line-height: 1.5;
list-style-type: circle;
}
a:link{}
a:visited {
}
a:focus {
color:blue;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color:chartreuse;
}
a[href*=“http”] {
background: url(‘img/external-link-52.png’) no-repeat 100% 0;
background-size: 10px 12px;
padding-right: 12px;
}
nav li {
text-decoration: none;
list-style-type: none;
display: block;
border: 1px solid firebrick;
box-sizing: border-box;
padding: 10px 10px;
margin-bottom: 3px;
text-align: center;
font-size: 2.4rem;
font-family: arcon;
}
nav a{
text-decoration: none;
}
nav a:hover {
color:white;
background-color: firebrick;
text-decoration: none;
}
Sorry - what assessment is this code from? Can you send me the URL of the assessment/exercise you are working on?
Thanks.
OK, thanks.
So, this mostly looks OK. It looked like you understood what to do well enough.
What bits do you think are not right?
thanks for answer here is my bit that is wrong
task from assessment:
Give the first paragraph after each heading in the a little bit of text-indentation, say 20px.
… and I stragling how to intend p element after each headings…I did indentation for all p element in section but indentation has also last p element before a list element that shoul not be indented, am I right?
Ah, OK - I can help you on this one.
You need to just an “adjacent sibling” selector — the plus (+) sign, like so:
h2 + p {
text-indent: 20px;
}
This selects only paragraphs that come directly after an h2 in the markup. In this example it is really simple, because there are only two paragraphs that come after headings, and the headings are both h2s. In a more complex site you’d have to be more flexible, and do something like
h2 + p, h3 + p, h4 + p {
text-indent: 20px;
}