5
\$\begingroup\$

What I have is a simple weblog consisting of HTML and CSS. I'd like you to pinpoint mistakes (smelly code and so on) and how to improve my code. Opinionated responses are welcomed, given that you can provide solid arguments backing them. I have validated both HTML and CSS, so there are no syntactic mistakes.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section, article, aside, footer, header, nav, main {
  display: block;
}

html {
  font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
  line-height: 1.6;
  max-width: 50em;
  margin: 0 auto;
}

article {
  padding: 4.5rem 0;
}

@media only screen and (max-width: 50em) {
  article {
    padding: 4.5rem;
  }
}

p {
  padding: 1.5rem 0;
}

nav {
  margin: 1rem 0;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  line-height: 4.5rem;
}

nav li {
  display: inline;
  margin-right: 1rem;

}

footer {
  text-align: center;
}

.masthead {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 3rem;
}

.article-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #bbb;
} 


.post-date {
  font-size: 1.22rem;
}

a:link {
  color: #5995DA;
  text-decoration: none;
}

a:visited {
  color: #407FC7;
}

a:hover,
a:visited:hover {
  color: #76AEED;
  border-bottom: 1px solid #76AEED;
}

a:active,
a:visited:active {
  color: #5995DA;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Weblog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Sample weblog for learning html5">
  <link rel="stylesheet" href="weblog.css">
</head>
<body>
  <header class="masthead">
  	<h1>My Weblog</h1>
  	<p>Minimalism at its best. Only cool stuff</p>
  	<nav>
  	  <ul>
  	  	<li><a href="#">home</a></li>
  	  	<li><a href="#">blog</a></li>
  	  	<li><a href="#">gallery</a></li>
  	  	<li><a href="#">about</a></li>
  	  </ul>
  	</nav>
  </header>

  <main>
  	<article>
      <header class="article-header">
        <h2>Travel day</h2>
        <time datetime="2009-10-22" class="post-date">October 22, 2009</time>
  	  </header>
  	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non pellentesque est leo a quam.</p>
  	</article>

  	<article>
  	  <header class="article-header">
  	  	<h2>Mars, mars, mars...</h2>
  	  	<time datetime="2009-10-17" class="post-date">October 17, 2009</time>
  	  </header>
  	  <p>Sed ante mi, sagittis sed euismod sit amet, convallis et nibh. Etiam sit amet odio dui, id semper turpis. Mauris risus mauris, imperdiet pulvinar vehicula et, hendrerit vitae dui. Phasellus ultrices lacus rhoncus purus posuere rutrum. Maecenas mattis eleifend scelerisque. Nulla quam sem, facilisis ac ultrices et, tincidunt eu dolor. Mauris arcu est, porttitor eu blandit nec, pulvinar sed enim. Praesent diam felis, cursus at facilisis eu, mollis ut elit. Praesent rutrum porta euismod. Nulla facilisi. Suspendisse potenti. In auctor ultricies eleifend. Proin erat dolor, malesuada non tempus nec, tincidunt in mi.</p>
  	</article>
  </main>
  <footer>
  	<p>&copy; 2017 Marcus Aurelius Antoninus Augustus</p>
  </footer>
</body>
</html>

\$\endgroup\$
2
\$\begingroup\$

I would like to point your code is fine, and what is below may not apply to your case, see more like guide line for long run rather than a code review.

Simplify css selectors

  1. Avoid use of tags names, make classes your default and use ids when it makes sense. This will make your css less dependent on html structure, and more reusable.

  2. Don't use selector combinators. They can be confusing and may not be efficent.

  3. Make hierarchy of classes, it helps to organize your css file and show dependcies between classes. Example .parent parent-child .parent-child-superchild. Don't abuse this, three levels may be enough.

Down side of this is more classes on your html, it may not be very pretty.

\$\endgroup\$
0
\$\begingroup\$

Your HTML is great. Good document outline, no superfluous elements, no element misuse.

The only improvements I can think of:

  • Use the home link type for the link to the homepage:

    <li><a href="/" rel="home">home</a></li>
    
  • Use the small element for the copyright line, and the time element for the year:

    <p><small>&copy; <time>2017</time> Marcus Aurelius Antoninus Augustus</small></p>
    
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.