CSS Change between Build a Simple Website to Build a Responsive Website

Question

Hi guys,

Maybe I'm missing something, but the CSS file used in Build a Responsive Website (Creating a Fluid Foundation) has a bunch of additions not in the CSS file at the end of Build a Simple Website. It would have been great if there was a video covering the differences between the files and why some of the changes were made. Taking a closer look at the CSS shows the the HTML must also be different, with the addition of a #nav id, instead of a .nav class.

Here is my CSS (all margins and padding converted to %):

body {
    font-family: 'Nunito', sans-serif;
    color: #FAF3BC;
    background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
    color: #4FB69F;
    text-decoration: none;
}

img {
    max-width: 100%;
}

h1 {
    font-size: 1.750em;
    letter-spacing: -1.5px;
}

h2 {
    font-size: 1.5em;
    color: #B4C34F;
}

.btn {
    color: #FAF3BC;
    background: #4FB69F url('img/texture.png') no-repeat right top;
    padding: 1.5% 3%; /*15px 30px*/
    margin: 4% 0%; /*40px 0px*/
    -webkit-border-radius: 25px;
            border-radius: 25px;
    text-transform: uppercase;
}

.btn:hover {
    background-color: #4CC4A7;
}

ul.nav {
    margin: 1.2% 0% 0%; /*12px 0 0*/
    list-style: none;
    float: right;
}

ul.nav li {
    float: left;
    margin-right: 4%; /*40px*/
}

ul.nav li a {
    color: #FAF3BC;
}

#intro {
    margin: 5% 0% 7.5% 0%; /*50px 0 75px 0*/
}

#new-cupcakes img {
    border: 8px solid #FAF3BC;
    margin: 0% 0% 20% 0%; /*0 0 20px 0*/
}

#featured-cupcake img {
    border: 8px solid #FAF3BC;
}

#copyright {
    border-top: 8px solid #2A0400;
    padding: 1% 0%; /*10px 0*/
    margin: 1.5% 0%; /*15px 0*/
    text-align: center;
}

Here is the CSS from Creating a Fluid Foundation:

/*global*/

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 100;
    font-size: 1.125em;
    color: #faf3bc;
    background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
    color: #4fb69f;
    text-decoration: none;
}

img { 

    max-width: 100%;
}

/*typography*/

h1 {
    font-size: 1.750em;
    font-weight: 100;
    letter-spacing: -1.5px;
}

h2 {
    font-weight: 100;
    font-size: 1.500em;
    color: #b4c34f;
}
h3 {
    font-weight: 100;
    font-size: 1.125em;
    color: #ed6c85;
}

/*buttons*/

.btn {
    padding: 15px 30px;
    color: #faf3bc;
    background: #4fb69f url('img/texture.png') no-repeat right top;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

.btn:hover {
    background-color: #4cc4a7;
}


.btn-small {
    padding: 10px 25px;
    color: #faf3bc;
    font-size: .75em;
    background: #b22316 url('texture.png') no-repeat right bottom;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    text-transform: uppercase;
}

.btn-small:hover {
    background-color: #c62718;
}

/*navigation*/

#nav ul {
    width: 100%;
    margin: 20% 0 0 0;
    list-style: none;
    float: right;
    }
#nav ul li {
    float: left;
    }
    #nav ul li.about {
        width: 15%;
    }
    #nav ul li.pricing {
        width: 35%;
    }
    #nav ul li.locations {
        width: 15%;
    }
    #nav ul li.contact {
        width: 25%;
        margin: 0 5% 0 5%;
        padding: 8px 0;
        color: #faf3bc;
        font-family: 'Nunito', sans-serif;
        text-align: center;
        border: 0;
        font-weight: 100;
        font-size: .75em;
        background: #b22316 url('texture.png') no-repeat right top;;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        text-transform: uppercase;
    }
#nav ul li.contact:hover {
        background-color: #c62718;
    }
#nav ul li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
    }

/*content*/

#intro {
    margin: 0 0 5% 0;
}

#new-cupcakes img {
    box-sizing: border-box;
    background-color: #faf3bc;
    padding: 8px;
    margin: 0 0 5% 0;
}


#featured-cupcake img {
    box-sizing: border-box;
    background-color: #faf3bc;
    padding: 8px;
    margin: 0 0 5% 0;
}

#contact span{
    color: #b22316;
    font-weight: 600;
}

#copyright {
    border-top: 8px solid #2a0400;
    padding: 2% 0;
    margin: 2% 0;
    text-align: center;
}

There are lots of changes, some subtle, others not. But it does effect the entire layout of the site, and I'm just a bit confused as to why we aren't taken through the steps to get the CSS to that point?

Thanks, and sorry for the long post!

Answer 1 · 2013-02-23T22:32:54Z

February 23, 2013 10:32pm

I totally agree with you, I've just made the jump from the 1st to the 2nd tute series, and there is a huge, unexplained leap that is really not very helpful in understanding how this works.

Answer 2 · 2013-02-24T14:55:55Z

February 24, 2013 2:55pm

@Jacob -

In regard to ...

there is a huge, unexplained leap that is really not very helpful in understanding how this works

This is actually a common mistake that users who are new to Treehouse make, is to go directly from the Build a Basic Website course to the Build a Responsive Website course, this skips over several foundational courses.

To view the order in which these were designed to be taken, look at the Learn HTML & CSS Learning Adventure

Answer 3 · 2013-02-24T15:16:01Z

February 24, 2013 3:16pm

Thanks for the suggestion, James, duly noted. However, the reason this may be a 'common mistake' is likely due to the lack of clarity regarding which path to follow, perhaps this could be made more clear?

Thanks,

Jake

Answer 4 · 2013-02-24T15:28:10Z

February 24, 2013 3:28pm

@Jacob - You'll get no argument from me that it could be made more clear ;)

I'm just another Treehouse user, you can pass along your thoughts about the organization of content on Treehouse directly to Treehouse's staff by emailing them at help@teamtreehouse.com

Answer 5 · 2013-02-25T08:58:02Z

February 25, 2013 8:58am

Thanks the responses guys!

During the HTML & CSS Fundementals islands do the instructors specifically cover changes to the Smells Like Bakin' site? My issue is not understanding what the code they have added does/means. My issue is wanting to know why the changes were made. Why margin was added here, padding removed there, why classes have changed in the HTML etc. if things were done the 'wrong' way during the Basic Island they should be highlighted somewhere. If they are and I have missed where, please do let me know.

The description of the Responsive island is that we would be continuing with the Smells Like Bakin' site made in the Basic island. Which I feel is a bit misleading if the code isn't the same...

I've emailed Treehouse about it but haven't received a response.

Answer 6 · 2013-02-25T09:34:49Z

February 25, 2013 9:34am

@Sasha - Not that you asked but, here's my 2 cents on the differences.

My view on it, is that Build a Basic Website is the very first course you do at Treehouse as such Nick sticks to the basics to create the site.

This reminds me of taking Spanish in high school. In Spanish I, I had a really small vocabulary so when the teacher asked a question in Spanish, I had to keep my answers to questions very basic. By the time I got to Spanish III, my knowledge of Spanish vocabulary and grammar had increased I could write a short essay in Spanish.

Once you get to the point of the Learning Adventure to do the Build a Responsive Website you will have learned a lot more having completed 3 more courses as such there are quite a few more techniques.

Watch the HTML, CSS & CSS3 deep dives and if you still have any questions about the changes post them here and I'll do my best to answer them point-by-point.

Answer 7 · 2013-02-25T16:59:57Z

February 25, 2013 4:59pm

@ James - I appreciate the response, but my issue is not to do with my 'vocabulary'. I understand all of the elements and attributes that are being used. My issue is that I want an explanation of why they were used, specifically in regard to the Smells Like Bakin' website. I don't want to just copy and paste the new code.

Answer 8 · 2013-03-25T02:12:29Z

March 25, 2013 2:12am

I was wondering the same thing. I noticed the class nav had been changed to an id nav and realized the changes they made to the media queries in the video wouldn't change our site.

I agree with Sacha, I don't really want to just copy and paste the code as I won't learn anything. A video on this change would be great. What if a client wants their fixed site changed to responsive and usable on iPads and iPhones? We can't exactly just copy and paste code to fix it.

Looking forward to a CSS media queries convert video in the future.

Answer 9 · 2013-03-25T02:23:53Z

March 25, 2013 2:23am

Kevin -

I couldn't help but notice that you've gone directly from the Build a Basic Website course to the Build a Responsive Website course, this skips over several foundational courses that Treehouse calls deep dives

If after you go through the HTML Deep Dive, CSS Foundations, CSS3 Deep Dive courses you still have any questions about the changes to the project files, please post them here and I'll do my best to answer them point-by-point.

Answer 10 · 2013-04-09T01:16:52Z

April 9, 2013 1:16am

I poured over this thread and the various course tracks (mainly the "Become a Web Designer" course track that I am working through), and have to agree with Sacha on this. I went in this order (as layed out in the "Become a Web Designer" track) ::

1.) Build a Simple Website 2.) HTML 3.) CSS Foundations 4.) Aesthetic Foundations

And then #5, should technically be, Build a Responsive Website. However, it's Build an Interactive Website according to the "Become a Web Designer" course order.

I went to the Responsive one, the CSS file was way different from the one I worked on with Nick in the 'Build a Simple Website' course, so I figured I was on the wrong 'island'. I go to Interactive, and nope, THAT is the wrong island. See how it could be confusing / frustrating?

While I guess I'm not adding much to the thread, I just had to state my confusion/frustration in the way the course track is ordered, and the whole deal with the switcharoo CSS file...

Answer 11 · 2013-05-04T19:08:36Z

May 4, 2013 7:08pm

I am having the same problem. The course structure is disjointing. You are told to follow along and punished for doing so.

Answer 12 · 2013-05-19T01:24:05Z

May 19, 2013 1:24am

Thank you for posting this thread to the forum. I also noticed the difference in style.css from Build a Simple Website to Build a Responsive Website and came here searching for answers. When completing Build a Simple Website, my only choice was to go directly into Build a Responsive Website. I will pause my progress In Build a Responsive website to complete the Deep Dives. I'm confused, how do you know when to complete which Deep Dive?

Answer 13 · 2013-05-19T06:06:03Z

May 19, 2013 6:06am

Hi Felicia,

What I suggest is instead going down the path of a learning adventure. In this case, become a web designer.

http://teamtreehouse.com/learning-adventures/become-a-web-designer

You will have quite a few lessons, quizzes, and tests before you get back to responsive. The path is still disjointing because the code you created while following along in the first lesson is different. What I did is redownload the project files for responsive and use that as my base. By the time you get through all the deep dives the disconnect might be more subtle because you haven't seen the code in a while.

I also skipped the interactive/java lessons until after responsive because that makes more sense within the context of the lessons. The Treehouse system isn't perfectly refined and you'll probably need to choose your own learning adventure in the end.

Good luck!

Answer 14 · 2013-05-22T02:57:37Z

May 22, 2013 2:57am

Thank you for guiding me in the direction of the learning adventure. Also, thanks for letting me know what you did for the responsive website tutorial. This is not a bad way to learn!

Welcome to the Treehouse Community

Looking to learn something new?

Sacha Cohen

Sacha Cohen

CSS Change between Build a Simple Website to Build a Responsive Website

14 Answers

Jacob Dawson

Jacob Dawson

James Barnett

James Barnett

Jacob Dawson

Jacob Dawson

James Barnett

James Barnett

Sacha Cohen

Sacha Cohen

James Barnett

James Barnett

Sacha Cohen

Sacha Cohen

Kevin Snider

Kevin Snider

James Barnett

James Barnett

Rick Schneider

Rick Schneider

Samuel Orf

Samuel Orf

Felicia Thurman

Felicia Thurman

Samuel Orf

Samuel Orf

Felicia Thurman

Felicia Thurman