Web Development 101 Notes

Overview of Web Development

• Web development is a key job role in the tech industry, with a platform of nearly 5 billion daily active users.
• The potential of web development includes curing diseases, eliminating poverty, and advancing science but is often used for memes, drama, and profit.
• Focus on essential concepts necessary for building full-stack web applications.

Understanding the Internet

• Internet Definition: A network of billions of connected machines.
• Birth of the Internet: Established on January 1st, 1983, with the Internet Protocol Suite.
• Communication Protocol:
  • Uses unique IP addresses to identify computers.
  • Data is sent in packets via Transmission Control Protocol (TCP).

Difference Between Internet and Web

• Internet: Hardware infrastructure.
• World Wide Web: Software that allows access to web pages via HTTP and URLs.
• Web Browser: The client that renders information visually on screens.

Domain Names and DNS

• Domain Names: Unique identifiers (e.g., fireship.io, example.com) registered through registrars overseen by ICANN.
• Domain Name System (DNS): Maps domain names to IP addresses, functioning like the internet's phone book.

HTML Basics

• Hypertext Markup Language (HTML): Structure of web content.
  • Elements: Comprised of opening and closing tags, attributes, and content.
  • Document Object Model (DOM): Hierarchical structure of HTML elements.
• Head and Body: Head contains metadata; body includes visible content.
• Common Elements:
  • div: Defines sections of web pages.
  • a (anchor): Links to different pages via URLs.

CSS Basics

• Cascading Style Sheets (CSS): Styles and layouts for HTML.
  • Inline Styles: Applied directly to elements.
  • Selectors: Define which elements to style (e.g., classes).
  • Layout and Positioning: Use of padding, margins, borders, and positioning properties (relative, absolute, fixed).
  • Responsive Design: Achieving a good look on all devices using media queries and layout techniques like Flexbox and Grid.

JavaScript Basics

• JavaScript (JS): Adds interactivity to web pages.
  • Script Tag: Used to include JS in HTML.
  • Event Handling: JS responds to user actions like clicks.
  • Data Structures: Arrays and objects (prototype inheritance).
  • Front-end Frameworks: React, Vue, Angular for UI representation.

Back-end Development

• Node.js: A JavaScript runtime for server-side applications.
  • Uses a non-blocking event loop for efficient handling of connections.
  • Modules: Exporting and importing code files.

Delivering Web Content

• Server-Side Rendering (SSR): Client requests HTML from server, generating content dynamically.
• Single Page Applications (SPAs): Minimal server rendering with client-side JS rendering.
• Static Site Generation: Pre-built HTML pages uploaded to servers.
• Performance Optimization: Use tools like Lighthouse to measure metrics.

Full-Stack Frameworks and Tools

• Framework Examples: Next.js, Ruby on Rails, Laravel for abstraction of complex tasks.
• Module Bundlers: Tools like Webpack for packaging code.
• Databases: Essential for storing user data and implementing authentication.

Deployment and Hosting

• Web Servers: Tools like Nginx and Apache for serving files.
• Cloud Providers: AWS or decentralized blockchain options.
• Containerization: Using Docker for scalability.

Conclusion

• Learning web development is overwhelming but manageable; many rely on resources like Google.
• Congratulations on passing Web Development 101!