Introduction to Web Development
In this section, we'll cover some of the absolute basics you need to know to get started with web dev.
What is Web Development?
Web development is the process of creating websites or web applications that are available over the internet. It combines both design (how a website looks) and functionality (how a website works). Web development is typically divided into two parts:
- Frontend Development:This is what users see and interact with. It includes languages like HTML, CSS, and JavaScript to create the visual structure and style of a website.
- Backend Development: This is what happens behind the scenes. It includes servers, databases, and scripts that process user requests, store information, and send data back to the user's browser, using languages like Python, SQL, and JavaScript (again).
Note: For the purposes of the workshop, we'll only be discussing HTML/CSS. JavaScript will be covered in a future workshop though!
How Websites Work: The Basics
When you click on a link or type a URL (like
www.example.com) into your browser, several things happen
behind the scenes:
- Your browser sends a request over the internet to a server (a computer that stores website files) asking for the content of the page.
- The server processes this request and sends back the necessary files, such as HTML, CSS, images, or JavaScript, to your browser.
- Your browser then reads the HTML file to understand the structure of the page, applies CSS to style it, and runs any JavaScript to add interactivity.
- Finally, your browser renders the website on your screen, showing you the completed page.
Think of this process like ordering a book from an online store:
- You (the browser) place an order for a book.
- The online store's warehouse (the server) processes your order and sends the book to your house.
- You open and read the book (rendering the website) and can enjoy the content that was sent to you.
Each time you click a link or navigate to a new page, a similar request is made. This is how the internet connects you to various websites and information.
HTML and CSS in Web Development
Now that you know how websites work, let's break down the role of HTML and CSS:
- HTML (HyperText Markup Language): This is the standard language for creating web pages. HTML provides the structure of the page, defining elements like headings, paragraphs, links, images, and more. It's like the skeleton of a website.
- CSS (Cascading Style Sheets): This is used to style and layout your web pages. CSS controls colors, fonts, spacing, and positioning of HTML elements. It's like adding skin and clothes to the skeleton, giving the website its look and feel.
In the following sections, we'll dive deeper into each of these technologies, showing you how to build and style your very first web pages.