Introduction

Web development is the process of building and maintaining websites.

A website is a collection of electronic documents that are stored on a computer called a web server.

To view a website, you use a web browser (Like Chrome, Firefox or Brave) to request the website from the web server. The web server then sends the website to your web browser, which displays it on your computer, phone, or whichever device you're using.

Web development is usually divided into 2 categories:

  • Front-end: What you see and interact with on the website.
  • Back-end: What happens behind the scenes that makes our website work.

When learning web development, it's important to first know what your goal is.

  • Professional development at a company (large or small).
  • Freelance / consultant / your own business.
  • Build your own apps / SaaS (Software as a Service).
  • Content Creation.
  • Just a hobby.

Roadmap:

Front-End:

  • HTML.
    • HTML 5.
    • Semantic HTML.
  • CSS.
    • Alignment (Flexbox, Grid).
    • Animations.
    • Transitions.
    • Responsive Design (Media Queries).
    • Frameworks (Bootstrap, Tailwind, Materialize, Bulma).
    • Sass (CSS preprocessor for more functionality like variables, mixins, functions, nesting).
  • JavaScript.
    • Vanilla JS.
      • Basics (variables, arrays, functions, loops).
      • DOM (selecting and manipulating elements).
      • Classes.
      • High order array methods (foreach, map, filter, reduce).
      • Getting data from backend to frontend using JSON.
      • HTTP Requests (Fetch API - GET, POST, PUT, DELETE).
    • JS Frameworks and Libraries (Vue, React, Angular).
    • TypeScript.
  • Package Managers.
    • npm.
    • yarn.
  • Module Loading / Bundling Tools
    • Webpack.
    • Gulp to minify code so it's loaded quickly and efficiently into the browser.
    • Parcel.
  • Command Line.
  • Version Control / Source Control
    • Git
  • WordPress.
  • Graphic Design Tools [Photoshop, Adobe Illustrator, Figma).
  • UI Design Principles and Practices.
    • Color and contrast.
    • White Space (spacing between elements).
    • Scale (sizing relative to other elements).
    • Visual hierarchy (arrange elements in order of importance).
    • Typography (text typefaces, sizing)

Back-End:

  • Programming Languages.
    • PHP.
    • JavaScript.
    • Java.
    • Python.
    • C#.
  • Frameworks.
    • PHP (Laravel).
    • Python (Django, Flask).
  • Databases
    • PostgreSQL.
    • MySQL.
    • SQLite.
  • Servers
  • APIs.

Deployment:

  • Static Hosting (Netlify, Github Pages, Heroku, freenom).
  • Cpanel Hosting (InMotion, Hostgator, Bluehost).
  • Methods of deploying (Git, FTP/SFTP, SSH).

Inspirations

  • awwwards.com - to view award winning websites.
  • lapa.ninja - amazing websites for inspiration.
  • landingfolio.com - view beautiful and creative portfolios.

Projects

Build projects and place them on your portfolio but not those from tutorials or courses, otherwise, twitch them into something of your own.

Understand your limitations and be okay to ask for help.

Must build Projects

  1. Personal Website - showcase all your work samples (at least 15), skills and contact information.
  2. App with accounts and Logins.
  3. App that uses external APIs or advanced features.
    1. Google Maps.
    2. Real-Time messaging app.
    3. Airbnb clone.

Beginner Friendly Projects

  1. Restaurant Website - Should have different food items and drinks with prices and images.
  2. Event or Conference Webpage - Can include a registration form, speakers with their images, venue details and schedule. Describe the purpose of the conference or event and category of people that can get benefits from this conference.
  3. Music Store - Can have a collection of songs with genres, then shopping, store, career and contact details of artists.
  4. Photography Site - Company name and image on top of the page, them the contact details of the photographer and a button to view their work.