Theory
Theory

Let’s start the diary

In the previous chapter, we designed our Website of a beginner coder, and at the same time we studied how to mark up important structural blocks, and we touched on how to lay out text.

In this chapter, we will work with the contents of our website, and along the way we will explore how else you can mark up various text elements.

And let’s pick up from where we left off last time. In particular, let’s resume work on the internal page of our blog, that is, from the post about the first day coding.

Let’s turn off the “design styles” and, instead, we will invoke simplified style files that we will use to design all of the pages for the time being. In the following chapters, we will explore how to style pages in more detail and refine these basic styles.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day One. How I forgot to feed the cat.</h1> <p>Who would have thought that semantics was so important? I had an urgent need to talk about it.</p> <p>The cat caught my attention. The cat insistently meowed at me. And then I realized – it’s time for me to write the first blog entry. And to feed the cat.</p> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; }

Goalscompleted

Disable the outlines.css style file by deleting the tag <link> from the page,
and then connect the style.css style file.

Let’s start the diary

Log in

Sign up

Restore access