A list of resources that will help you become a professional developer

A list of articles and tutorials that I share with my students.

HTML Fundamentals

• Documentation
  • Official docs by W3C
• HTML validator
  • Check your HTML code

CSS Fundamentals

• CSS Codrops reference
  • In detail explanation of every CSS property with examples
• CSS diner
  • Practice CSS selectors with this funny tutorial
• Smelly CSS
  • Donts of CSS
• Object-oriented CSS
  • Content agnosticism, object orientation with CSS
• CSS lint
  • Check your CSS
• Learn layout
  • A quick tutorial for layout
• Learn everything about flexbox with Flexbox Froggy
  • Learn flexbox with interactive tutorial
• Learn grid with grid garden
  • Learn CSS grid with interactive tutorial

User Centric Frontend Development

1. Git

   • Learn Git more in detail
     • The most common git commands
   • How to write a good commit message
     • Different approaches on how to describe your commits
   • Use emoji in commit messages
     • Have fun with emojis in commit messages 😎
   • Undo the last commit, keep changes
     • Edit that last commit message

2. Bootstrap 3

   • Study the grid
     • .container > .row > .col-*
   • Example of grid
     • Study the code in this example, use inspector
   • Explore Bootstrap 4

3. UX/UI

   • Don't make me think
     • How do users perceive your website
   • Color palettes
     • Choose and generate your color palette
   • Wireframes with Balsamiq
     • Create wireframes

4. How to write a good README.md

   • Example of a README.md
   • Learn Markdown properly
   • Syntax for a markdown language

First Milestone project

1. Create Wireframes with some of these tools

   • Balsamiq
   • Mockflow
   • Marvelapp

2. Make your website look modern

   • Several examples of modern design
     • spacing between elements, typography, lines, shapes
   • Several examples of horrible design

3. Testing interface

   • Responsinator
     • Check the responsiveness of your website
   • Browserstack
     • Check your website in different browsers and on different platforms
   • Can I use
     • Check the browser support for CSS properties

4. Icons

   • Font awesome
     • Free icons for your website

5. Validate your code

   • HTML validator

     • Validate your HTML

   • CSS lint

     • Check your CSS

6. Publish your first website

   • Github pages
     • Publish your static website

7. Checklist

   • Criteria for assessment. Skip the parts that are out of scope of the project. Use this for EVERY project

JS fundamentals

• Kind of official docs, but not really
  • Mozilla's docs
• You don't know JS
  • If you start feeling confident with JS
• Fun fun function
  • Youtube channel, Javascript and laughing
• Javascript info
  • The modern JS tutorial with runnable examples and challenges
• Eloquent JS
  • Things you might have missed in the classroom
• Learn JS from terminal aka Nodeschool
  • Learn anything from terminal
• JS Lint
  • Check your JS

Interactive Frontend Development

1. Scss/Sass

   • Docs
     • Official documentation
   • How to structure project with Scss
     • Divide and organize your scss files
   • Advanced Scss
     • Things you might have missed in the classroom
   • 8 Tips to Help You Get the Best out of Sass
     • Improve your sassing/scssing

2. TDD

   • Jasmine
     • Test if your code is working properly

Python Fundamentals

• From zero to hero with python
  • Fundamental concepts
• Why you should learn python for your first programming language
  • Python is the best language for beginners
• CS dojo
  • A youtube channel with python guides and tuts
• Learn python the hard way
  • Suffer while you learn

Do you want to know more?

• Check out EXTRA.md