HTML & CSS QuickStart Guide: The Simplified Beginners Guide to Developing a Strong Coding Foundation, Building Responsive Websites, and Mastering the Fundamentals of Modern Web Design

Introduction

Congratulations on your decision to learn HTML and CSS! These languages are used daily by billions of people on web pages and apps and in countless other forms. Whether you’re planning to build websites, wish to have an informed conversation with a developer, or just want to have a better understanding of the world around you, this book is a great start!

HTML and CSS Are Everywhere

It is nearly impossible to go about your day without encountering HTML and/or CSS. These languages lurk behind every web page, most application screens, television and video game console interfaces, and even the screen of your new smart fridge. You are continually consuming the results of this code but probably rarely stop to think about what’s under the hood. That’s about to change.

My Story

Hello! My name is David. I grew up in a small town outside of Rochester, New York. I spent countless hours of my childhood exploring the beautiful outdoors of upstate New York, Vermont, and New Hampshire via the plentiful hiking trails and campsites.

I didn’t have a computer in my home, but that wasn’t unusual at the time. My interest in technology started early, and video games helped fuel this passion. Once I had access to a computer, I began to teach myself coding in a programming language called BASIC. In high school, I moved on to HTML, CSS, and JavaScript.

When I was deciding what path to take, I considered computer science, software engineering, and other tech-heavy options. I eventually decided to pursue a degree in information technology, which I saw as a bridge between the computer and the human side of tech. I attended the Rochester Institute of Technology and was able to learn from some fantastic professors, many of whom came from non-computer-related backgrounds. They became teachers when the skills they had learned developed into a new industry. These professors helped me to see that sharing skills I have learned can take many forms.

In 2008, after moving to New York City and working in my field for several years, I was offered a position as an adjunct professor at the CUNY City College of Technology, where I rounded out the web design curriculum by introducing different web technologies I used in my everyday life on web development projects. Since then, I have moved on to other schools where I teach a wide variety of classes covering HTML and CSS, JavaScript, PHP, and WordPress. I enjoy the process of teaching, seeing new students’ confidence grow as they feel more comfortable with new ideas, and watching the light bulb blink on when they see how they can use their newfound knowledge.

Outside of teaching, I work for Adobe as a technical account manager supporting the Adobe Experience Cloud collection of products. I still do plenty of freelance web development projects, and when I’m not building things online, I disconnect through hiking or camping on our local trails or in the mountains of Vermont and New Hampshire. At home, I dabble in woodworking and beekeeping. My wife and I work with various animal rescue organizations and are restoring our 1897 Shingle Victorian house in the northwest corner of Connecticut (figure 1).

On-the-job learning has always been a part of my life. Though my education gave me a wide range of skills, the technology industry is continually changing. The number one skill I have developed is learning how to learn. I always find myself researching and learning new tools, techniques, and strategies for the work that I do.

In the spirit of continued learning in an ever-changing landscape, I wanted to write this book to create a quick but comprehensive guide to the tools I see as most valuable and most used in my experience as a web developer.

Why Learn HTML and CSS?

There are numerous reasons why you might have picked up this book. You may be interested in coding and someone suggested that you start with HTML and CSS. Your company may need to build or revamp a website. You may wish to start a web design firm. Or, like me, you might simply have an insatiable desire to learn.

Regardless of your motivations, HTML and CSS are a great place to start learning how to code. The languages require only a text editor and a web browser—two things you already have on your computer. And HTML and CSS offer instant gratification. You can put a few lines of HTML into a text file, save it, then open the file in a browser and immediately see your results.

The instant feedback of writing HTML can be appealing and satisfying to those who do not consider themselves computer experts. Results appear with a few straightforward instructions. Even a basic understanding of how to use these tools can give you a sense of moving from computer user to superuser. While it’s not technically programming, writing frontend markup in languages like HTML and CSS allows you to provide direction to the computer to display content in the precise way you desire.

Q: Is HTML a programming language?

Technically, HTML is not a programming language. HTML stands for hypertext markup language. A markup language "marks up" text with instructions for display—in this case, via a web browser. Programming languages, on the other hand, use logical control statements to direct the flow of the program’s execution. Programs take input and produce output, whereas HTML and related markup languages format existing content. Both are called coding, but there is a subtle difference.

WordPress

WordPress excels at blog and website creation but removes some of the control you have over HTML and CSS code. It’s simple to add a page or blog post, but customizing the overall look and feel of the website, or creating a new website theme, requires knowledge of HTML and CSS. Even if you use WordPress, knowing HTML and CSS will transform your WordPress data entry skills into those of a full-fledged WordPress web developer.

Wix and Squarespace

Wix, Squarespace, and other website-building tools are excellent platforms for building a website. Their easy-to-use interfaces allow you to create a simple site with no knowledge of HTML. Both Wix and Squarespace allow for customization, but some custom HTML, CSS, and JavaScript isn’t possible inside their platforms. Moreover, the website you build cannot be downloaded and used on other web servers. You must continue to purchase their services to maintain your site.

Who Can Benefit from This Book?

Any professional who uses the internet and technology can benefit from knowing HTML and CSS. In the process of writing this book, one of our editors lamented that roadblocks he had encountered in a previous position could have been avoided had he been able to make changes to website code himself. The IT staff and programming team had to handle his requests, slowing down his workflow and creating a more significant burden on the IT department.

Students of Web Development

Are you learning to build websites? This book will give you the foundation you need to understand the two core components of modern web design.

Educators

Will you be teaching web development? This book will help you get ahead of the most common questions your students will ask. It provides step-by-step guidance that will help you bring your students through the learning process with ease.

Science, technology, engineering, and math (STEM) initiatives are proliferating in elementary, middle, and high schools throughout the world. Many educators are pushing the boundaries of their knowledge to bring technology education to students at younger ages. This book works as a guide for students of all ages and can be used to assist teachers who are not highly experienced in the field of web development.

Adjacent Professionals

Perhaps your job doesn’t require you to code websites, but you work with a developer or team that does. Understanding the process will enable you to have informed conversations and be able to advocate for your needs. If you have to hire a web designer, you’ll have a leg up in the interview process, allowing you to make a better hiring decision.

Marketers and graphic artists frequently interact with web designers. Knowing HTML and CSS will benefit your project(s) and enable you to provide more value to your organization.

Professionals Looking for a Quick Reference/Primer

With easy-to-follow examples and plain-speak guidance, this book is excellent as a quick reference or refresher for a tool you don’t use often or for someone getting back into the game.

Web Hobbyists

Many people build websites for their own enjoyment, as a passion project or hobby. This guide will provide a footing to begin building your sites from the ground up.

Employment Roles that Benefit from HTML/CSS Knowledge

If your overall goal is to become a programmer or developer, HTML/CSS is an excellent place to start.

There is a definite benefit in learning HTML and CSS, even if becoming a developer is not your ultimate goal. Since many of our daily activities involve a computer of some sort, it makes sense that more employees are expected to have a basic understanding of how computers display data. Even office managers and assistants are sometimes responsible for modifying web pages, so knowing how to do this gives you a clear advantage over other applicants.

Let’s take a closer look at some of the workplace roles that utilize HTML/CSS:

Artist / Graphic Designer

Since HTML and CSS are essentially a method for displaying content, it makes sense that graphic designers would benefit from having a full understanding of these technologies to showcase their work. Knowledge of the HTML and CSS code necessary to display graphical content on the web gives the designer a tremendous advantage.

Marketer

Marketers often need to generate new materials for sales initiatives. Landing pages and email marketing messages are excellent ways to showcase your product and call customers to action, and these pages use HTML and CSS code. Basic HTML/CSS knowledge will enable you to respond quickly to marketing opportunities.

Writer / Content Provider

In the (not-so-distant) past, reporters and journalists would type their articles then hand them off to others for print layout. Now, with the growth of the internet and blog-driven content, writers often are asked to format their work in a nearly internet-ready format. Even though many publications use content management systems like WordPress, it is often necessary to make edits to the HTML code to ensure proper display.

Social Media Manager

While managing likes, shares, comments, and retweets may make up a large part of a social media manager’s schedule, sourcing and delivering engaging content is vitally important. Knowing how to use links and basic HTML and CSS code will enable the social media guru to better format posts and linked content, giving them a leg up on the competition.

Entry-Level Quality Assurance Engineer

Many quality assurance (QA) professionals are responsible for testing software and websites. Understanding the display code behind the user interface gives a quality assurance engineer an advantage when crafting tests and preparing reports.

Modern QA testing has evolved toward automatic testing procedures. Often, configuring these systems requires knowledge of HTML and CSS.

Nonprofit

Nonprofit organizations have many of the same needs as larger companies, with one significant difference: they typically lack the budget to hire full-time developers. If you are an employee at a nonprofit, you can strengthen your organization by learning HTML and CSS. With web design knowledge, you can build and maintain your organization’s website, design email marketing campaigns, and fully take advantage of social media.

Entrepreneur / Small Business Owner

If you are starting your own business, you already know firsthand that everything costs money and technical skills and know-how are particularly expensive. Knowing how to build your website could save you a fortune!

Even if you can’t design the entire site yourself, providing a mockup of your ideas will save your designer time. And knowing HTML and CSS will help you make better hiring decisions with your technical staff and contractors.

How the Book Is Structured and How You Will Learn

With each chapter, I’ll introduce new concepts via explanation, illustrations, and stand-alone examples. I’ll provide context for each topic, so you’ll know why it will be useful. Where relevant, I will add specifics from my own professional experience.

To add to the learning experience, we’ll be providing you with an actual website that you’ll be working on intermittently throughout the book. The website will be presented to you in need of a whole lot of tender love and care. But by the time you finish this book and have completed all the exercises, you’ll be well on your way to delivering a high-quality, fully functional web product—see Accessing the Coffee Shop Website later in this section for download instructions and more details on this ongoing exercise.

Our objective is to have you finish this book with a solid understanding of HTML and CSS. We’ll accomplish this through a combination of resources, including the book itself, the development of the downloadable Coffee Shop website, and an array of other helpful and educational resources.

Take a moment to visit www.clydebankmedia.com/htmlcss-assets and access your Digital Assets. We’ll be referring you back here for access to various resources throughout the book. For now, though, take a few minutes and watch the short video titled Using Our GitHub Repository.

In addition to the Digital Asset Vault, we’re also hosting several essential resources on the ClydeBank Media GitHub page. Go to www.github.com/clydebankmedia. Find the htmlcss-quickstartguide repository and click to open. Inside you will find all of our source code for this book.

This social code-sharing platform (GitHub) uses the popular Git source code management system. Using Git is helpful if you’re on a team, and it offers benefits for single-developer projects, but using the site’s greater functionalities isn’t essential at this stage of your learning. We’ll cover Git in detail in part IV of the book. For now, just jump right into our GitHub site and explore. You can’t break anything.

The source code inside the htmlcss-quickstartguide repository is organized by chapter and Snippet number. It should be easy to locate any snippet of code found in the book. Moreover, you are free to use any of our coding examples for your own website projects (figure 2).

Use our htmlcss-quickstartguide repository on GitHub to easily copy and paste any code featured in this book.

By the way, a lot of the On Your Own exercises you encounter in this book can be aided by a basic HTML template. We have created a Webpage Starter Template that can be found both in the 00-Introduction folder in GitHub and in its own downloadable file, starter.html inside the Digital Asset Vault at clydebankmedia.com/htmlcss-assets.

starter.html

en>

utf-8>

viewport content=width=device-width, initial-scale=1, shrink-to-fit=no>

Setting Up Your Workspace

One of the great things about working with HTML is that getting started requires nothing more than a text editor and a web browser. From a beginner’s perspective, it doesn’t matter which text editor and web browser you choose, but if you’re serious about your HTML training, you may want to acquire a few specific tools. I’ll mention some tools in asides or callouts, but for now, let’s begin with the basics.

The Importance of Folder Structure

Before you begin writing any code, it’s a good idea to create a folder or directory on your computer where all your website files will live.

While it is certainly possible to put all your files in one folder, this technique will get messy very quickly. Making good choices regarding site organization will save you time and frustration as your site grows. A small site, at a bare minimum, will have a directory for the HTML files (at least an index.html file), and a folder for CSS files and images.

An HTML file, CSS folder, and image folder

You may end up with far more files in your main directory. Moreover, if your website has multiple subsections, you will likely end up with specific directories for each subsection.

Choosing a Text Editor

HTML files are simply text documents saved using the file extension .html rather than .txt. Any browser will display HTML files. Since HTML code is completely text-based, basic programs such as Notepad on Windows, TextEdit on Mac, or gedit on Linux are perfectly valid options for an HTML coder (figure 4).

Windows Notepad with a simple HTML file

However, to make life easier, I recommend obtaining a good code editor. Code editors are text editors specifically designed for laying out HTML code (and other programming languages) in an organized fashion. They employ color coding, indentation, and a host of other features that aid coders in writing and maintaining code.

Again, none of these tools is required to get started, but if you find it difficult to follow or read code in a standard text editor, give one of these programs a try.

Here are the most popular text editors as of the time of publication. Many are free/open-source or available for a small price.

Visual Studio Code

Notepad++

Vim

Emacs

Sublime Text

Each of these editors has its pros and cons, but if you’re having trouble deciding, I’d suggest installing both Visual Studio Code and Notepad++. It may seem strange to employ two editors, but I use Notepad++ for quick, single-file edits and the fully-featured Visual Studio Code for managing larger sites. Either can suit both scenarios, but these are my recommendations. At the end of the day, a coder’s choice of a text editor is a matter of personal preference, and most any option will be fine. If you want a clear-cut recommendation, then I’d say get Visual Studio Code text editor, as most examples and exercises in this book will depict that text editor in action (figure 5).

Visual Studio Code with the same HTML file as in figure 4. Note the file browser tabs, syntax highlighting, and other advanced features not found in Windows Notepad.

Popular Web Browsers

It’s hard to be a web designer without a web browser. Fortunately, all major operating systems include one. For Windows, the default is Edge; for macOS, it is Safari; and most Linux distributions include Firefox. At the time of publication, Google Chrome has the majority of the browser market share (figure 6).

Browser market share as of October 2020

Source: gs.statcounter.com

You can use any browser to get started, but it is essential to understand that different browsers may render content differently. When building a website, it is a best practice to test your results in multiple browsers to ensure that content renders according to your expectations. Some browsers allow a wider variety of coding styles for the sake of compatibility. In other words, they are more forgiving than others (as in, they allow you sloppier code and try to guess as to what you meant). Other browsers are stricter and require code to be structured in a precise way to display correctly.

If you do not want to spend time comparing different browsers, the easiest and safest pick at the time of publication is Google Chrome. Chrome is probably the best browser to work with at the moment because it firmly adheres to established web design standards. All of the browsers featured in figure 6 are available for free download.

Image Editing Software

You are probably familiar with image editing software, from Adobe’s signature Photoshop to the very basic Microsoft Paint. You may not know, however, that image editing software is an essential component of your HTML workspace. Even if you are not planning on embarking on any significant graphic design work, you will still need to edit images so they will render optimally on the internet.

Sizing: Image size is one of the essential considerations when editing images. Image files must be downloaded from the web by a browser, so failing to optimize your images can lead to slow load times for your website. Images captured on a camera or smartphone are too large to display on a website and must be resized by image editing software.

Format: Many web browsers accept a wide array of image files, but .jpg, .png, and .gif are the most common. JPEG (.jpg) files are great for photos, while .png and .gif files work well for illustrations or smaller graphics. In cases where an image you want to use is not in the format you desire, image editing software helps you convert it to the desired format.