Web & App Development 101: Building Digital Experiences

Course Overview:
This course covers the essentials of creating websites and applications, from design fundamentals to development practices. Students will learn the basics of front-end and back-end development, user experience (UX) design, and the tools and languages used in modern web and app development.

Module 1: Introduction to Web & App Development

• Understanding Websites vs. Applications

  • Differences between websites, web apps, and mobile apps

  • Key components: front-end, back-end, and databases

• Overview of Development Stacks

  • Front-end: HTML, CSS, JavaScript

  • Back-end: server-side programming (Node.js, Python, etc.)

  • Databases: SQL vs. NoSQL, examples (MySQL, MongoDB)

Module 2: Designing User Interfaces (UI) and User Experiences (UX)

• Fundamentals of UX/UI Design

  • Principles of good UX: simplicity, accessibility, and responsiveness

  • UI basics: layout, color theory, typography, and consistency

• Wireframing and Prototyping

  • Creating mockups of your site or app layout

  • Tools like Figma, Adobe XD, or Sketch for wireframing and prototyping

• Mobile-First and Responsive Design

  • Adapting designs for different screen sizes

  • Using CSS frameworks like Bootstrap or Tailwind CSS

Module 3: Front-End Development Basics

• HTML and CSS Fundamentals

  • HTML structure: tags, elements, and attributes

  • CSS basics: styling, positioning, colors, and layout

• JavaScript Essentials

  • JavaScript syntax and basics (variables, functions, events)

  • Adding interactivity to websites (form validation, dynamic content)

• Introduction to Front-End Libraries and Frameworks

  • Overview of popular libraries like jQuery, React, or Vue.js

  • Building dynamic, component-based front-ends

Module 4: Back-End Development Basics

• Introduction to Server-Side Development

  • Understanding server requests and responses (HTTP methods)

  • Basics of server-side languages: Node.js, Python, or PHP

• Connecting to a Database

  • Setting up databases and creating basic CRUD operations

  • Introduction to SQL databases (MySQL, PostgreSQL) and NoSQL databases (MongoDB)

• Introduction to APIs (Application Programming Interfaces)

  • What APIs are and how they work (RESTful and GraphQL)

  • Using APIs to fetch and send data between front-end and back-end

Module 5: Building and Deploying a Website or Application

• Version Control and Collaboration with Git

  • Basics of Git and GitHub for version control and collaboration

  • Committing changes, branching, and merging code

• Testing and Debugging

  • Basic techniques for debugging front-end and back-end code

  • Tools like Chrome DevTools, console logging, and unit testing

• Deployment and Hosting

  • Overview of hosting services: GitHub Pages, Netlify, Heroku

  • Introduction to domain names and SSL certificates

Module 6: Practical Exercises and Final Project

• Hands-On Practice

  • Exercises on creating simple HTML/CSS pages, JavaScript interactions, and basic server setup

  • Building a simple database connection and CRUD functionality

• Final Project

  • Create a functional website or app with front-end and back-end components

  • Emphasis on a cohesive design, functional UI, and working server connection