Confident Web Design
eBook - ePub

Confident Web Design

How to Design and Create Websites and Futureproof Your Career

Kenny Wood

Share book
ePUB (mobile friendly)
Available on iOS & Android
eBook - ePub

Confident Web Design

How to Design and Create Websites and Futureproof Your Career

Kenny Wood

Book details
Book preview
Table of contents

About This Book

Do you need a website to support your freelance business or entrepreneurial venture? Or are you considering a career in web design? Maybe you're looking for your next career pivot, or you're simply seeking skills to give your CV that competitive edge? Wherever you are in your career, Confident Web Design can help. The ultimate beginner's guide to designing, building and publishing basic websites, this book features exclusive online exercises to help you practice your new skills in context. Covering the basics of HTML, CSS and JavaScript, as well as giving you a thorough grounding in the real-life application of these principles, this book provides helpful examples, explanations of technical terms, and clear, easy-to-understand language - meaning your first website is only a few chapters away.Taking you on a practical journey to publish a basic website from scratch, the book's structure is designed to break down each skill into manageable chunks. Wherever you are in your career, let Confident Web Design give you that cutting edge with vital programming and design skills.About the Confident series...
From coding and web design to data, digital content and cyber security, the Confident books are the perfect beginner's resource for enhancing your professional life, whatever your career path.

Frequently asked questions
How do I cancel my subscription?
Simply head over to the account section in settings and click on “Cancel Subscription” - it’s as simple as that. After you cancel, your membership will stay active for the remainder of the time you’ve paid for. Learn more here.
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is Confident Web Design an online PDF/ePUB?
Yes, you can access Confident Web Design by Kenny Wood in PDF and/or ePUB format, as well as other popular books in Business & Business Skills. We have over one million books available in our catalogue for you to explore.


Kogan Page


In this section we will be learning how to code using the HTML markup language. On this journey we will be building the HTML structure of our website and introducing the various tags that form the makeup of the HTML language and modern webpages. We will introduce best practices and ways of working that will enable you to write high-quality code that could be used in a production environment.
This journey through the use of HTML will see us tackling the anatomy of the tags that form the makeup of the HTML language, before looking at how we use these tags to render text, hyperlinks, images, tables, lists and forms. These elements form the basis of all webpages, and learning how to use them will empower you to be able to create an abundance of diverse and interesting structures for your website.
Each chapter will introduce new concepts that we will be putting into practice. Each concept will follow on from and build upon the previous one, so it is important that you carry out each activity before moving on to the next concept, in order to ensure that you are always working from the same codebase as the book. The chapters will expect you to follow the code examples, and write the same, or in some cases very similar, code in your text editor in order to put into practice what is being taught in each section. At the end of this HTML section, you will have the shell of your website built, ready to be styled using CSS in the subsequent section.
Some of the section exercises will require additional files, which can be downloaded from This folder contains subfolders for each chapter, which will contain both the assets required for the exercise and an example of the desired outcome from the exercise. You should compare your code to that of the example after each section to ensure you have achieved the outcome of the activity.

HTML Part 1

What we will learn in this chapter

This chapter will cover the basics of understanding HTML, as well as tags, text, links, images, tables and lists.


HTML basics

Let’s first introduce HTML again in slightly more detail. We know already that HTML is the language responsible for explaining our content and webpage structure to the web browser for it to interpret and display to the end user; now let’s explore just how that works.
An HTML page is formed of many different HTML elements. Elements are represented by tags. A tag is a piece of code that we wrap around our content to describe what type of content it is; it is effectively a label for our content. We might use a tag to explain to the browser that our snippet of text is a header, or a paragraph, or even a bullet point list.
These tags are interpreted by the browser, but not displayed to the end user. They are simply used to tell the browser what the content is and therefore how to display it.

HTML tags

Let’s break down the anatomy of an HTML tag. HTML tags typically come in pairs: an opening tag and a closing tag. The first tag tells the browser where our element starts and the second tag tells it where our content ends. We call these tags the ‘opening tag’ and the ‘closing tag’, and they have slightly different syntaxes.
Table 2.1 HTML glossary
HTML elements
The building blocks of an HTML page, it is an individual component of the HTML document, which usually houses some content of some form
Metadata is data that describes other data
Let’s see some examples of how these tags are used in the wild, looking at two examples where we use tags to mark up text. We will explore this in more detail later in the chapter.
You will notice how the opening tag is merely a word contained in angled brackets, while the ending tag is the same, but with a forward slash after the opening angled bracket. Tag pairs will always contain the same opening tag name as the closing tag name.
It is important to note that while most tags come in pairs, with an opening and a closing tag, sometimes tags can be just an opening tag, without the need for a closing tag. We will explore this concept later in this chapter.
Tags can also be nested within other tags; this is useful for when you want a piece of content to sit inside another piece of content. For example, you might want some text inside a box; in this case you would nest the text tag inside the tag for your box. Let’s see a syntax example below:
Tags can only ever be closed directly after the opening tag. Think of it like putting a box inside another box; you need to close the inside box before closing the outside box. These tags within tags are referred to as nested elements.
When nesting elements inside other elements, it is considered best practice to indent the nested element by one tab space. This improves readability and helps us to easily see the nesting structure, and thus deduce how the tags are nested. This helps to stop documents from becoming messy and confusing. Conveniently, Sublime Text has an inbuilt tool to auto nest our tags. When we create a new tag inside another tag, Sublime Text will automatically indent the tag for us. On top of this, we are able to highlight all of the text in a document, then head over to edit > line > reindent – this will then auto-indent the entire document. Look at how much easier the text in Figure 2.1 is to read now that we have auto-indented it.
An illustration shows an editor with a syntax.
Figure 2.1 details
The syntax reads as follows:
  1. Tag within angle brackets.
  2. Space and tag within angle brackets.
  3. Double space and tag within angle brackets.
  4. Double space content.
  5. Double space and back slash tag within in angle brackets.
  6. Space and back slash tag within angle brackets.
  7. Slash tag within angle brackets.
The first and the seventh line in the syntax has labels.
There are many different tags that can be used in our HTML document. Let’s use some now by starting our first webpage build.

Creating our website template

We will start by creating the foundation for our HTML document. Follow along with the steps below to put into practice what we are learning.
Each HTML document will start with the same tags, which simply describe your webpage as a whole to the browser. Start by installing and opening up your text editor of choice and creating a new file. Call it ‘index.html’. Inside this blank document, we will be constructing our very first webpage.
We’ll start by declaring the document type. This snippet of code is responsible for explaining to the browser what our document is and how to display it. The tag must appear only once in a document, and must appear at the very top of the page, before any other code is written.
The syntax of the code is as follows:
Nice and simple, right? This text simply tells the browser that this is an html document, and to treat it as such. This line of code isn’t actually an HTML tag, it is merely a declaration, an instruction to the web browser.
Once we have declared our file an HTML document, we can start writing our HTML code, so what b...

Table of contents

Citation styles for Confident Web Design
APA 6 Citation
Wood, K. (2020). Confident Web Design (1st ed.). Kogan Page. Retrieved from (Original work published 2020)
Chicago Citation
Wood, Kenny. (2020) 2020. Confident Web Design. 1st ed. Kogan Page.
Harvard Citation
Wood, K. (2020) Confident Web Design. 1st edn. Kogan Page. Available at: (Accessed: 15 October 2022).
MLA 7 Citation
Wood, Kenny. Confident Web Design. 1st ed. Kogan Page, 2020. Web. 15 Oct. 2022.