Study Notes: Web Development Basics
2.1 Static vs Dynamic Websites
Static Website
o Contains fixed content coded directly in HTML and CSS.
o Each page is separate; changes require manual editing.
o Example: A simple portfolio site with contact details and an about page.
o Startup example: A small landing page showing your company logo, contact info, and
description.
Dynamic Website
o Content changes based on user input or data from a database.
o Built using server-side languages (e.g., PHP, Python, [Link]) or CMS platforms.
o Example: Facebook or e-commerce stores where products and comments update
automatically.
o Startup example: A product catalog that updates prices and availability in real-time.
👉 Key difference: Static = fixed, informational. Dynamic = interactive, database-driven.
2.2 Three Main Components of a Basic Website
1. Structure (HTML)
o Defines the content and layout (headings, text, images, forms).
o Acts as the website’s “skeleton.”
2. Design (CSS)
o Controls the appearance — colors, fonts, spacing, and overall look.
o Makes the site attractive and user-friendly.
3. Functionality (JavaScript or backend)
o Adds interactivity and logic (animations, forms, logins, dynamic data).
o Ensures the site isn’t just static but responds to user actions.
Startup example:
Structure → product descriptions.
Design → brand colors and modern layout.
Functionality → shopping cart and search feature.
2.3 Styling Language of the Web
CSS (Cascading Style Sheets).
Why CSS?
o It is the language used to style content (fonts, colors, spacing, layout).
o HTML provides structure, while CSS ensures visual appeal.
Startup example: Using CSS to make your site use your brand’s colors, add consistent button styles,
and ensure mobile responsiveness.
2.4 Purpose of JavaScript
JavaScript is the main programming language for making web pages interactive.
Functions include:
o Validating forms before submission.
o Creating animations or interactive menus.
o Loading data without refreshing the page (AJAX).
Startup example:
A “live chat” feature to talk with customers.
Showing product availability dynamically.
(Note: The hint about CSS improving appearance fits under 2.3. Here, JS is about functionality.)
2.5 What “www” Stands For
WWW = World Wide Web.
It is a system of interlinked hypertext documents accessed via the internet.
Function: Provides a standard way for users to access websites using browsers.
Startup example: Users type [Link] to access your website. The “www” is part of
the domain that connects users to your web content.
2.6 Homepage and Its Importance
Homepage = The main entry page of a website.
Importance:
o First impression of your business.
o Provides navigation to other sections.
o Sets the brand tone.
Startup example: Your homepage could show your logo, slogan, featured product, and easy links to
“Shop Now” or “Contact Us.”
2.7 Web Browsers
Definition: A web browser is software that allows users to access and view websites on the
internet.
Examples: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge.
Function:
o Requests web pages from servers (using URLs).
o Renders the code (HTML, CSS, JS) into a readable format.
Startup example: Customers use Chrome or Safari to visit your site, where the browser loads your
homepage and displays it visually.
2.8 Hyperlinks
Definition: A hyperlink is clickable text, button, or image that links to another page or
resource.
Used to navigate between sections, pages, or even external sites.
Startup example:
A “Learn More” link on the homepage → directs to “About Us.”
“Buy Now” button → takes users to the checkout page.
2.9 Front-End vs Back-End Development
Front-End Development
o Focuses on the part of the website the user sees.
o Uses HTML, CSS, and JavaScript.
o Handles layout, design, and interactivity.
o Startup example: Designing product pages, menus, and buttons.
Back-End Development
o Manages server-side logic and databases.
o Uses languages like PHP, Python, [Link], or frameworks.
o Handles data storage, user authentication, and security.
o Startup example: Processing orders, managing product inventory, and storing
customer details.
👉 Together, they ensure your startup’s site looks good (front-end) and works correctly (back-end).