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

General Discussion

Learning Approach

Should I follow along with the deep dives or just focus on what he is saying and complete the tasks/quizzes afterwards?

Atm i'm downloading the files and trying to follow along but since they are completed when you d/l them i'm editing them before we start each video.. seems really tedious. How are you approach the deep dives and learning from each video? Thanks

4 Answers

James Barnett
James Barnett
39,199 Points

The videos are for absorbing knowledge and the code challenges are for applying that knowledge.

Personally I think you should always just watch the video and take notes on the important concepts and the syntax of the code being taught.

Coding is about learning to solve problems not to transcribing code the teacher is dictating in a video.

There's a great thread about this currently going on taking notes vs following along in a code editor

Appreciate the response.

I think the time it takes to get the code ready (as the tutor has it) is painful and tedious task.

So you recommend taking notes during the videos and then completing the quizzes and tasks?

James Barnett
James Barnett
39,199 Points
  • Watch the videos
  • take notes on the important concepts as well as syntax
  • Refer back to your notes about syntax when doing the code challenges
  • At the end of each badge build a little something for practice using the concepts you've just learned on codepen

For what it's worth a lot of beginner's have been finding the first 3 videos in the CSS Foundations course to have a steep learning curve. So Guil Hernandez is re-shooting them as we speak. The rest of the series doesn't have nearly as steep of a learning curve.

Oh wicked I just finished the first two and found them pretty steep but managed to ace the quizzes etc. Thanks again. CodePen looks a good resource.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

The new stages will be released very soon. I think you'll be pleased with the changes. :)

Good to hear!

Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

I would recommend following a Learning Adventure which is playlist for all the courses. It guides you through the deep dives and projects.

As for the project files, you generally want to follow along with the videos. You can always use the project files from the previous stage as a starting point for the new stage.

I don't believe you can because the project files change dramatically from the previous video (extra css files, html coding etc.)

I may be doing it wrong...

Amit Bijlani
Amit Bijlani
Treehouse Guest Teacher

From course to course that maybe true but from one stage to another stage there should be no new code without them going over it in the video. Maybe Nick Pettit and Guil Hernandez can shed more light on it.

No i'm sure HTML classes and other parts of the code had changed between videos although, again, I may be wrong.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Joshua Paterson-Proto,

Each video has a project file containing both a "start" and "final" directory. The code in the project files change from course to course because we cover different concepts in each video––we're not building a project in a Deep Dive.

Oh right, I hadn't noticed the 'start' and 'final' in most of the videos until I moved through a few topics. Guess it was just me not realising.

And yes I'm aware. Going to just take notes now and complete the subsequent tasks and quizzes. I'll probably enjoy it more this way than the constant stop starting and window switching.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Joshua Paterson-Proto – Feel free to send me a notification in the forum if you have any questions about the content. :)

Haven't explored the forum enough to know how to send a notification but I guess it's as simple as facebook... Guil Hernandez

Thanks for clarifying things and look forward to the new videos.

SO glad to hear the first three videos are being redone. The first time I watched them a few weeks ago it was information overload, and they moved a bit too fast for a beginner video. Thanks for taking the time to re shoot these! Much appreciated.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

We hear ya, Lisa Lombardo. Thanks for learning with Treehouse. :)

Treehouse Project Reviewer

And now they are perfect. Just watched the re-release. Thx alot Treehouse & Guil, this will work great for the beginners. Keep up the good work.

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Thanks Kevin. Say tuned for Stage 2 & 3 coming out soon!

Thanks James Barnett and Guil Hernandez! They look fantastic - can't wait to dive in.

James Barnett
James Barnett
39,199 Points

In case you are curious of how these notes should look, here are mine from the Selectors badge as an example:


Basic Selectors

  • universal

    • * { margin: 0; padding: 0; }
  • type

    • p { color: red; }
  • descendant

    • select any <em> that is inside of an <p>
    • p em { color: red; }
  • class

    • html
      • <div class = "main"></div>
    • css
      • .main { outline: solid red; }
  • id

    • html
      • <div id = "container"></div>
    • css
      • #container { outline: solid red; }
  • type & class

    • select all <ul>s with a class of list
    • ul.list { color: red; }
  • class & id

    • <div class = "main" id = "container**></div>

More Selectors

Tip: Selectors are read right to to left

  • child

    • select any <a> that is **directly inside* of a <div>*
    • div > a { color: red; }
  • adjacent sibling

    • select any <h2> that **immediately follows* a <p>*
    • p + h2 { background: blue; }
  • general sibling

    • select any <p> that follows an <ul>
    • ul ~ p { color: green; }
  • attribute

    • select any <a>s which have a class attribute
    • a[class] { color: purple; }
    • select any <a>s which have a class attribute which name contains *"baz"***
    • a[class~="baz"] { color: blue; }


  • link

    • a:link { color: red; }
  • visited

    • a:visited { color: green; }
  • hover

    • a:hover { color: purple; }
  • active

    • a:active { font-size: 1.5em; }
  • focus

    • a:focus { background: yellow; }
  • first child

    • select the first <li> in a list
    • li:first-child { color: olive; }
  • last child

    • select the last <li> in a list
    • li:last-child { color: olive; }
  • only child

    • select any <b> which is the only element inside it's parent
    • b:only-child { color: teal; }

Are you writing your notes pen and paper or typing them into a word doc?

James Barnett
James Barnett
39,199 Points

Personally I type my notes, using half the screen for video and half for the notes. I personally like markdown, so I use markdown pad for taking programming notes.

I'm also a huge fan of workflowy which I use for a lot of note taking as well.

Thankyou! Workflowy looks great! Definitely look to download the free version asap. I'm also following the book "HTML and CSS: Design and Build Websites" where I am taking many notes (written) to accompany my learning on this site.