Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics CSS Layout Project Adding Media Queries for Large Screens

Derrick French
Derrick French
3,370 Points

Please can someone critique my code, finished project trying to improve

Just looking for how I can improve.

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.main-nav {
  margin-top: 5px;
}
.name {
    font-size: 1.25em;
  margin:0;
}

.name a,
.main-nav a {
    text-align: center;
  display:block;
  padding: 10px 15px;

}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

/* ---- Layout Containers ---- */
.main-header {
  padding-top: .5em;
  padding-bottom: .5em;
}

.banner {
    color: #fff;
    background: #3acec2;
  text-align:center;
  padding-top: 50px;
  margin-bottom:75px;
  padding-bottom: 25px;
}

.col {
  padding-right: 1em;
  padding-left: 1em;
}
.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
  text-align: center;
}

/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

.headline {
  margin-bottom: 0;

}


/* ================================= 
  Media Queries
==================================== */

@media (min-width: 768px) {

.container {
  width: 90%;
  margin: 0 auto;
}

.name {
  float:left;
}

.main-nav {
  float: right;
}

.main-nav li {
  float:left
}

.tagline {
  font-size: 1.4em;
}

.feat-img {
        width: 450px;
    float: left;
    margin-right: 25px;
    margin-top: 5px;
    margin-bottom: 25px;
}

.secondary,
.primary {
  display:inline-block;
  margin-left: -4px;
  vertical-align: top;
}

.secondary {
  width: 40%;
}

.primary {
  width: 60%;
}


    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}

@media (min-width: 960px) {

.primary {
  width: 50%;
}

.secondary {
  width: 25%;
}

.tertiary{
  width: 25%;
}

.col {
  float:left;
}
.main-footer{
  clear: both;
}
}

1 Answer

Max Senden
Max Senden
23,177 Points

Hi Derrick,

There's some repetition in your code (as easily happens with CSS). You might want to look into SASS courses on this platform. With SASS you can write CSS much more efficiently by slicing it in chunks, using variables, and more.

The two other things I notice is that you mix pixels and ems throughout your code, and that the indentation is off. Best stick to only use one value (e.g. I only use 'rem' as value in my projects). Indentation is easily fixed by simply paying a little bit more attention to details.

Hope it helps, Max