Fullstack Web Development Course Summary

Sep 23, 2024

Fullstack Web Development Course Notes

Course Overview

  • Instructors: Bo and Tommy
  • Topics Covered:
    • HTML, CSS, JavaScript
    • Frontend Web Development
    • Backend Web Development
  • Goal: Build a fullstack web app

Key Concepts

HTML, CSS, and JavaScript

  • HTML (HyperText Markup Language): Structure of the web page
  • CSS (Cascading Style Sheets): Styling of the web page
  • JavaScript: Functionality of web pages
  • Analogy:
    • Page = House
    • HTML = Structure (rooms)
    • CSS = Style (color of walls)
    • JavaScript = Functionality (what you can do in the house)

Frontend vs. Backend Development

  • Frontend: Visible to users; runs on user's device
  • Backend: Runs on the server; includes database, application logic, and API

Fullstack Development

  • Combination of both frontend and backend development

Tools and Environment

  • Replit: Platform for coding in HTML, CSS, and JavaScript
  • Setup: Create an account, create a new repli, select HTML, CSS, JavaScript

HTML Basics

  • Structure of HTML:
    • <!DOCTYPE html>
    • <html>
    • <head>
    • <body>
  • HTML Tags:
    • <h1> to <h6> for headings
    • <p> for paragraphs
    • <a href="..."> for links
    • <img src="..."> for images

CSS Basics

  • Basic Syntax:
    • Selector { property: value; }
  • Selectors:
    • Element, class, ID, child, adjacent sibling
  • Styling Text:
    • Color, alignment, text decoration, font size
  • Box Model:
    • Margin, padding, border
  • Display Property:
    • Block, inline, none

JavaScript Basics

  • Variables: let, const, var
  • Functions: Create reusable blocks of code
  • Events: Responding to user actions (clicks, inputs)
  • DOM Manipulation: Updating HTML elements with JavaScript

Creating the Movie App

  • HTML Structure: Build nav bar, search form, movie cards
  • CSS Styling: Style navbar, buttons, search form, and movie cards
  • JavaScript Functionality: Fetch movie data from API, update UI

API Interaction

  • Fetch API: Use fetch() to make HTTP requests to external APIs
  • Dynamic Content: Update webpage with movie results based on user search
  • Add Reviews: Allow users to submit reviews for movies

Backend Development

  • Node.js and Express: Set up backend server
  • MongoDB: Use as a database to store movies and reviews
  • CRUD Operations: Create, Read, Update, Delete reviews
  • Error Handling: Handle errors in API requests

Final Project Structure

  • Frontend: HTML, CSS, JavaScript files for UI
  • Backend: Node.js with Express for API; MongoDB for storage
  • Functionality: Fullstack app that allows users to search for movies and submit reviews.

Conclusion

  • End of Course: Understanding of both frontend and backend development; capable of creating a fullstack web application.