1
\$\begingroup\$

I'm going through the Udacity Intro to HTML and CSS course at the moment, and one of the exercises is to convert this mockup to HTML and CSS.

I did the following, and it looks ok-ish:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Jane Doette / Front-end Ninja</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="page-content">
    <header class="main-header row">
      <img src="http://placehold.it/113x113">
      <div class="main-title col-6">
        <h1>Jane Doette</h1>
        <h2>Front-end Ninja</h2>
      </div>
    </header>
    <div class="hero-image">
      <img src="http://placehold.it/960x641">
    </div>
    <section class="featured-work">
      <h2>Featured Work</h2>
      <div class="row">
        <div>
          <div class="work-screenshot"><img class="left" src="http://placehold.it/300x200"></div>
          <h3>Appify</h3>
          <p><a href="https://github.com/udacity/Appify/">https://github.com/udacity/Appify/</a></p>
        </div>
        <div>
          <div class="work-screenshot"><img class="center" src="http://placehold.it/300x200"></div>
          <h3>Sunflower</h3>
          <p><a href="https://github.com/udacity/Sunflower/">https://github.com/udacity/Sunflower/</a></p>
        </div>
        <div>
          <div class="work-screenshot"><img class="right" src="http://placehold.it/300x200"></div>
          <h3>Bokeh</h3>
          <p><a href="https://github.com/udacity/Bokeh/">https://github.com/udacity/Bokeh/</a></p>
        </div>
      </div>
    </section>
  </div>
</body>
</html>

CSS:

@import url(http://fonts.googleapis.com/css?family=Lato:100,300);

/* Sample framework supplied with the course */

* {
  /*border: 1px solid red !important;*/
  font-family: Lato, sans-serif;
  color: #1f1f1f;
}

* {
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  margin-bottom: 20px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.col-1 {
  width: 8.33%;
}

.col-2 {
  width: 16.66%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.33%;
}

.col-5 {
  width: 41.66%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.33%;
}

.col-8 {
  width: 66.66%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.33%;
}

.col-11 {
  width: 91.66%;
}

.col-12 {
  width: 100%;
}

/* End of the sample framework */

div.page-content {
  width: 960px;
  margin: auto;
}

div.main-title {
  margin-left: auto;
  text-align: right;
  text-transform: uppercase;
}

div.main-title h1 {
  font-size: 58px;
  font-weight: 100;
  margin-bottom: 0;
}

div.main-title h2 {
  font-size: 18px;
  font-weight: 300;
  margin-top: 0;
}

header.main-header {
  align-items: center;
  border-bottom: 5px solid silver;
  margin-bottom: 30px;
}

div.hero-image {
  max-height: 400px;
  overflow: hidden;
}

div.hero-image img {
  width: 100%;
}

section.featured-work .row {
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}

div.work-screenshot {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.featured-work div {
  text-align: center;
}

.featured-work p {
  margin-top: 0;
}

.featured-work p a {
  color: #bebebe;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

div.work-screenshot img {
  max-width: 300px;
}

h2 {
  font-size: 38px;
  font-weight: 300;
  color: #9e9e9e;
  margin: 30px 5px 10px 5px;
}

h3 {
  font-size: 36px;
  text-transform: uppercase;
  margin: 10px 0;
  color: #6e6e6e;
}
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

Unnecessary prefixes

Don't add prefixes unless you actually need them. When in doubt, you can check can i use. Otherwise, there are various autoprefixers you can use that will do it for you.

* {
  -ms-box-sizing: border-box; /* no browser supports this */
  box-sizing: border-box;
}

Subheadings marked up using hn elements

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

Source: http://www.w3.org/TR/html5/common-idioms.html#sub-head

    <h1>Jane Doette</h1>
    <h2>Front-end Ninja</h2>

The W3C recommends either of these markup options for the subheading idiom:

   <header>
   <h1>HTML 5.1 Nightly</h1>
   <p>A vocabulary and associated APIs for HTML and XHTML</p>
   <p>Editor's Draft 9 May 2013</p>
   </header>

Or

   <h1>Ramones <br>
   <span>Hey! Ho! Let's Go</span> 
   </h1>

Poor contrast

The link color is extremely washed out and is barely legible on one of my displays. Links, by their very nature, must stand out. Blue is the recommended color for usability reasons, but if you need to change it, you need a good reason for it (and making it less visible than the surrounding content is not a good reason).

I get that this is probably a requirement for the exercise, but it is something you need to be aware of. If a designer gives this to you, you need to push back and tell them that this is not acceptable (get support from your UX department if you have one).

Semantic class names

For the most part, you did a really good job of using semantic class names (eg. <section class="featured-work">), which is why it kills me to see so many unsemantic class names thrown into the mix (eg <img class="right" />, <div class="row">, .col-1, etc.).

Semantic markup

You've got the right idea with your markup, but there's a lot of room for improvement here. For instance, your screenshots use a lot more markup than they really need and it isn't very semantic. You can slim this down by using lists and taking advantage of descendant selectors.

  <div class="row">
    <div>
      <div class="work-screenshot"><img class="left" src="http://placehold.it/300x200"></div>
      <h3>Appify</h3>
      <p><a href="https://github.com/udacity/Appify/">https://github.com/udacity/Appify/</a></p>
    </div>
    <div>
      <div class="work-screenshot"><img class="center" src="http://placehold.it/300x200"></div>
      <h3>Sunflower</h3>
      <p><a href="https://github.com/udacity/Sunflower/">https://github.com/udacity/Sunflower/</a></p>
    </div>
    <div>
      <div class="work-screenshot"><img class="right" src="http://placehold.it/300x200"></div>
      <h3>Bokeh</h3>
      <p><a href="https://github.com/udacity/Bokeh/">https://github.com/udacity/Bokeh/</a></p>
    </div>
  </div>

Can be rewritten like this:

http://codepen.io/cimmanon/pen/ZGGMNM

Markup

<ul class="projects">
  <li>
    <a href="https://github.com/udacity/Bokeh/">
      <img class="center" src="http://placehold.it/300x200">
      Appify
    </a>
  </li>
  <li>
    <a href="https://github.com/udacity/Bokeh/">
      <img class="center" src="http://placehold.it/300x200">
      Appify
    </a>
  </li>
  <li>
    <a href="https://github.com/udacity/Bokeh/">
      <img class="center" src="http://placehold.it/300x200">
      Appify
    </a>
  </li>
</ul>

CSS

ul.projects {
  display: table;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.3em;
}

ul.projects li {
  display: table-cell;
  width: 33%;
  text-align: center;
}

ul.projects img {
  display: block;
  margin: 0 auto .5em;
}

ul.projects a:after {
  display: block;
  content: attr(href);
  font-size: .769em;
  margin-top: .5em;
}

Depending on the content, though, it might be better to use background images instead of the image element (search for css image replacement to learn more).

Use Flexbox responsibly

Unless the effect you're trying to achieve is difficult or impossible to do without Flexbox, don't use Flexbox. In this case, you can do the same thing with the table/table-cell display properties (as illustrated above) and it usually requires less CSS to do so.

\$\endgroup\$
1
  • \$\begingroup\$ Thanks a lot! I used github.com/postcss/autoprefixer for prefixing. What do you normally use? And as you already mentioned, a lot of the things were what was recommended in the course or straight out of the mockup, but your comments are a huge help to me. I have also used flexbox because it was what the course used, and I also saw the table display. I will definitely look further into it! By the way, do you use float layouts too? Or have you replaced them with table layouts? \$\endgroup\$
    – hattenn
    Commented May 2, 2015 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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