HTML/CSS Skillpath

I am required to post the final results of the capstone project called Colmar Academy. This is for the Build a Website Skill Path.

I designed both a desktop and mobile version of the website for the project.

I did a series of nested div tags to organize the project entirely with flexbox to achieve the layout required for the project.

I used a library called Picture Fill that selects an image based on screen size based on your css media queries. That way you can have different images displayed for both desktop and mobile, without having to download both images and hiding them using the “display: none” property in css. This significantly reduces lag time in website performance.

I referenced this library in the header of the html file. It also utilizes something called a picture element. It looks like to display the images.

The actual source code for this library can be downloaded from Github.

Here is the code below:

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap" rel="stylesheet">
        <script>
          // Picture element HTML5 shiv
          document.createElement( "picture" );
        </script>
        <script src="picturefill.js" async></script>
    </head>
    <header>
        <div class="logo">
            <img src="resources/images/ic-logo.svg">
            <a>COLMAR ACADEMY</a>
        </div>
        <nav>
            <a>On campus</a>
            <img src="resources/images/ic-on-campus.svg">
            <a>Online</a>
            <img src="resources/images/ic-online.svg">
            <a>Sign In</a>
            <img src="resources/images/ic-login.svg">
        </nav>
    </header>
    <body>
      <div class="learn">
        <img src="resources/images/banner.jpg">
        <div class="info">
          <h1>Learn something new everyday</h1>
          <h3>Colmar Academy can help you learn anything!</h3>
          <a>Start here</a>
        </div>
      </div>
      <div class="practice">
        <div class="learning">
          <img src="resources/images/information-main.jpg">
          <h2>It doesn't hurt to keep practicing</h2>
          <h3>Colmar Academy features an extensive library, online resources, small class sizes and private tutors available to help you practice and learn.</h3>
          <h5>Emanuel, Sr Strategist at Hiring.com</h5>
        </div>
        <div class="sources">
          <div class="orientation">
            <div class="images" id="two">
              <picture>
                <source srcset="resources/images/information-orientation.jpg" media="(min-width: 1024px)">
                <source srcset="resources/images/information-orientation-mobile.jpg" media="(max-width: 500px)">  
                <img srcset="resources/images/information-orientation.jpg" alt="...">
              </picture>
            </div>
            <div class="words">
              <h3>Orientation date</h3>
              <h4>Tue 10/11 & Wed 10/12: 8am-3pm</h4>
              <a>Read more</a>
            </div>  
          </div>
          <div class="orientation">
            <div class="images">
              <picture>
                <source srcset="resources/images/information-campus.jpg" media="(min-width: 1024px)">
                <source srcset="resources/images/information-campus-mobile.jpg" media="(max-width: 500px)">  
                <img srcset="resources/images/information-campus.jpg" alt="...">
              </picture>
            </div>
            <div class="words">
              <h3>Our Campus</h3>
              <h4>Find which campus is closes to you</h4>
              <a>Read more</a>
            </div>
          </div>
          <div class="orientation" id="one">
            <div class="images">
              <picture>
                <source srcset="resources/images/information-guest-lecture.jpg" media="(min-width: 1024px)">
                <source srcset="resources/images/information-guest-lecture-mobile.jpg" media="(max-width: 500px)">  
                <img srcset="resources/images/information-guest-lecture.jpg" alt="...">
              </picture>
            </div>
            <div class="words">
              <h3>Our guest lecture</h3>
              <h4>Join a keynote with Oliver Sack about music in medical treatment</h4>
              <a>Read more</a>
            </div>
          </div>
        </div>
      </div>
      <div class="options">
        <h1>Start learning</h1>
        <div class="classes">
          <div class="course">
            <img src="resources/images/course-software.jpg">
            <h3>Software engineering</h3>
            <h4>COURSES</h4>
            <h4>Web Development, Mobile Development, iOT, APIs</h4>
          </div>
          <div class="course">
            <img src="resources/images/course-computer-art.jpg">
            <h3>Computer art</h3>
            <h4>COURSES</h4>
            <h4>Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</h4>
          </div>
          <div class="course">
            <img src="resources/images/course-design.jpg">
            <h3>Design</h3>
            <h4>COURSES</h4>
            <h4 class="description">User Experience Design, User Reasearch, Visual Design</h4>
          </div>
          <div class="course">
            <img src="resources/images/course-data.jpg">
            <h3>Data</h3>
            <h4>COURSES</h4>
            <h4 class="description">Data Science, Big Data, SQL, Data Visualization</h4>
          </div>
          <div class="course">
            <img src="resources/images/course-business.jpg">
            <h3>Business</h3>
            <h4>COURSES</h4>
            <h4 class="description">Product Development, Business Development, Startup</h4>
          </div>
          <div class="course">
            <img src="resources/images/course-marketing.jpg">
            <h3>Marketing</h3>
            <h4>COURSES</h4>
             <h4 class="description">Analytics, Content Marketing, Mobile Marketing</h4>
          </div>
        </div>
      </div>  
      <div class="thesis">
        <h1>Thesis Exhibit</h1>
      </div>  
      <div class="ideas">
        <div class="video">
          <video src="resources/videos/thesis.mp4" controls>
             Video not supported   
          </video>  
          <h3>Reimagine urban</h3>
          <h4>This video is a demonstration of a 3D model of a new apartment building design</h4>
        </div>
        <div class="opportunity">    
          <div class="places">
            <img src="resources/images/thesis-fisma.jpg">
            <div class="concepts">
              <h3>Fisma: Design and Prototype</h3>
              <h4>Designer showcase of new prototype product</h4>
            </div>  
          </div>
          <div class="places">
            <img src="resources/images/thesis-now-and-then.jpg">
            <div class="concepts">
              <h3>Now and then</h3>
              <h4>Research and study about New York</h4>
            </div>  
          </div>
        </div>  
      </div>
    </body>
    <footer>
      <h5>© 2016 Colmar Academy. All rights reserved</h5>
      <a class="foot">Terms</a>
      <a class="foot">Privacy</a>
    </footer>
</html>

style.css

@media only screen and (min-width: 1024px) {

html {
    background-color: white;
    color: rgb(68, 66, 66);
    font-family: 'Lora', serif;
    font-weight: 400;
    opacity: 0.9;
}

body {
    border: 1px solid gray;  
}

header {
    width: 100%;
    height: 64px;
    display: block;
}

header .logo {
    height: 32px;
    width: 300px;
    padding-left: 24px;
    position: relative;
    top: 16px;
}

.logo a {
    font-size: 19px;
    font-weight: 600;
    position: relative;
    bottom: 10px;
}

header nav {
    padding-right: 16px;
    float: right;
    position: relative;
    bottom: 16px;
    right: 24px;
}

nav a {
    position: relative;
    bottom: 10px;
}

.learn {
    background-color: lightgrey;
    display: flex;
    flex-direction: row;
}

.learn img {
    width: 60%;
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
}

.info {
    display: flex;
    flex-flow: column; 
    justify-content: center;
    align-items: center;
    margin: 24px;
    font-size: 30px;
}

.info a {
    color: white;
    background-color: grey;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 100px;
    padding-right: 100px;
    font-size: 20px;
}

.practice {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.learning {
    width: 60%;
}

.learning img {
    width: 91%;
    height: auto;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;
}

.learning h2 {
    padding-bottom: 24px; 
    font-weight: 600;
    font-size: 35px;
    padding-left: 24px;
}

.learning h3 {
    font-size: 20px;
    padding-left: 24px;
}

.learning h5 {
    padding-bottom: 32px;
    padding-left: 24px;

}

.sources {
    width: 40%;
    display: flex;
    flex-flow: column;
}

.orientation {
    display: flex;
    justify-content: flex-end;
}

.images {
    width: 40%;
}

.images img {
    height: auto;
    width: 86%;
    padding: 16px;
}

#one {
    background-color: lightgrey;
}

.words {
    width: 60%;
    display: flex;
    align-items: flex-start;
    flex-flow: column;
    padding-left: 24px;
}

.words h3 {
    font-size: 35px;
    margin-bottom: -15px;
}

.words h4 {
    font-size: 20px;
    padding-bottom: -10px;
}

.words a {
    color: blue;
}

.options {
    background-color: lightgrey;
}

.options h1 {
    padding-top: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 35px;
}

.classes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 16px;
}

.course {
    height: 400px;
    width: 400px;
    margin: 16px;
    background-color: white;
}

.course img {
    height: auto;
    width: 400px;
}

.course h3 {
    font-weight: 600;
    font-size: 25px;
    padding-top: 16px;
    padding-left: 16px;
}

.course h4 {
    padding-left: 16px;
}

h4 .description {
    padding-bottom: 24px;
    padding-left: 16px;
}

.thesis {
    width: 100%;
}

.thesis h1 {
    text-align: center;
    padding-top: 32px;
    padding-bottom: 32px;
}

.ideas {
    display: flex;
    flex-direction: row;
}

.video {
    width: 60%;
}

.video video {
    width: 94%;
    padding-left: 24px;
    padding-bottom: 24px;
}

.video h3 {
    font-weight: 600;
    font-size: 35px;
}

.video h4 {
    font-size: 20px;
}

.opportunity {
    width: 40%;
    display: flex;
    flex-flow: column;
}

.opportunity img {
    height: auto;
    width: 35%;
    padding: 16px;
}

.places {
    display: flex;
    justify-content: flex-end;
}

.concepts {
    width: 65%;
    display: flex;
    align-items: flex-start;
    flex-flow: column;
}

.concepts h3 {
    font-weight: 600;
    font-size: 35px;
}

.concepts h4 {
    font-size: 20px;
    margin-top: -15px;
}

footer {
    width: 100%;
    display: block;
}

footer h5 {
    padding-top: 16px;
    padding-left: 24px;
}

footer .foot {
    float: right;
    position: relative;
    bottom: 42px;
    padding-right: 10px; 
}

}

@media only screen and (max-width: 500px) {

    html {
        background-color: white;
        color: rgb(68, 66, 66);
        font-family: 'Lora', serif;
        font-weight: 400;
        opacity: 0.9;
    }

    body {
        border: 1px solid gray;  
    }

    header {
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: center;
    }

    header a {
        display: none;
    }

    .logo img {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    nav img {
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 16px;
        padding-bottom: 16px;
        position: relative;
        top: 2px;
    }

    nav a {
        display: none;
    }

    .learn {
        background-color: lightgrey;
    }
    
    .learn img {
        width: 100%;
        height: auto;
    }
    
    .info {
        max-height: 374px;
        display: flex;
        flex-flow: column; 
        padding-left: 16px;
        padding-right: 16px;
    }

    .info h1 {
        font-weight: 600;
        font-size: 50px;
        padding-top: 32px;
        padding-bottom: 32px;
        position: relative;
        bottom: 38px;
    }

    .info h3 {
        font-size: 35px;
        padding-bottom: 24px;
        position: relative;
        bottom: 107px;
    }
    
    .info a {
        color: white;
        background-color: grey;
        width: 100%;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 20px;
        position: relative;
        bottom: 142px;
    }

    .learning {
        display: none;
    }

    .source {
        padding-left: 16px;
        padding-bottom: 32px;
    }

    .orientation {
        margin-bottom: -30px;
    }

    .images img {
        padding-top: 32px;
        padding-left: 16px;
        padding-right: 16px;
        width: 93%;
        height: auto;
    }

    #two {
        margin-top: -16px;
    }

    .words {
        display: flex;
        flex-flow: column;
        padding-left: 32px;
        padding-bottom: 64px;
    }

    .words h3 {
        font-weight: 600;
        font-size: 30px;
        margin-bottom: -27px;
        padding-bottom: 8px;
    }

    .words h4 {
        font-size: 20px;
        margin-bottom: -1px;
        padding-bottom: 8px;
    }

    .words a {
        color: blue;
    }

    .options {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .options h1 {
        margin-top: -1px;
        padding-bottom: 16px;
        text-align: center;
    }

    .course img {
        display: none;
    }

    .course h3 {
        font-weight: 600px;
        font-size: 25px;
        background-color: lightgrey;
        margin-bottom: -11px;
        padding-top: 16px;
        padding-left: 16px;
        padding-bottom: 24px;
    }

    .course h4 {
        display: none;
    }

    .thesis h1 {
        font-weight: 600;
        text-align: center;
        padding-top: 32px;
        padding-bottom: 16px;
        position: relative;
        bottom: 22px;
        margin-bottom: -22px;
    }

    .video video {
        height: auto;
        width: 100%;
        padding-bottom: 24px;
    }

    .video h3 {
        display: none;
    }

    .video h4 {
        display: none;
    }

    .opportunity {
        display: none;
    }

    footer {
        margin-top: -11px;
        margin-bottom: -8px;
    }

    footer a {
        display: none;
    }

} 

The one thing that appears to be missing is the default style sheet. Media queries are overrides. What if none are triggered; what happens then?

The cure for this problem is to move all common selector rules to the top of the style sheet., starting with this one,

html {
    background-color: white;
    color: rgb(68, 66, 66);
    font-family: 'Lora', serif;
    font-weight: 400;
    opacity: 0.9;
}

A little redundancy is to be expected in terms of selectors, that’s what overrides are about. Write the selectors in the default portion of the style sheet and then reduce the rule sets in the media queries to only those properties that get overridden.