Michelle - Assignment 2 Newsweek

Altcademy Team wrote on 7 February 2018

The project being reviewed is hosted on http://michelle-newsweek.bitballoon.com/

Please write your review in the comment section below.

Hi Michelle, good job on the project.

The good:

The overall structure is almost the same as the actual site. I think the big shots section was especially well done.

The can be improved:

One of your small news cards has a typo, resulting in faulty render

// Should be 'col-md-3'
<div class="ol-md-3 news-block top-row">
  <a href="#">
    <img src="http://d33wubrfki0l68.cloudfront.net/50b98361fc086bd90bf069a0cdd05cf88f5c3f2d/007aa/images/main/bug.png" class="img-responsive">
  </a>
  <a href="#">
    <h4 class="text-center text-uppercase"><b>Tech &amp; Science</b></h4>
  </a>
  <a href="#">
    <h2 class="text-center article-title"><b>Dust DNA Reveals all the Bugs in American Homes</b></h2>
  </a>
  <p class="text-center">Researchers detected DNA from more than 600 different types of arthropods (insects and spiders) as well as material from lobsters.</p>
</div>

You nested container-fluid inside another container-fluid inside another container-fluid at line 166

<div class="container-fluid main-content">
  <div class="row">
    <div class="ol-md-3 news-block top-row">

You shouldn't nest container/container-fluid inside containers. https://getbootstrap.com/css/#overview-container

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

You can separate your CSS in a different file and name it 'custom.css' instead of adding it to the bottom of bootstrap.css. You simply need to link it in your html. Break your css files into more focused ones if possible.

<head>
  // Other settings
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/navbar.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/sidebar.css" rel="stylesheet">
</head>

This assignment really helped me learn how to use Bootstrap to make blocks of content. The Newsweek website is definitely too long to finish, but I did as much as it took to help me get a good understanding of Bootstrap.