The Ultimate Beginners Guide To Web Development — Lessons from the Web Lead of an Amazon Web Service

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

Advertisements

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 [1]. 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:

  1. How to understand the basics of a webpage and the internet
  2. How to structure learning on web development fundamentals
  3. 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

Anthony Robbins

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 [2]. 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.

The Basics


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).

Excerpt:

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!

Detailed links

  • 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

Diving Deeper

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

Learning a new environment is hard. This is a walk through of my basic environment set up. Whenever I have a new machine. I download SublimeText, Google Chrome, iTerm2

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

The console allows you to interact with HTML and Javascript interactively. This will let you change what you see and see what is happening behind the scenes as you go through a web page.

Read these guides for a basic understanding of the console. You’ll return to the console often as you continue to develop. If you master the basics of inspecting HTML and debugging Javascript, you’ll reap progressively larger benefits as you continue to learn. Especially as you develop more complex applications, you will have huge dividends in time savings if you master the console.

Knowing how to use the debugger is like having Quicksilver’s superpower from X-Men. You can stop Javascript execution, change variables, manipulate HTML, and much more. Image credit EW

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: [2]

Courses:

For structured courses or books: limit what doesn’t work. Use this list as a list to sample from, and sample the course or book to learn what learning style works for you. For a book, you only need to read 30-40 pages to decide if a programming book’s author’s style works for you. Even if someone else recommended a book, it may not be ideal for you, everyone’s learning style and background is different. The same thing applies for courses. Programming books and courses vary in quality of learning depending on your learning style and skillset. For example, Mastering AngularJS is great if you have experience in Javascript and AngularJS. This book jumps from high level concepts for beginners to specific solutions to detailed pain points geared for experts. This type of jump may be disorienting if you’re new to AngularJS.

Don’t do this Do this

When It comes to your learning, use this technique of sampling then eliminating what doesn’t work. Image Credit Julie Zhou, originally used in a fantastic article on Junior versus Senior Designers

Future Experts

This section is related to a base set of resources are critical to specializing in Javascript and AngularJS.

Step 1: On Javascript and Web Technologies

Read these resources as you’re developing your project (or are going through the courses listed in the Structured Learning Section).

Step 2: On Angular JS

There are many flavors of Javascript frameworks [3]. The one I am most familiar with is AngularJS. As of this writing, AngularJS has one of most active communities on Github and many developers swear by it. For a showcase of applications built on AngularJS: https://builtwith.angularjs.org/. This framework introduces language constructs that engineers familiar with iOS and Android development use that are traditionally missing in Javascript. AngularJS is the right framework for many teams that want to rapidly iterate and maintain a single page application.

Must reads

Diving deeper

Step 3: On becoming a Browser Whisperer

Reads

Specific to AngularJS

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

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 hi@frankc.net 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.


Notes

[1] 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).

Development at a company or startup requires a different set of skills. I studied Computer Science and researched in Human-Computer Interaction, both of which required development. Yet, the craft of development is very different from academia. The focus of development is much more team oriented. From early 2013, I led the web team on Amazon Zocalo. Zocalo is a secure enterprise sharing and collaboration service that uses AngularJS as its Javascript frontend framework.

[2] 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

[3] On picking the right Javascript framework I focus on AngularJS in this guide. To prevent frontend framework choice paralysis, AngularJS is the only Javascript framework presented. AngularJS has been hugely popular and useful for many developers who use it. If you’re interested in what else is out there, I would suggest TodoMVC TodoMVC implements the same To-do application using many popular Javascript frontend frameworks. This allows for a comparison and bootstraps the ability for people to prototype in different flavors of frontend frameworks.


More? Subscribe to my “Habits, Design, and Learning” mailing list by clicking here!

Writing Workflow: Building a System that Lasts

This article is about the steps I’ve taken to iterate upon my writing workflow. I’m writing this partially as documentation of how to structure a writing project in the same way as a software project.

This workflow is one under development. I have had problems with writing cadence and writing over the past few months. Writing this workflow is a means to increase the quality and the frequency with which I publish.

Jamie Todd Rubin is an inspiration with detailed articles on his craft of writing. Jamie is a science fiction author and developer at RAND, who has written consistently about processes for writing and evernote for years [1]. The art of creating process is essential for producing great work in the long term. Habits that reduce decisions into processes are critical to long term success.

In recent months, I have been writing consistently about 6–8 hours a week, most weeks. However, there have been weeks that I’ve written nothing.

Learning a new skill is hard and uncomfortable. This article is documentation on what’s worked recently and follow-up experiments I’m going to conduct on learning how to write better and more consistently.

Tools

Screenshot of my writing environment with Marked / Sublime Text

  • Git is typically used by developers to share and collaborate on code. It provides a nice interface between changes by individual developers and changes to be shared with a group. Why do I use git for writing? It gives me the ability to easily pare what articles are published and not yet published, I have nice versioning, and best of all, github displays Markdown beautifully.
  • Markdown is a language for writing in plain text that converts to beautiful html. This lets me jot ideas down quickly without the formatting necessary in other formats. Markdown looks like a .txt file with
  • Marked is a Markdown tool (by Brett Terpstra) that previews live with every save. This feedback loop has been the most seemless of all the editors I had experimented with. I have the analysis tool open—this gives me a word count and rough complexity metrics.
  • Sublime Text is my favorite editor for development and Markdown. It’s lightweight and infinitely extendible.

Drafting

  1. Inception I’ll start a small note inside of /working folder. This start of an article is sometimes placed into the working folder then fleshed out at a later date. Typically, this is a sentence or a paragraph.
  2. Creation 2 –3 hour chunk to flesh out this original tiny idea. My goal is to have about 600 – 1000 words initially. Typically I’ll have Marked open and be looking at readability statistics occassionally.
  3. Editing I’ll spend another 2 hours to revise the idea for my reader. The initial draft is typically framed for what I find interesting. I frame this writing session for what is interesting for another person.
  4. Review I’ll send this out to a few friends for review. Also, I’ll make two fiverr requests for feedback. Fiverr is a service where small tasks (e.g. editing a blog post) can be done for five dollars. Within a few days (as the fiverr requests return), I will integrate the feedback from a fiverr editor.

Initial sketch of my git workflow for publishing

Git Flow: (defn) a strict way to use git for project release. I keep two branches of my git project (development / master) checked out simultaneously. The development branch is private whereas the master branch is public and accessible on github. The only common markdown file is the README.md which lists the index of my site. [2]

Publishing

This is a two part process:

  1. On Github:
    1. Move the article from my /working folder (development branch) to a specific month (the master branch) for organization purposes.
    2. Check the urls / images. Resize large images and adjust the formatting.
    3. Push to mainline. This makes the article public!
  2. On WordPress:
    1. Export html from Marked and copy paste into WordPress. This allows WordPress to do the css styling and allow for an easy transition between Markdown and another blogging platform.
    2. Correct image urls to final remote locations
    3. Hit publish!

Future Work

  • Automatic daily email / analysis My initial workflow does not have a good feedback loop outside of the time I spend writing. Since I save each revision on git, it should very easy be able to run analysis on things like word count, complexity (see the above image for Marked application’s reading analysis). Jamie Rubin receives an email once a day that summarizes his writing for the day, streak length (currently 400+) and progress towards a goal. I plan to create something similar for my private development git branch.
  • Faster feedback loop for external editors My initial experiment using fiverr as external editors has been too slow. The two editor requests came back in 4 and 8 days, which slows down my publication process. I hoped for a more immediate feedback loop as a forcing function to publish. I plan to try this same process on Amazon’s Mechanical Turk sometime soon.

More Reading

I have read each of these books recently and have enjoyed them immensely.


References

[1] Many of Jamie’s articles focus on the development of processes, such as automation or writing consistently. His transparency in the iteration of certain processes (such as his Google Docs scripts) are really insightful and can provide a nice model for anyone trying to learn and develop habits. Here are some awesome articles:

[2] Read the guides on gitflow by Atlassian & @Nvie


More? Subscribe to my “Habits, Design, and Learning” mailing list by clicking here!