Introduction to Web Development
Web development is the art and science of building websites and web applications. It involves using programming languages like HTML, CSS, and JavaScript to bring content to life on browsers. Front-end development focuses on what users see and interact with, while back-end development powers the server, databases, and logic behind the scenes. This post is dedicated to the front-end, where we learn how to structure and style web content using HTML and CSS.
History of the WWW and Introduction to HTML
The World Wide Web (WWW) was invented by Tim Berners-Lee in 1989. It started as a way for researchers to share documents online. The first websites were simple text pages using HTML (HyperText Markup Language), the core language that structures content on the web.
HTML uses tags to define elements such as paragraphs, links, images, and more. For example:
<p>This is a paragraph.</p>
<a href="https://example.com">Click me</a>
Headings and Lists
HTML allows us to structure our content using headings (<h1> to <h6>) and lists, including:
-
Ordered lists (
<ol>) for steps or rankings -
Unordered lists (
<ul>) for bullet points
Example:
<h2>My To-Do List</h2>
<ul>
<li>Learn HTML</li>
<li>Practice CSS</li>
</ul>
Digital Footprint & Mini HTML Web Page
Your digital footprint is the trail of data you leave behind while using the internet. Building your own mini HTML page is a great way to understand this:
Be mindful of what you post—every bit adds to your online identity.
Introduction to CSS
CSS (Cascading Style Sheets) gives your HTML style and design. It lets you control colors, fonts, spacing, layout, and more.
CSS can be added inline, internally, or via external files (.css).
Image Licensing and Intellectual Property
Using images online requires understanding image licensing and respecting intellectual property. Always check if an image is:
-
Public domain
-
Creative Commons licensed (with or without attribution)
-
Copyrighted (requiring permission or payment)
Use websites like Unsplash, Pexels, or Pixabay for free licensed images.
Web Design: Styling Elements
Good web design combines structure and style. With CSS, you can:
-
Change colors:
color,background-color -
Adjust text:
font-family,font-size,text-align -
Style borders, margins, and padding
Example:
h1 {
color: teal;
font-family: Arial, sans-serif;
}
Box Model and Element Styling
In CSS, every element is a box:
-
Content (text/image)
-
Padding (space around content)
-
Border
-
Margin (space outside the border)
Example:
div {
padding: 20px;
border: 2px solid black;
margin: 10px;
}
Introduction to Classes, IDs, div, span, and Tables
To style specific elements, we use:
-
.class– reusable styles -
#id– unique styles -
<div>– block container -
<span>– inline container -
<table>– tabular data
Tables organize data:
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>25</td></tr>
</table>
Flexbox
Flexbox is a powerful layout tool in CSS that arranges elements in rows or columns, and easily handles spacing, alignment, and reordering.
Example:
.container {
display: flex;
}
Flexbox Properties
Important properties of Flexbox include:
-
justify-content: aligns items horizontally -
align-items: aligns items vertically -
flex-direction: sets row or column layout -
flex-wrap: allows wrapping items
Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Linking Pages and Pseudo-classes
To create a multi-page website, use links:
Pseudo-classes style elements based on user interaction:
Other pseudo-classes include :active, :visited, :first-child, etc.
Final Thoughts
Mastering HTML and CSS opens the door to endless creativity on the web. Whether you want to create a personal blog, a portfolio, or a business website, these building blocks are essential. Start experimenting, keep learning, and build something amazing!
If you're learning this in a classroom setting, platforms like Code are a great place to practice. Complete your assigned web development level there! If you're learning independently, you can watch online tutorials on YouTube or sites like Khan Academy and FreeCodeCamp to guide you through the basics.
For writing code, we recommend using Notepad++, a free and simple text editor that supports HTML and CSS syntax. It makes your coding cleaner and easier to read.
