Confident Web Design

Master the Fundamentals of Website Creation and Supercharge Your Career

Kenny Wood

• Publisher: Kogan Page
• Year: 2018
• ISBN:
  9780749481018
• Edition: 1
• Topic: Conception
• Subtopic: Conception Web

This is your ultimate beginner's guide to the skills of web design. Confident Web Design takes you on a practical journey during which you will discover the techniques to allow you to publish a basic website from scratch. Whether you want to develop web design skills to set yourself apart in a competitive job market, power your entrepreneurial pursuits by creating a new website to showcase your product or business idea, or simply boost your professional performance in your current job, Confident Web Design is the perfect beginner's resource.

In Confident Web Design, each chapter is supported by exclusive online exercises to allow you to put your knowledge into practice and perfect the techniques. The book's structure is designed to break down each skill into manageable chunks, aided by helpful examples, technical term glossaries, tables and images to support you as you learn. Written in accessible and engaging language, author Kenny Wood shares his passion and enthusiasm for modern web design through this essential guide.

Online Resources include practical exercises for readers to test out their new skills and consolidate their learning.

PART ONE

HTML

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 http://indigomelody.com/confident-web-design/files. 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.

02

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

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	Metadata is data that describes other data

<tag>

<tag2>

content

</tag2>

</tag>

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 e...