Exciting Web Development Journey – Pie Shop Website 1/5

Overview

Welcome back to Sharing Is The Key. This post is unique because we will continue our journey based on the fundamentals we covered in the first and second posts of this Web Development Journey series. Here, you will continue learning about web development foundations and how those concepts fit together to help you build a functioning website from scratch. We are going a little bit deeper into some important concepts to strengthen your knowledge about Web Development. Therefore It will be five parts, let’s get started with the first one.

Scenario

Your close friend Bethany has a flourishing small store that offers what you deem to be the finest and most delicious pies ever baked. So when she said she needed some help to get her pie shop online, well, you leap at the opportunity to help make her dream come true.

Learning goals

Building websites need a bit of expertise through various fields, and by starting soon, you begin to learn step by step about each of these building blocks.

  1. You’ll learn how to use HTML to organize content on your site
  2. How style sheets build the website’s look and feel, and all about the web’s programming languages
  3. JavaScript, which brings interactivity and actions to your website
  4. You’ll learn how to create a website that stands squarely on these pillars, touches on some sophisticated browser functionality, and runs just as well on mobile devices as it does on your laptop

What you will need

  1. VS Code, the cross-platform code editor. Or one of your preference.
  2. Docker Desktop latest stable version. You can see how to set it up here.
  3. Familiarity with at least one programming language. You don’t need to be an expert.
  4. A computer running one of the following:
    • Windows: Windows 10 Home or Professional
    • Mac: macOS 10.9 or later
    • Linux: Ubuntu, Debian, Red Hat, Fedora, or SUSE

Getting Started

Let’s git clone the SITK-html-css-js-getting-started project to save some time.

I’m going to use Ubuntu WSL2 in my Windows 10 notebook to have the best performance for this DevContainer environmen. In your terminal, type the following command and hit Enter.

git clone https://github.com/sitknewnormal/SITK-html-css-js-getting-started "SITK-PieShop"

This command will pull SITK-html-css-js-getting-started source code from our Git Hub repository and copy it into the SITK-PieShop new folder.

Move into the SITK-PieShop project folder and open the VS Code by running the following commands.

cd ./SITK-PieShop && code .

It will open SITK-PieShop project folder in Ubuntu WSL version 2 in Windows 10.

  • Let’s open the devcontainer.json file, change the Dev Container name to “SITK – Pie Shop.” and save it.

Click on “Reopen in Container” button to reload the project inside the Dev Container with Git and Live Server installed.

If everything went well you should see “Dev Container: SITK – Pie Shop.” green indication in the status bar on the left bottom corner in your VS Code. Pretty cool huh!

Now let`s step back a little bit to have a very comprehensive explanation about Web Development and build a proper foundation to continue with the Pie Shop website later.

Building Web Pages

Introduction

You’ll hear more about what HTML is, its function, and how it communicates with various parts of a website. You’ll get acquainted with popular features, discover how search engines interpret a web page and figure out how to validate HTML code on your pages. So, let’s begin by figuring out what HTML stands for and what it really is.

What does HTML really mean?

HTML stands for Hypertext Markup Language. Now, let’s take this step by step. Hypertext is simply a single term that refers to web documents connected using a hyperlink. Now, for a second, take the hyper prefix out of the equation. We are actually suggesting that there are text documents joined together by links, which is the web’s foundation. Then you might be curious, why is the hyper part of the name? Anytime you hear the word hyper, it is meant to make something larger, like hyperspace. So as you navigate from one website to the next, all of them are connected by a chain of connections that bind together conceptually, giving them the term “the internet web.”. The markup language now applies to the code we write to build the documents and, in many cases, connections between these documents. Today, what is called HTML elements are the building blocks for the markup language.

Digging deeper in HTML Element

HTML elements are building blocks from a web page. Much like the Lego brick is the building block of this town here, HTML elements stick together to create a web page structure.

Well, let’s look at it in the sense of a really simple website. From this web page, we have a few options available to us to look at the underlying code.

First, we can right‑click on the page and select view page source. It opens a new tab with the HTML of the page.

It’s okay, and it works all right for a minimal web page like this one. But once you move on to a real website, things can change just a little bit. For a more real‑world example, let’s take a look at shareisthekey.com.

And we’ll right‑click and choose the “View page source” popup menu option, and as we scroll here a little bit, you can see that quickly things get a little bit indecipherable.

So let’s close this out and try a different way. This time, instead of right‑clicking and choosing view source, I’m going to select Inspect.

From here, you get a better sense of the page. The elements are collapsible, and even on a bigger page, I can scroll up to the top and get a sense of the structure of what’s happening within this web page.

Now I can hover over an element and select one, and what you see here is commonly called markup. And depending on what I choose, if I hover over an element, it will be highlighted on the page.

Every HTML page comprises a series of HTML elements that build on one another like a series of bricks that, when set together just right, make a house. So let’s find out what makes each element different.

Elements, Tags, and Attributes

Returning to the simple web page example, we can see that it’s built of different elements when we look at the HTML page. Now, if we take a look at these elements just a little bit closer for the moment, you’ll see that each element has at least two parts. The first part is what’s called a tag. While every page consists of building blocks, which are the elements, each element is identified by its tag. An element’s tag tells you what the element is and the different roles on the page.

We’ll dive into those roles and meanings in a moment, but for now, when we look at this page, you can see that it’s built from a series of elements, where each one has its tag, html, head, title, body, h1, h2, h6, p, and img for images.

Let’s look at the image element just a little bit closer. This element has the img tag, but it also has some additional information associated with it. The src and title parts of the element are what are known as attributes. Now, this makes sense because if I wanted to describe myself to someone, I might say I’m a person, which equates to the element’s tag, and I might say that my name is John, and I have brown eyes and brown hair, and these are all attributes of who I am as a person. Similarly, the image element, which has the img tag, includes the src and title attributes. Now different attributes do different things. In the image element’s case, the src attribute tells the web browser where to look on the server for an image file. This way, if the browser can find the image, it knows how to display it on the screen. The title attribute gives us a title or a bit of description about the element. Notice how, when I hover over the image, the title appears, and the title attribute makes this possible.

There are many HTML elements to choose from, and the Mozilla Developers Network is one of the best references to learn more about HTML elements and web APIs. There are content sectioning elements, elements specifically for text content, elements for inline text. And what we mean by semantics here is by using elements that describe information about the text that’s within a web page. We’ll get into this more as we go along. There are image and multimedia elements, embedded content. The last ones are for a few of your more advanced scenarios. Scripting, which you’ll get familiar with soon. Ways of showing edits; presenting tabular information; web forms; the way you’re going to collect user data; elements that allow you to interact with the page; Web Components that give you the chance to create custom elements. So as you journey through learning about HTML, this reference can be handy to you.

Using Common Elements with high productivity

Now, along the way, I’d like to introduce you to Emmet, a tool that makes it so much easier for us to write HTML code. Emmet is all about shortcuts so that I can type a few characters, press the Tab key, and it’ll fill in the rest for me. So here I want to start by building the basics that I need for an HTML5 page. Here I’ll type ht, and you can see the autocomplete even comes up, and I want an HTML5 page, so I can select html:5, which creates a stub for the HTML page for me.

Now within the body of the page, I can type h1, and when I hit Tab, that creates an h1 element for me, and it even positions my cursor between the two elements so I can immediately start typing something that’s wrapped around by that element. So here I’ll give the page a title. On the next line, I want to add a paragraph to the page to type p and press Tab, which creates a paragraph element. And now I can give the paragraph some text.

Now I want to create a link on my page. To accomplish this, I’ll use the anchor tag. Instead of typing out anchor, we’ve abbreviated it to just a, so I can create an a element, hit Tab, and this time, instead of just creating the element, it gives me an attribute as well. Now the href attribute stands for hyperlink reference. It means that I can put a web address in there, and my link will point to that address when I click on it. So here, let’s create a link to Sharing Is The Key website.

Now I want to add a table. With Emmet’s help, that becomes very easy. I can type table. That creates the root table element. Now I’m going to make a header for the table. The abbreviation for that is thead for table head. Inside that header, I’d like to create a row, so this is the table’s header row. The row is a tr element for table row, and inside that row, I want to create a header, so I’ll do a th for header, and I’ll give this a label of Author.

The next thing I’ll do is create a title header because we’re making a list of posts that you can find over on Sharing Is The Key website. So that’s the table’s header, and now I can create the body of the table. I want to have a row within the body, and within that row, I need some table data. So the element for this is td. So I can type in an author name like John Smith. I’ll create some more table data and paste it into one of our posts, like the one you’re watching right now.

It’s not much of a table if it doesn’t have a least another row of data. Therefore I’ll create another row, another cell for data, type in another post, let’s go with John Smith again. One more cell of data, and we’ll point to the first of the great Docker post series, Docker Container: Next Big Thing In Software Development 1/4.

So now, let’s take a look at the result of this page. I’ll right‑click on the page and click on “Open with Live Server” popup menu option. Well, here’s our page, and yes, it is not much as pleasant and contentful, but we did it. We’ll get into styling the page in the next post. But here we’ve got a title on the page, we’ve got some paragraph worth of text, and a table that desperately needs some styling to make it look better. But, it’s a table. And we have our link, so when we click on it, we can learn more at Sharing Is The Key. Next, let’s look at how a web browser uses this structure to create a version of the web page that it builds in memory and see how it uses this model to interact with the page.

Document Object Model (DOM)

Now the way a browser represents a web page in memory is through the Document Object Model. Now, if we talk about the document, every website comprises a collection of web pages. Every web page is a single document. And inside the web browser, each page is represented by something in memory called document.

If we go back to the webpage, we’ve just done and open up the developer tools, right‑click and choose Inspect, and then come over to the Console. A Console is a place where I can write different commands, and the browser will tell me what the result is. Here, let’s type document, and then press Enter; you’ll notice that it returns a reference to the document within the browser. Now, when I hover over it, it highlights the entire page. If I expand this item, you can see here that all of the HTML, nearly everything you see within the developer tools’ Elements tab, is available through the document. So the document object is what the browser uses to understand the web page as a whole.

Now, I keep talking about this word object. In computers, we have to find ways to make representations of things that exist either in the real world or just while the computer is working with something. One way to think about an object is that it’s an approximation of something. For instance, if I ask you to think about a house, you probably think of walls and a roof and some windows and doors. But houses are so much more than that. They’re heating and cooling systems, and plumbing and electrical systems, and paint, and on and on.

The point is that we think in terms of abstractions, meaning we often use placeholders for things that we either don’t want to be bothered with the details of or something we don’t understand at all. In a browser, each element is represented by objects, which is how it works to understand the structure created by those elements on a web page. When we talk about a model, this alludes to the fact that the DOM represents that structure. Just like a model plane represents the real thing, here, we’re using a series of objects to create a model of what exists on the web page.

So this is how the browser sees the web page, but how does a search engine see the web page when it reads its contents? Well, we’ll look at that next.

How Search Engines See HTML

Now search engines see your web page differently than you do in the web browser. So we’re just warming up to some of these concepts, and I want to state upfront that I’m simplifying things a lot to make this easy to understand from the very basics. There are an entire art and science involved in working with and ranking in search engines.

Semantic HTML for meaningful webpages

Semantics and accessibility are a part of HTML by design, but they are not useful unless implemented correctly. Writing semantic markup means understanding your content’s hierarchy and how both users and machines will read it. Much of it can seem like common-sense; when you write a heading, mark it with a heading tag (<h1>, <h2>, etc). When you write a paragraph, keep it with a paragraph tag (<p>). Semantic markup means that HTML tags are never chosen based on how they appear in a web browser; they’re chosen based on the content’s importance and structure.

While HTML has included semantic markup from the beginning, the advent of HTML5 brought with it even more semantic tags such as <section>, <article>, <footer>, <nav>, and <aside>. The goal is to make it easier for browsers, developers, and crawlers to distinguish between different data types. These semantic tags make it clearer what information is on the web page and its importance. Previously, a page was structured using only divs, which give no information to search engines, crawlers, or other developers about that part of the page. Using semantic markup, developers can be more explicit about the overall content and write it so that computers can understand it.

Now that you have a better understanding of HTML and its related matters let’s stop it here and continue to the next one with CSS.

If you need any help or something is going wrong, let me know. It will be my pleasure to help you. If you want to extend some point, we have discussed, contact me so we can cover in the fllowing posts.

We also have pro bono projects just in case you are interested in learning more about them.

Be aware of why we started this project by clicking here.

Learn more about other posts here.

Contact us for any suggestions. And follow us on FacebookInstagram and Twitter.

If you are a good reader like myself, I recommend the following readings:

  • Docker Quick Start Guide: Learn Docker like a boss, and finally own your applications
  • Docker for Developers: Develop and run your application with Docker containers using DevOps tools for continuous delivery
  • Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques, 3rd Edition
  • JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language 7th Edition

See you in the next post!