Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

My First Project (HTML & CSS)

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;
    }
}

3 Answers

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.

Thank you so much!! It worked wonders.

Imgur

I made a pretty stupid mistake forgetting about the background property when I actually used it for the header haha

Awesome! Looks Great! The best part is that now you can use the .innerShadow and .photo classes on multiple elements without having to repeat code or think of unique names for each set of elements.

Feel free to ask me any other questions you might have. I'm more than happy to help.

Thien Nguyen
Thien Nguyen
20,554 Points

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 ^_^

Hey, thanks for the answer. Yes I know, the green sucks but I realized only after I finishedand I was too tired, it looks a bit better in the browser. I'll check out the site you linked :)

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.

Thank you very much for your answer! I will try and use classes and ids only when necessary, although I used many here only because I just finished the CSS Basics where Guil uses many classes as well, I thought that was good practice but it might have been only an example.

Also, I wanted to apply an inner blurred shadow effect to my circle images but I wasn't able to; I think that's because I changed the display property to block but I couldn't find a way around it, my images wouldn't be centered otherwise.

I also found out many tiny mistakes that I've made but I think overall it's ok, I'll move on to the next project making sure I follow your suggestion. :)

Thanks again.