Intro to Web Design and Development 

By /

Back to: Create a Static Student Website

A brief introduction to how the web works, the roles of the server and browser, and the core underlying web technologies of HTML and CSS

How the Web Works

When a user types in a URL (Uniform Resource Locator) for a web site, the request is sent to a web server that then serves the requested web page to the browser that then is able to render the page for the user.

View Video Lesson
How the web works: web servers (hosts) and browsers (clients)
  1. Web Server (Host)
  2. Browser (Client)

What’s under the hood of a web page?

If you looked at the source code of a web page, you’ll find HTML. HTML is the predominant underlying markup technology behind the web and is often times the file name extension (e.g. index.html) of the web page. It looks like this:

<html>
<head>
<title>Title of the Web Page</title>
</head>
<body>
<h1>Large Heading</h1>
<p>This is a paragraph of text. Lorem ipsum et dolorem.</p>
</body>
</html>
view raw barebones.html hosted with ❤ by GitHub

HTML stands for Hypertext Markup Language. It is the standard markup language for creating web pages and web applications. HTML elements are the core building blocks used to describe the overall structure of a web page and its content. As a markup language, HTML provides a way to “mark up” content in order to create meaningfully structured documents using semantically appropriate elements for different types of content, such as text headings, paragraphs, lists, links, quotes and other items including images and videos.

HTML is for Markup, CSS if for Styling

Another important web technology is CSS. CSS is the predominant underlying styling technology behind the web and is typically in a separate file (e.g. style.css) and is linked to each HTML file. It looks like this:

body {
background: red;
font-family: sans-serif;
text-align: center;
display: grid;
align-content: center;
min-height: 100vh;
}
h1 {
font-size: 48px;
text-transform: uppercase;
margin: 0;
}
p {
color: white;
}
view raw barebones-demo.css hosted with ❤ by GitHub

CSS stands for Cascading Style Sheets. It is a “style sheet language” used for describing the presentation of a HTML document. As a style language, CSS was designed primarily for the presentation of content, such as a web page’s layout, colors, and typography.

When you combine HTML with CSS, websites can be customized to be beautiful and more usable.

HTML and CSS
HTML only on the left, HTML and CSS on the right.

For more introduction-level information on frontend web development, check out this blog post.