Skip to content
🎓 Learn!

Getting Started

From Nothing to App

I created this guide for people who have little to no familiarity with web design and development. The goal is to teach enough of everything you might encounter as a web designer or front-end/full-stack developer working in a professional environment that you can successfully make a career change. It contains several themes that comprise the major steps and components of modern web application development, along with lessons under each theme compiled from reliable sources around the internet (and sometimes lightly edited/tailored for this guide/use case). Whether you’re more interested in design, development, or product management, this guide will help you get started.

UX Research & Design

Understanding your users and their needs is the cornerstone of creating a successful application. Start by diving into user research and user experience design:

  • UX Research: Learn the basics of user design research, including methods like process mapping, brainstorming, competitive analysis, and creating user personas to guide your design process. Use FigJam to run goal setting workshops. Discover how to gather and analyze data to inform your design decisions.
  • UX Design: Master the principles of designing user-friendly interfaces. Explore wireframing, design thinking, and storyboarding.

UI Design

Once you have a solid understanding of your users, it’s time to bring your vision to life with UI design:

  • Visual Design: Learn about color theory, typography, and layout to create visually appealing interfaces. Use Figma to design your app’s look and feel.
  • Interaction Design: Focus on how users will interact with your app, refine micro-interactions, and design smooth, intuitive user flows.

Product Management

Transform your design into a viable product by understanding the principles of product management:

  • Roadmapping: Develop a clear product roadmap to outline your app’s development stages and milestones.
  • Agile Methodologies: Learn the basics of agile practices like Scrum and Kanban to manage your project efficiently and adapt to changes.

Web Development

Now it’s time to start building! Gain expertise in the essential technologies for web development:

  • HTML & CSS: Start with the basics of web structure and styling. Learn how to create responsive layouts and implement user interfaces you designed in previous lessons.
  • JavaScript & TypeScript: Add interactivity and dynamic features to your app. Master programming fundamentals to bring your app to life.
  • Git: Understand version control with Git. Learn to manage your codebase, collaborate with others, and track changes effectively.

Backend Development

Equip yourself with the knowledge to handle data and server-side logic:

  • Node & npm: Get comfortable with server-side JavaScript using Node.js. Use npm to manage dependencies and streamline your development workflow.
  • SQL: Learn to manage databases with SQL. Understand how to structure, query, and manipulate data efficiently.

Advanced Front-End Development

Enhance your front-end skills with advanced technologies and frameworks:

  • React: Build scalable and efficient user interfaces with React. Learn about components, state management, and hooks.
  • Tailwind CSS: Streamline your styling process with this utility-first CSS framework. Create custom designs rapidly and consistently.
  • Remix: Implement dynamic routing, server-side rendering, data loading, and data mutations in your React applications.

UX Prototyping

Before launching, create detailed prototypes to test and refine your app:

  • Prototyping: Using the tools we’ve already learned about to create interactive, high-fidelity code prototypes.
  • User Testing: Conduct thorough user testing of the prototypes to gather feedback and make necessary adjustments.

Career Development

As you build your app, also focus on building your career:

  • Starting an Open Source Project: Dive into the world of open source! Learn how to start your own open source project, contribute to existing ones, and build a portfolio that showcases your skills and passion for coding.
  • Getting Your First Tech Job: Prepare for your first job in tech with our comprehensive guide. Learn how to search for job opportunities, prepare for interviews, and make a great impression during the hiring process.
  • Career Growth and Paying It Forward: Focus on your long-term career growth and how to give back to the tech community. Discover strategies for continuous learning, networking, and mentoring others as you advance in your career.

By following this comprehensive guide, you’ll be well-equipped to turn your ideas into reality and advance your career in the exciting field of UX and web development. Let’s get started on your journey from nothing to app!

Software & Services

If you’re just starting out with web design and/or development, these are some steps you’ll need to take to get everything set up before you can dive all the way in. These steps aren’t strictly necessary until the later lessons (where this will be linked back to), but it’s a good idea to get them out of the way now.

Terminal

I recommend getting comfortable with the command line and terminal because you’ll need to use it often during the course of developing a web app. It’s a good idea to get comfortable with it now.

Here’s how to set it up:

No setup necessary, macOS comes with Terminal

System Package Manager

One simple way to get started getting familiar with the terminal is to install some GUI apps using a command line. You can do this by installing a package manager for your operating system. A system package manager is sort of like an app store that can install GUI apps as well as command line programs and other system libraries and is primarily accessed from the command line.

Open Terminal and run:

Terminal window
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Chromium-Based Web Browser

While you can develop websites and web apps in any browser, I’ve found that Chromium-based browsers have the best developer tools and the widest availability of developer extensions. You will, of course, need to test in other browsers (especially mobile Safari) to make sure your website works for everyone (we’ll cover that in a later section), but for development, these browsers are great choices:

Google Chrome

Download using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask google-chrome
  • Download from the website

Microsoft Edge

Download using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask microsoft-edge
  • Download from the website

Arc from The Browser Company

Download using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask arc
  • Download from the website

Vivaldi

Download using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask vivaldi
  • Download from the website

Ungoogled Chromium

Download using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask eloston-chromium
  • Download from the website

Figma & FigJam

Download or use using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask figma
  • Download from the website

Visual Studio Code

Download or use using one of the following methods:

  • Open Terminal and run:
    Terminal window
    brew install --cask visual-studio-code
  • Download from the website

GitHub