Design and Build Websites

By Jon Duckett

This book is intended for two different types of people; anyone who wants to learn how to design and build websites from scratch, and anyone who wants more control over the appearance of their current website(s). All we’re going to need is a browser and text editor. To start, Notepad++ is a perfect editor for what we’re going to do.

Programming is certainly not the main focus of this text, regardless of the amount of lines we’re going to write. Understanding HTML and CSS is of course a language, but one you don’t need to be good at advanced mathematics to learn and master. This book will bring you to around 90% of what you’ll need in the working field; you might have to Google that remaining 10% if you run into it/a problem you can’t fix.

We’ll start with HTML, go into CSS, then end off with some practical knowledge. Here’s some foundational concepts we should understand before getting too deep into the syntax of a new language;

People Access the Web in Numerous Ways

We should know our audience, and how they’re going to interact with the content we make. For one, most of the time we make a website, we;re going to be interacting with that site via a web browser. Think of Chrome, Edge, or Firefox. The browser takes in a URL, or link to a site.

That link your browser uses connects to a web server, or the location that hosts the website you’re trying to visit. Most often you won’t be interacting directly with these web servers, and you can either host your site yourself, or through a third-party company.

You’ll also have to consider the device that your user is viewing your page on. By default, most people consider just two; visiting on a desktop computer, or browsing via a mobile device. Both will have different things like screen measurements and capabilities, but it goes even further than that.

Think of how someone without vision might try to use the internet. Is it impossible for them? Of course not. With the invention of things like screen readers, visually impaired individuals can interact and consume the content of your page, via things like metadata and alternative text. We’ll see examples of these concepts as we keep moving through the text.

The Process of Creating Websites

The process is nearly the same every time, with the variety appearing in the content shown of delivery of said content. It all starts the same way; writing HTML to set up all of the objects, text, and more, CSS to help format and make things pretty, and the inclusion of other languages like JavaScript to make even more interactive pages.

Some sites require a lot more than just some pages and text. Some require gigabytes of storage to maintain all of the information they hold, called databases, but we’ll get there. As of the writing of this text, we’ll use HTML5 & CSS3, which are the most widely accepted standards of website development.

How the Web Works

This is going to be a wild over-simplification, since the objective of this class isn’t understanding how the different layers of connection work.

First of all, you need to connect to the internet, which you’re probably going to do so through an Internet Service Provider, or ISP. Since the web server hosting the website you want to visit probably isn’t local, your browser will have to connect to a Domain Name System server, or DNS. The DNS finds the IP address associated with the link you want, and it gets your browser in contact with the correct web server, which provides you the page.

Next: Chapter 1