My friends love learning. This guide is an amalgamation of emails I have sent friends and things I have picked up in my journey to learn web development . By the end of this guide you’ll be able to answer the following questions:
- “How might I build a personal website in an afternoon?”
- “How might I start web development as a career?”
- “How might I become a future expert in web development?”
Here’s a summary of what you’ll learn by section:
- How to understand the basics of a webpage and the internet
- How to structure learning on web development fundamentals
- How to engage and grow your expertise
These lessons are pulled from how I have learned. At the end of this guide, you’ll have the resources necessary to grow in your desired web development expertise (even if it is just for an afternoon).
Everything in life either grows or dies
Web development is centered around communities of developers sharing and collaborating together to build software. You’ll see links to Github, the world’s leading open community to share code with “friends, colleagues, classmates, and complete strangers.”
Graph of github.com repositories. Image credit RedMonk
In the remainder of this guide, you’ll learn how you can grow from a beginniner to an expert in web development. This is by no means a comprehensive list of resources. Constraints are powerful in forcing maximum results with minimal investment. This guide lists resources useful for results. This guides teaches an approach on learning and exploring that you, web developer, will be able to use for what you’re trying to do.
I want to emphasize action:
- If you have an interest in web development, you should block two hours for The Basics section and return to reading this guide at that time. For beginners, it’s important to have the right expectations. At the end of these hours, you should have a basic understanding of web development and a web presence.
- Else, if you’re looking to learn web development as a hobby or as a career, you may want to print this document (pdf) and bookmark it for easy reference. The most important part of learning a craft is building a consistent habit, for more on structuring habits, see . At the end of this reading, you will have a baseline for qualified resources on how to start. This prevents the choice analysis paralysis (when too many choices makes the choice difficult).
The following sections are ordered by increasing difficulty.
I have sent various emails to friends who want to learn web development. HOWEVER, my results over the past 10 years show about 75% who want to learn web development actually want to do something quite different. They want to build a web presence and register a domain name. To complete this section, you’ll need a web browser and at least two hours to set up a web presence and do some reading.
If this is your goal, you should use a site generator that lets you share your site without touching any code. Use one of the following site generators to get started:
Note: You might ask yourself why more than one generator is listed. Each has a different strength and are very straight forward to test. These are listed by my ease of use, e.g. I found about.me to be extremely easy to use, but you may find Weebly fits your needs better
But wait, how does the internet work? Introduction on how the browser and internet (by Google researchers).
The internet is a global network of computers. It is millions of computers around the world, all connected. People often think of the internet as a cloud in space. In reality, every computer in the “inter-network”, or internet, is connected by actual wires – ethernet cables, phone lines, and fiber optic wiring on the ocean floor!
- What makes Chrome or Firefox or Internet Explorer work? What is HTML and CSS?
- Follow tutorials on HTML Dog
- Search Quora. Quora is a resource to find guides to start. E.g. On CSS; On Learning HTML / CSS / AJAX
- Search StackOverflow. StackOverflow is the go to resource for many developers. As you start to search for detailed questions, you’ll find a StackOverflow page with the answer. These are often more technical in nature than Quora
- Want a more in-depth look on the internet? A white paper from Stanford
The resources in this section are meant for those who want to start learning the fundamentals of web development and dive deeper than the basics. This is perhaps the most important part of this article. These resources are part of a long term learning process that starts with learning how to structure your learning. At the completion of this section, you should have a basic knowledge of how to deconstruct and play with most web sites you use. Furthermore, you will have a set of resources to continually learn web development.
Set up your development environment
- Chrome Extensions: Each of these extensions enhance the Chrome user experience
- PageSpeed. This is an extension to allow you to use Google’s pagespeed insights to make your website faster Google Developer’s Guide
- EditThisCookie. Cookies are a way to keep information about a website you’re using. This is the technology that lets you open gmail without logging in each time
- Plugins for Sublime: Each of these plugins enhance the Sublime user experience
Note: I don’t dive deep on all the tools mentioned as they are beyond the scope of this guide (and others do a much better job of it).
Learn your web console
Structure your learning
A critical juncture in learning is a habit to jump start your learning process. For example, I like to learn in the mornings. I describe my morning routine here. When I am learning a new craft, I will block at least 30 minutes every morning to learn and practice this craft prior to leaving for work. For more on building a habit see: 
- Codeacademy: Basics HTML & CSS; JQuery; Interactive Website
- NetTutorials: Web Development
- CodeCombat: Learn to Code By Playing a Game
- Coursera: Human-Computer Interaction; Web Applications Note: these two are limited to when they are offered on Coursera
|Don’t do this||Do this|
Read these resources as you’re developing your project (or are going through the courses listed in the Structured Learning Section).
- Google Developer’s Guide for Angular
- Learning JQuery & Bootstrap
Step 2: On Angular JS
- A very comprehensive list of resources on AngularJS. This collection is constantly updated
- Tutorials + videos: Organized tutorial via Thinkster.io (uses Egghead.io tutorials) + part 2 with full stack components. Individual video tutorials: https://egghead.io/
- Angular Recipes
Step 3: On becoming a Browser Whisperer
- On Testing: Beautiful Testing; Application testing via yearofmoo
- ACM: Best Practices on the Move: Building Web Apps for Mobile Devices while this essay is a collection of recommendations for making websites better for mobile devices, it serves as a nice template for modern performant web applications
- ACM: How Fast is Your Website this essay gives a nice overview for how to understand performance within web applications
- Cross-Origin Resource Sharing: This wikipedia article has a great set of links related to how to understand why this is important and methods to perform Cross Origin Resource Sharing for your website.
- Fundamentals of Algorithms by GeeksForGeeks has my favorite collection of algorithms on the web. It has details on run time for you to remember computer science fundamentals (and a great primer if you are interviewing)
Specific to AngularJS
- Angular UI: set of useful tools built for Angular. For example, this project has a subproject for integration of Twitter’s Bootstrap components
- Understand data binding via StackOverflow by one of the creators of Angular
- Improving performance with data bound components with BindOnce
- Approaches on Combining Facebook React with AngularJS  ; 
- Another approach to improving performance for ngRepeats
What is the hardest part of developing for the web? What are pitfalls that every web developer should know?
The hardest part of developing on the web is constant change. To succeed in delivering a great customer experience, you sometimes feel like you’re hitting a flying target with a bow and arrow while on horseback. Browsers / browser versions / frameworks change all the time. For example, something that worked last week may not work this week due to a dependency change in your framework that seemingly has nothing to do with a tool you’re using within your project, and this problem only pops up in IE 10.
The easiest pitfall of development is not testing. At the highest levels, testing can be a critical piece to ensure customer success. Entire books are dedicated to the topic of testing and beyond the scope of this beginners guide. Testing may be often overlooked in young development teams. Browser tests are particularly hard because browsers are interpretations of how the web protocols should work. There is no guarantee of consistency between browsers and browser versions.
How can I practice development everyday or reinforce my learning?
Learn widely. Web development is a moving target with many different areas to specialize in. Here are some ways to stay engaged with different communities
- Newsletters: Official Mailing List, AngularJS Daily, ng-newsletter
- Engineering Blogs: Google, AWS, LinkedIn, Twitter, Facebook, Github, High Scalability Blog, AirBNB
Find a mentor. Chances are you know someone who does this professionally or unprofessionally. Ask them for code reviews or problems you’re having. Talking aloud is an incredibly powerful way to solve problems. Thinking as an engineer means moving between different levels of abstraction. Someone who has 20 years of experience sees an entirely different set of problems when I ask this person a question than I do when someone asks me the same question.
Build something and stretch your skills. You can choose the tools in what you build every day in your practice. Github has a variety of codebaes for you to play with that are a “checkout” away. Even if you never end up releasing or integrating someone else’s project into your development projects, you have the opportunity to play with something cool.
I’m smiling because I hope you’ll send me feedback! Send me an email at email@example.com on what worked or didn’t work for you!
Special thanks to Abhishek Mantha for critical insights on how he learned development, Jeffrey Song for a beginner’s narrative on using this guide for learning web development, and Amaan Penang, Nate Ngerebara for feedback on early drafts of this guide.
 Why am I writing this? I have learned a lot in the past few years and wanted to share a set of resources with my friends who wanted to learn web development and internet friends.
I started web development at 12—at that time, people “surfed the world wide web.” For most of my academic and professional career, I was a researcher where I created software as part of my research. I built systems to study social influence on opinion at RAND, mobile environmental impact at UCLA, and behavioral theories on mobile phones at Stanford).
 On developing habits for learning I have found these to be good systems to model for learning new skills:
- Tim Ferriss’s 4 Hour Chef – this is a book on learning, that also teaches cooking
- BJ Fogg’s Tiny Habits – this is a habit program on learning how to develop simple habits
- Lift – this is a social network for habits