Include links to educational resources?

[shawnbot]

Lots of people have asked in Slack about where they should beef up on their front end skills. We might have to be careful about explicitly endorsing paid resources, but maybe we could start here with a list and figure out which ones we can/should "officially" suggest?

[noahmanger]

I haven't played with it in years, but I had a really good experience with Codecademy. Everything is done through interactive tutorials rather than videos followed by exercises, which I really appreciated.

[maya]

Courses:

https://teamtreehouse.com/ https://www.codeschool.com/

Blogs: https://css-tricks.com/ https://www.smashingmagazine.com/

Books: https://abookapart.com/

[micahtaylor]

Lynda: http://www.lynda.com/search?q=front-end+development Can be a bit on the deep end at times but https://scotch.io/tutorials is good. http://exercism.io/ is a different way to learn and optimize too.

[gboone]

If folks are looking for bootcamps, Turing School is a non-profit one here in Denver. They have two seven month programs, so maybe more intensive than some of the other schools I don't really know. They also have a diversity scholarship. Galvanize and GA also seem popular, don't know about value for those but they exist do outside of Denver (why anybody would want to do that, I don't know).

[jehlers]

Here are some classes I found recently:

https://www.udemy.com/foundations-of-front-end-development/

https://betamore.com/academy/front-end-web-development/

[msecret]

Here's a lesson plan I've been using for teaching. The student is creating HTML, CSS layouts for part of her job using a CMS and wanted to improve how she was writing her code.

Lesson 1 : HTML5 and Semantics

Reading

• https://www.smashingmagazine.com/2011/11/html5-semantics/

Homework

• write JUST the HTML of this mockup using HTML5 and the semantic principals discussed in the first class lesson. (Mockup was A List Apart article)

Lesson 2 : Selecting with CSS

Reading

A history of CSS

https://medium.com/net-magazine/interview-with-h%C3%A5kon-wium-lie-f3328aeca8ed#.ts6nfhdrv

CSS selectors

https://robots.thoughtbot.com/basic-css-selectors-explained-with-cats https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Selectors

Overview of HTML5 semantic elements if you need it (there will be a test)

http://learn.shayhowe.com/html-css/getting-to-know-html/

Exercises

Finish the following exercise. There is one selector we haven't learned: the attribute selector. I think you should try it out (read about it from the readings and references) and we can go over it separately if needed. http://flukeout.github.io/

Looking ahead

We'll be doing the following HTML5 semantics test. http://webdesign.tutsplus.com/articles/quiz-do-you-understand-semantic-html--cms-24479

References

These are some good resources to look at when doing the homework and you get stuck (besides just searching on google and MDN) https://css-tricks.com/how-css-selectors-work/ https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Syntax https://developer.mozilla.org/en-US/Learn/CSS/Introduction_to_CSS/Selectors

Lesson 3 : Specificity

Reading

• https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Exercise

• Find some of your own code where you use !important and attempt to remove it.

Resources

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Lesson 4 : Layout

• 1 - 16 of http://learnlayout.com/
• Extra credit (if you want an A+) read chapters 1-2 of http://book.mixu.net/css/

Exercise

• Write the HTML and CSS for a multi-column layout and bring the code to class.

Lesson 5 : Layout 2

Reading

We'll continue to learn laying out things on a page, and will start to learn a very new layout technique: flexbox.

• https://www.sitepoint.com/understanding-css-grid-systems/
• http://book.mixu.net/css/5-tricks.html
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Review

This is what you'll be quizzed on next week, so make sure you know it well. It's a quiz on our specificity and selectors lessons.

• https://specificity.keegan.st/
• http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Exercises

http://flexboxfroggy.com/ - Play through the whole thing, make sure you understand the concepts of how flexbox works.

Lesson 6: Responsive design

Lesson 7: Architecture and modularization

[jehlers]

@msecret or anyone else - I'm looking for something to include some github explanation, instruction, and edict. That's the biggest thing missing from my personal knowledge that is blocking me from try out some of these things. Is there any place that's good for that? This isn't really just a front-end problem, but it still feels like it fits in this conversation.

[dogweather]

I saw the link to http://exercism.io — I'm a big fan. I've used it to improve my javascript, coffeescript, ruby, and more.

I just happen to be setting up an 18F team on the site at this very moment. Anyone who wants in, let me know.

[micahtaylor]

This just popped reddit a few days ago and looks interesting - https://www.reddit.com/r/webdev/comments/4m1z87/udacity_nanodegree_review_frontend_web/