My First Project (HTML & CSS)

Question

Hey guys, this was my first project and I'd like to know what you think about it. Any feedback is appreciated!

I know you will probably never go through the whole code but if you could skim and maybe tell me what I could improve on it would be greatly appreciated!

I especially spent a lot of time on media-queries because I couldn't get the layout quite right, although I did some troubleshooting by myself using dev tools and I was pleased with the result in the end.

<3 Treehouse

SCREENSHOT

Imgur

HTML CODE

<!DOCTYPE html>
<html>

    <head>
        <title>deadmau5 fan page</title>
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width">
    </head>

    <body>

        <!------- HEADER ------->

        <header class="main-header">
            <hgroup>
                <h1>deadmau5</h1>
                <h2>sometimes things get...</h2>
            </hgroup>
        </header>

        <!------- CONTENT ------->

        <!------- WRAPPER ------->

        <div class="wrapper">

            <section class="primary-content">
                <p>Discover and experience Joel's approach to music, art and internet technologies.<br> Have fun making out his fantastic personality and lose yourself in his chills-inducing tracks.</p>
                <img id="arrow" src="img/arrow.svg" alt="">
            </section>

            <section class="secondary-content">

                <div class="music">
                    <img src="img/music.jpg" alt="deadmau5 4x4=12 album" id="music-img">
                    <p>Explore what kind of approach Joel takes to his music and understand how is he able to represent many genres through the use of synthesizers.</p>
                    <ul>
                        <li><a href="#">Albums</a></li>
                        <li><a href="#">Sounds</a></li>
                        <li><a href="#">Experiments</a></li>
                    </ul>
                </div>

                <div class="tech">
                    <img src="img/tech.jpg" alt="deadmau5 head" id="tech-img">
                    <p>Make out every single part of Joel's equipment, understand how the idea of producing music came to him through IT projects. Re-live the birth of the iconic mask.</p>
                    <ul>
                        <li><a href="#">Equipment</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Mask</a></li>
                    </ul>
                </div>

            </section>

            <!------- CONTENT END ------->

            <!------- FOOTER ------->

            <footer class="main-footer">
                <a href="facebook.com/deadmau5">
                    <img src="img/facebook-wrap.png" alt="Facebook Logo">
                </a>
                <a href="twitter.com/deadmau5">
                    <img src="img/twitter-wrap.png" alt="Twitter Logo">
                </a>
                <p>Discover Joel's world through his Twitter and Facebook.</p>
            </footer>
        </div>

        <!------- WRAPPER END ------->

    </body>

</html>

CSS CODE

/* ------------- UNIVERSAL ------------- */

* {
    box-sizing: border-box;
}

/* ------------- GENERAL ------------- */

body {
    font-family: Arial, sans-serif;
    background: white;
    margin: -60px auto 0;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #55ff55;
    text-shadow: 0px 1px 1px #000;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
    padding: 0;
    text-align: center;
}


/* ------------- HEADER ------------- */

.main-header {
    height: 500px;
    text-align: center;
    background:
        linear-gradient(to top, #fff, transparent 5%),
        #0f0 url(http://images5.alphacoders.com/478/478498.jpg) no-repeat center;
    background-size: cover;
}

h1,
h2 {
    color: white;
}

h1 {
    font-family: 'Arial Black', arial, sans-serif;
    font-size: 5.5em;
    letter-spacing: -0.625rem;
}

h2 {
    margin-top: -70px;
    font-weight: normal;
}

/* ------------- CONTENT ------------- */

.wrapper {
    max-width: 960px;
    margin: 0 auto;
}

.primary-content {
    font-size: 1.125rem;
    text-align: center;
    text-shadow: 1px 1px 2px #888;
}

#arrow {
    width: 50px;
    padding: 10px;
    border-radius: 3px;
    background: black;
}

.secondary-content {
    overflow: auto;
    width: 100%;
}

.primary-content,
.secondary-content {
    border-bottom: 4px solid #0f0;
    margin-bottom: 20px;
    padding: 25px 30px;
}

.secondary-content p {
    padding-top: 20px;
}

.music, 
.tech {
    float: left;
    width: 45%;
    margin: 2.5%;
}

#music-img, 
#tech-img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
}

ul li {
    display: inline;
    margin-right: 10px;
    padding: 5px 5px;
}

/* ------------- FOOTER ------------- */

.main-footer {
    text-align: center;
    margin-top: 50px;
}

.main-footer img {
    height: 30px;
    width: 30px;
}

/* ------------- INTERACTIONS ------------- */

a:hover {
    color: black;
}

/* ------------- MEDIA QUERIES ------------- */

@media (max-width: 920px) {
    .music, 
    .tech {
        float: none;
        width: 80%;
        margin: 5% 9%;
    }
    .secondary-content {
        text-align: center;
    }
}

@media (max-width: 520px) {
    h1 {
        font-size: 4.5em;
    }

    h2 {
        font-size: 1.1em;
        padding-top: 5px;
    }
    .main-header {
        height: 400px;
    }
    .primary-content {
        font-size: 1rem;
    }
    .secondary-content,
    .main-footer {
        font-size: 0.9rem;
    }
    .music,
    .tech {
        width: 90%;
        margin: 2.5% 4.5%;
    }
}

@media (max-width: 330px) {
    h1 {
        font-size: 4em;
    }   
    h2 {
        padding-top: 15px;
    }
}

Answer 1 · 2015-04-09T03:14:12Z

April 9, 2015 3:14am

No worries. My comment about less id's and classes was just a suggestion of a practice i use. You'll eventually find a system that works for you. The main point of the lesson is DRY(Don't Repeat Yourself). My comment was just the way i stay true to DRY.

But try out my method, you never know, it could work for you like it does for me. =)

As for your inner shadow you could replace the img with a div and add the image as background so you can apply inner shadow to the element. I made a few changes to the code you provided in a way that i would code it. view below

<div class="music">
    <div class="photo innerShadow"></div>
    <p>Explore what kind of approach Joel takes to his music and understand how is he able to represent many genres through the use of synthesizers.</p>
    <ul>
        <li><a href="#">Albums</a></li>
        <li><a href="#">Sounds</a></li>
        <li><a href="#">Experiments</a></li>
    </ul>
</div>

<div class="tech">
    <div class="photo innerShadow"></div>
    <p>Make out every single part of Joel's equipment, understand how the idea of producing music came to him through IT projects. Re-live the birth of the iconic mask.</p>
    <ul>
        <li><a href="#">Equipment</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Mask</a></li>
    </ul>
 </div>

.photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
}

.innerShadow {
  box-shadow: inset 0 0 100px #000;
  -moz-box-shadow: inset 0 0 100px #000;
  -webkit-box-shadow: inset 0 0 100px #000;
}

.music .photo {
  background: url('http://dummyimage.com/600x600/red/fff') no-repeat center;
  background-size: cover;
}

.tech .photo {
  background: url('http://dummyimage.com/600x600/red/fff') no-repeat center;
  background-size: cover;
}

Where .tech .photo and .music .photo is you just need to change the url to your images and the photos will be a background to the element that has an inner shadow. Try it out.

Answer 2 · 2015-04-09T01:47:32Z

April 9, 2015 1:47am

It looks great but i'm not the fan of the green and the shadow. Maybe a darker green. Just my opinion =P

here is a cool color website I found. It has the triad color they talk about in web design video. (http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)

I haven't attempt to make my own website yet ^_^

Answer 3 · 2015-04-09T01:54:02Z

April 9, 2015 1:54am

The layout looks great for your first project. A couple things i would suggest changing to help you manage your code better is keep id's and classes to a minimum. Not everything needs a class or id to be styled, UNLESS, you are applying a specific style to the element.

Example would be your images. id's are neccessary especially since you are applying the same style to both. See below.

Deleting the id's from the images.

<div class="music">
    <img src="http://dummyimage.com/600x600/000/fff" alt="deadmau5 4x4=12 album">
    <p>Explore what kind of approach Joel takes to his music and understand how is he able to represent many genres through the use of synthesizers.</p>
    <ul>
        <li><a href="#">Albums</a></li>
        <li><a href="#">Sounds</a></li>
        <li><a href="#">Experiments</a></li>
    </ul>
</div>

<div class="tech">
    <img src="http://dummyimage.com/600x600/000/fff" alt="deadmau5 head">
    <p>Make out every single part of Joel's equipment, understand how the idea of producing music came to him through IT projects. Re-live the birth of the iconic mask.</p>
    <ul>
        <li><a href="#">Equipment</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Mask</a></li>
    </ul>
 </div>

You can delete the previously used id and replace it with the code below. This line of code will target all images in the .secondary-content element and apply the code to them. Seeing as these are the only images in the file this will work for now.

.secondary-content img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
}

/*
IF LATER YOU DECIDE TO ADD MORE IMAGES
THAT YOU DON'T WANT TO APPLY THE CODE 
ABOVE TO YOU CAN CHANGE THE ABOVE 
TO THE FOLLOWING AND STILL HAVE THE SAME
EFFECT.
*/

.music img,
.tech img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto;
}

Hope this helps. I've learned over the years that making use of this practice will make coding a bit easier and less stressful having to come up with new classes and id's for each element.

Welcome to the Treehouse Community

Looking to learn something new?

Arrigo Lupori

Arrigo Lupori

My First Project (HTML & CSS)

3 Answers

Chyno Deluxe

Chyno Deluxe

Arrigo Lupori

Arrigo Lupori

Chyno Deluxe

Chyno Deluxe

Thien Nguyen

Thien Nguyen

Arrigo Lupori

Arrigo Lupori

Chyno Deluxe

Chyno Deluxe

Arrigo Lupori

Arrigo Lupori