Typesetting a community school homepage task

Hi!!! Done another task from MDN, now it is Typesetting a community school homepage

Here it is:
Github
Styles

Want to see your criticism! Thank you! :owl:

Hi @QuebecNova

Your repo link gives a 404. Is it set to “private”?
Could you also activate “Github Pages” and post the link to it like you did for the “planet exercise”?
For this exercise it’s important to see the end product to give good feedback. :wink:

Cheers,
Michael

1 Like

Fixed 404.
Added files to GP.
Github Pages

Thank you! :bird:

1 Like

I see the repo now, but your GP link shows the RWD exercise.
You can activate GP for an individual repo. I seems that you use your account GP for one exercise at the time.
https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site

1 Like

Sorry for waste your time, i confused. I have a lot of finished tasks, here i mixed up two of them…
All fixed. Now you can check. Thank you!! :octopus:

1 Like

No need to be sorry. :slightly_smiling_face: Now I see your page.
I need to go to work now, but will look at your code later.

1 Like

As promised I’m back with some comments :grin:

Amazing work on this exercise! :medal_sports:
I like the link and nav states and everything looks well balanced.
It seems you just misunderstood this task:

Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px.

It’s not about the top padding but about left indention:
2022-05-17 11_46_51-example2.png (PNG-Grafik, 1533 Ă— 1106 Pixel)
Do you know which CSS property could be used to achieve this?

Have a nice day,
Michael

2 Likes

Do you know which CSS property could be used to achieve this?

I will write this, right?

section h2 + p::first-letter {
    padding-left: 20px;
}

I updated it on Github Pages, seems to work properly.

Thank you again!

Yes, this works.
There’s even an simpler solution by using text-indent which was specifically designed for this case. It automatically indents just the first line of text.

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