Resources for HTML / CSS / SASS / JS / Python / Django
- first things first - read these 20 steps for an overview of what happens when you type a URL into your browser
- this is not beginner material but if you really want to know how the sausage is made read How Browsers Work
CodeSchool is an excellent all around resource ($29/month as of this writing) with PDFs, video lectures and interactive quizes. Here's my suggested foundational courses:
- Git / Github - do all the courses here except for Mastering Github - just do level 1 (fork based workflow is what we use so it's essential that you get this part) and the rest are optional. It won't seem important at first but once you get going using Git for verson control is going to make life so much easier for you. And once you get some other skills under your belt you're going to want to be checking out other people's code on github and pulling it down and trying it out, etc. This is also a gentle introduction to becoming comfortable using the command line which will quickly become your new best friend.
- HTML / CSS - do all HTML, CSS and SASS courses (skip emails, animations, bootstrap, SVG and design unless you want more). After completing these you should feel comfortable making a simple web page and viewing it in a browser as well as viewing source in the web inspector and modifying code on other sites.
- Javascript - go through all of these JS modules from Mozilla, doing as many of the exercises as possible. If you want to go further see Codeschool's JS courses and do all Javascript and jQuery course (skip front end frameworks, NodeJS and Coffeescript unless you want more (then check out Node first)). After this you should feel comfortable adding some JS to your HTML pages to build out dynamic elements and should know how to select any element in the DOM via jQuery (or regular JS) - and you should actually know what DOM stands for and how it works. You should be able to open up the JS console in web inspector and really mess with sites now.
- Python / Django - do all courses here. At the end of this you should be able to dive into the official Django tutorial and begin reallying getting into things.
- SQL - do all courses here. At the end you should be able to write select statements with joins across tables and be ready to try more advanced queries.
- Postgresql - do at least "basic" and "joins and subqueries" sections - this will be a good test to make sure you absorbed everything from the code school course and will introduce some of the differences in Postgresql vs other SQL languages (we'll be using Postgres with Django)
- BASH - do chapters 1 and 2 (rest is bonus if you really want to dive in). This is to get you familiar with the command line and basic BASH scripting. This comes in handy not only when developing locally but when setting up and configuring servers (which will likely be running Ubuntu linux which you'll interact with entirely via command line).
- General overview on UX - Don't make me think also Rocket Surgery Made Easy
- Excellent read on the thinking behind the behavioral research going on about why people do what they do on the web - Grouped
- Examples
- Google Material Design - Google goes to great lengths to explain the thought and philosophy behind material which is a great example of applied UX
- Mailchimp UX Style Guide Lots of patterns and styles across nearly every aspect of a site
- iOS Human Interface Guidelines an expression of Apple's design opinons as well as practical UX guidelines for mobile interfaces (for exmaple - how big should a tapable button be, etc)
- Bootstrap it's turned into a major front end library and love it or hate it (plenty of people are on both sides) there's some good examples in here and it certainly has examples of nearly every type of interface a site would have in there
- Sprint UX Podcast
- People to follow
- Friendly introduction to Data Structures / Algorithms / Big-O Notation with examples in JS
- The Computer Science Handbook
- Open Data Structures
- Security Guide for Developers
- Definitive Guide to Form Based Authentication
- Big list of free security e-books
- Mozilla Secure Coding Guidelines
- Front End Handbook 2019 Massive resource of all things front end
- Pycharm (free community edition) Best python IDE (fully support all front end coding as well)
- Homebrew OSX package manager
- Git / Github Become familiar with git and github. You should be comfortable forking a repo, cloning it locally, working on feature branches for each task you work on, pushing up to your forked repo, rebasing and making pull requests
- Intro to git
- Official Git docs
- Merging vs Rebasing we'll be rebasing and you should understand the difference
- Gulp front end build system
- AWS Guide a friendlier version of docs for AWS
- Hello World in every programming language - a little taste of what other languages look like
- Fizz Buzz in every programming language - a little more in-depth look at other languages (what is fizz buzz)
- Vimtutor vim is a text editor you'll find on most linux and OSX distributions and it's good to at least be familiar with basic commands
- Data Quest - from beginner python through more advanced data science and statistics topics
- Data Skeptic Podcast
- MDN HTML reference
- MDN HTML5 Reference
- HTML5 Boilerplate a look at best practices for a modern HTML page - good to look at when setting up the base templates for a project
- Official SASS Docs
- MDN CSS Reference
- What are EMs? - we'll be using
emunits (instead ofpx) almost everywhere so become familiar with how they work and why we'd use them
- when in doubt follow the AirBnb CSS / SASS Styleguide which the exception that we'll always use 4 spaces as indentation everywhere
- CSS Tricks Blog great blog with answers to a lot of common questions
- Font Awesome we'll use this icon font for most of our icons
- Official JS reference (protip: add
MDNto your google searches about JS questios to make sure you get links to the offical docs vs w3 schools or other sources of varying quality) - Understanding JS Closures understanding this is fundamental to JS otherwise you'll be battling scope issues with keyword
this - Eloquent Javascript - book that will introduce you to JS
- when in doubt follow the AirBnb JS Style Guide - our style will match very closely (major exceptions being we'll use 4 spaces as tabs everywhere)
- This whole book is worth reading but we make use of the revealing module pattern in all of our JS so be sure to read up on it specifically Revealing Module Pattern
- List of free JS books
- Can I Use? - check browser compatibility for newer js, css and html
- ES6 Compatability Table what ES6 (latest JS standard) features are supported by what browsers?
- JS resources and podcast
- Udacity JS Course
- Official Docs (make sure to choose the version of python 2.7 / 3.x as appropriate)
- Using pip the official python package manager. Be comfortable looking up pacakges on pypi
- Python Crash Course various cheatsheets to help you get up to speed
- To isolate python environments between projects (so project A can have v1.5 of a package and project B can use v3.2, etc) see Virtualenv and Virtualenvwrapper (also note that in python 3
venvis now a part of the language so if using python 3 see venv) - Classes in python
- "Magic Methods" e.g.
__init__,__new__, etc (have double underscores by convention) here's a list of all the major ones and explaination of them: Python Magic Methods - Anonymous functions (lambda functions)
- Python 2 vs 3
- PDB (python debugger) tutorial
- Full Stack Python touches on just about everything adjacent to and including python
- The Zen of Python (PEP 20) a good primer on the philosophies behind python
- Python's official style guide PEP 8
- Django philosophies Django is an opinionated framework so it's import to understand it's viewpoint on development.
- Official Django Docs Bookmark this as you'll be coming back to it all the time. Each section of django from models to views to the admin panel has a section here with basic details and advanced info as well (always note what version of docs you're viewing vs what we're using in a project as things can change)
- Work through the official tutorial to get a feel for the major pieces of django and how they work together
- Note that the django ORM is lazy by default and it can create some pretty unperformant queries at times. Be sure to understand things like
prefetch_relatedand how they can work to make your queries more efficient: Making Queries in Django - for more complex queries see
Qqueries in django - for using values of queries in place (like incrementing a value) see
Fexpressions - And when the above won't cut it you can always drop down to raw sql in django
- Once you get the hang of django from the above tutorials and begin to wonder "what's the best practice for X?" look here. Created by one of the core django developers, this is a quick and easy way to get a django project started with a bunch of best practice settings and configurations already in place Cookiecutter Django - try making a new project with it and explore the settings and structure - there's a ton of really helpful comments in there to help you understand why they made the choices they did.
- We'll use this to make our REST APIs - go through the tutorial and get a feel for all the nice options this gives us for making APIs easily DRF