A Walk Through to Building Your Website with HTML5 and CSS3

By iamraymondke

iamraymondke

If you can imagine a time before the invention of the Internet. Websites didn’t exist, and books, printed on paper and tightly bound, were your primary source of information. It took a considerable amount of effort and reading to track down the exact piece of information you were after.

Today you can open a web browser, jump over to your search engine of choice, and search away. Any bit of imaginable information rests at your fingertips. And chances are someone somewhere has built a website with your exact search in mind.

I’m going to show you how to build your own websites using the two most dominant computer languages - HTML and CSS.

Before we begin our journey to learn how you can build websites with HTML and CSS, it is important to understand the differences between the two languages, the syntax of each language, and some common terminology.

What is HTML?

HTML, an acronym for HyperText Markup Language, is a computer language for creating websites and web applications. Consisting mainly series of codes usually written in a text file and saved as HTML, code written in the HTML language translates into a beautiful, well-formatted text or a combination of text and media when viewed through a browser. Read more

What is CSS?

CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), CSS comes through and specifies your document’s style - page layouts, colors, and fonts are all determined with CSS. Think of HTML as the foundation (every house has one), and CSS as the aesthetic choices. Read more

The final product

Take a look at it, and keep it in mind

Check Quibic Dribble Page

Know Your HTML

With our introduction to HTML and CSS complete, it’s time to dig a little deeper into HTML and examine the different components that make up this language.

In order to start building websites, we need to learn a little about which HTML elements are best used to display different types of content. It’s also important to understand how elements are visually displayed on a web page, as well as what different elements mean semantically.

Using the proper element for the job goes a long way, and we’ll want to make well-informed decisions in the process.

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Page Structure">
<meta name="author" content="test">

<link rel="stylesheet" href="styles.css">

</head>

<body>
<h1>HTML5 Page Structure</h1>
<script src="js/scripts.js"></script>
</body>
</html>
<script src="js/scripts.js"></script>
</body>
</html>

Know Your CSS

CSS is a complex language that packs quite a bit of power.

It allows us to add layout and design to our pages, and it allows us to share those styles from element to element and page to page. Before we can unlock all of its features, though, there are a few aspects of the language we must fully understand.

First, it’s crucial to know exactly how styles are rendered. Specifically, we’ll need to know how different types of selectors work and how the order of those selectors can affect how our styles are rendered. We’ll also want to understand a few common property values that continually appear within CSS, particularly those that deal with color and length.

Let’s look under the hood of CSS to see exactly what is going on.

Box Model

We’ve familiarized ourselves with HTML and CSS; we know what they look like and how to accomplish some of the basics. Now we’re going to go a bit deeper and look at exactly how elements are displayed on a page and how they are sized.

Box Model

In the process, what is known as the box model and how it works with HTML and CSS.

Positioning Content

One of the best things about CSS is that it gives us the ability to position content and elements on a page in nearly any imaginable way, bringing structure to our designs and helping make content more digestible.

There are a few different types of positioning within CSS, and each has its own application. We’re going to take a look at a few different use cases — creating reusable layouts and uniquely positioning one-off elements — and describe a few ways to go about each.

Typography

The field of web typography has grown substantially over time. There are a couple of different reasons for its rise in popularity; one widely acknowledged reason is the development of a system for embedding our own web fonts on a website.

In the past, we were limited to a small number of typefaces that we could use on a website. These typefaces were the most commonly installed fonts on computers, so they were the most likely to render properly on-screen. If a font wasn’t installed on a computer, it wouldn’t render on the website either. Now, with the ability to embed fonts, we have a much larger palette of typefaces to choose from, including those that we add to a website.

While the ability to embed fonts gives us access to countless new typefaces, it’s also important for us to know the basic principles of typography.

Backgrounds & Gradients

Backgrounds have a significant impact on the design of a website. They help create a site’s look and feel, establish groupings, and assign priority, and they have a considerable influence on a website’s usability.

background-image: linear-gradient(90deg, #020024 0%, #090979 35%, #00d4ff 100%);

Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combination of these. As we decide how to implement these backgrounds, we should keep in mind that every background contributes to the overall appearance of our website.

Lists

Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.

<ul style=”list-style-type:circle;”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

When we want to use a list on a website, HTML provides three different types to choose from: unordered, ordered, and description lists. Choosing which type of list to use — or whether to use a list at all — comes down to the content and the most semantically appropriate option for displaying that content.

Forms

Forms are an essential part of the Internet, as they provide a way for websites to capture information from users and to process requests, and they offer controls for nearly every imaginable use of an application. Through controls or fields, forms can request a small amount of information — often a search query or username and password — or a large amount of information — perhaps shipping and billing information or an entire job application.

<form>
First name:<br>
<input type=”text” name=”firstname”><br>
Last name:<br>
<input type=”text” name=”lastname”>

</form>

We need to know how to build forms in order to acquire user input. We’ll discuss how to use HTML to mark up a form, which elements to use to capture different types of data, and how to style forms with CSS.

Organizing Data with Tables

HTML tables were created to provide a straightforward way to mark up structured tabular data and to display that data in a form that is easy for users to read and digest.

When HTML was being developed, however, CSS was not widely supported in browsers, so tables were the primary means by which websites were built. They were used for positioning content as well as for building the overall layout of a page. This worked at the time, but it was not what table markup was intended for, and it led to many other associated problems.

Fortunately, we have come a long way since then. Today tables are used specifically for organizing data (like they should be), and CSS is free to get on with the jobs of positioning and layout.

Writing Your Best Code

There’s a lot to learn — different elements, attributes, properties, values, and more — in order to write HTML and CSS. Every lesson until this point has had the primary objective of explaining these various components of HTML and CSS, in hopes of helping you to understand the core fundamentals of both languages. This lesson takes a step back and looks at a more abstract picture of HTML and CSS.

More specifically, this lesson focuses on the best coding practices for both HTML and CSS. These coding practices serve as an overarching framework for writing HTML and CSS. They apply to every lesson and should always be kept in mind when programming.

When you’re reviewing these best practices think about how they may be used in other areas of programming languages, too. For example, the use of comments to organize code (as we cover in this lesson) is beneficial in all programming languages. Keep an open mindset and consider how you can fully utilize each practice.

Conclusion

Join Microverse a global school for remote software developers where students learn through remote pair programming and don’t pay anything until they get a job.