A Beginner’s Guide to Full-Stack Web Development

01-14-19 Corinne Ling

Corinne shares her full-stack training guide for self-taught developers looking for the next step in their education.

Last year, I went through Sparkbox’s Full-Stack Developer Apprenticeship program where we took deep dives into topics like object-oriented programming and progressive enhancement while also gaining confidence in several programming languages.

Coming from an English degree and then working at a startup with WordPress sites, I struggled with advancing in languages like Sass and JavaScript. I had no idea what skills I would need in order to work with a fully fledged team of web developers. I felt like I was standing on one side of a canyon, with so many developers already on the other side.

Sparkbox’s apprenticeship empowered me to take my first steps in crossing that canyon. I learned what tools are available as well as how teams use Git workflow, set up projects, work through cards, and review pull requests on GitHub—to name a few. I was also mentored by some amazing Sparkbox team members who helped me reach a point where I could understand how to think like a full-stack developer and how to teach myself better than I had before.

During this process, I decided to create a guide for web development beginners who are in the same place I was in before the apprenticeship. The mission of the Full-Stack Beginner’s Guide is to encourage people to learn and build amazing things. It is only when we give everyone the tools to learn and create that web development becomes diverse and bias-free. Since, as the Mozilla Digital Inclusion Brief states, “the content and systems that make up the internet—and related technologies, like mobile apps—reflect the views and biases of their creators,” there is a need for a free source of education like this one that can help open doors for everyone. There are many resources and classes available online, both paid and unpaid; however, they usually consist of a user copying code or filling in the blanks to an already-constructed program. In contrast, the materials for the Full-Stack Beginner’s Guide focus on project-based learning.

The homepage of the Full-Stack Beginner’s Guide, which details the site’s purpose and topics. The design is clean and simple to make the site as approachable and accessible as possible.

I started developing this guide, with the intention of empowering others, during my apprenticeship. I compiled all the resources I used when I was confused about a topic or wanted to dive deeper into it. Then, I narrowed those down to the ones that helped me the most with my personal and apprenticeship projects. I used a simple design to make the website as approachable and as unbiased as possible. And I created the project prompts based on what I had completed during the apprenticeship.

High-level topics include:

  • Git and GitHub: Documentation and workflow
  • Dotfiles: Setups, functions, and aliases
  • HTML & CSS: Semantic tags, CSS layout, and naming
  • JavaScript: ES6, Arrays, and Katas
  • Accessibility: Forms, aria, and color contrast
  • Wordpress: Plugins, speed, and themes

For each of these topics, I provide a summary as well as links to external resources I’ve found most useful, project prompts based on Sparkbox’s apprenticeship curriculum, and a cheat sheet for quick reference, with code users, can copy-and-paste to set up a GitHub repo, link to CSS, export a function, and more.

Ready to start learning and building?

Go to the Full-Stack Beginner’s Guide