SITK - Pie Shop 3of5 Featured image

Exciting Web Development Journey – Pie Shop Website 3/7

Overview

Welcome back to Sharing Is The Key. Let’s continue digging deeper into the CSS world to build vital Web Developments’ fundaments to deliver a compelling user interface. As we discussed in the second post of this series, there are many essential concepts about CSS that we miss most of the time, and it causes many issues to the end-users.

Now that you’ve learned how to add styles with Cascading Style Sheets, let’s look at working with them more in-depth on your web pages. You’ll learn about the box model, how to create layouts for your web pages, how to target desktop versus mobile devices, and how to determine browser support for the styles you write.

The Box Model

Every element in your web page has a sense of presence on the page. The way the browser interprets this presence is called the box model. Let’s take a look at the button we did in the previous post, and let’s add display: block, margin: 10px, and height:50px to the existing .button class. Save it and see the changes in the browser.

SITK - Pie Shop - the box model - adding rules

Let’s open up the developer tools and take a look at a utility that better depicts how the browser sees this element within the page. So I’ll right‑click on the button and choose Inspect. As we take a look at the Elements tab, bring your attention to the bottom right corner, where you can see a representation of how the browser sees this element. So for each element, we have margin, border, padding, and then the dimensions.

SITK - Pie Shop - the box model via debug tools

You can see that the values that we added into the style correspond to the diagram above. So the margin value that we created was for 10 pixels. Now the margin is the space between the border itself and everything else around the boundary of that element. As depicted here, the border was set to 1 pixel, so there’s a nice thin border around the element, and padding is the space inside the element, in between the border and the content of the element. And then lastly, we have the height and the width of the element itself.

Something is interesting you need to notice here. While I set the width for this element at 40 pixels, the actual width is 82 pixels. It is 10 pixels for the margin, 1 pixel for the border, and 10 pixels for the padding on both sides, and then 40 pixels for the width of the element inside the box. So as you’re styling elements on the page, you need to know how the margin, border, and padding values affect the dimensions of the elements on your page.

Now that you’re acquainted with the box model, let’s take a look at the type of style rules you’d need to write to create columns on your page.

Columns with Float

One of the fundamental features of creating a layout for a web page is to create columns, and unfortunately, that is a lot easier said than done when it comes to building a web page. So the first thing I’d like to do is show you a common way that people try to achieve a column layout, and I’d like to highlight a few of its problems, so then next I can show you a little more of a robust solution. Let’s add one div with class="columns" with two divs inside right after the Hello button. And we’ll use this class name to add style to the elements inside of it. Let’s try to use Emmet as much as we can to get the hang of it.

So to start, let’s create a class for columns. Let’s give it a width of 100%. And I’ll put a border on there as well so you can see how much space it’s taking up within the browser. So when I press Save, you can see I have the columns container taking up 100% of the width of its parent container, and it’s got that border.

SITK - Pie Shop - columns with float

All right, now let’s see if we can get Column 1 and Column 2 to situate next to each other. For my next style rule, I’ll use a child selector. So what I want to do is target all of the div elements that are children of my columns class selector. When you think about creating columns, essentially, what you’d like to do is take each one of these div elements and make them take up the same amount of space on the page and then situate them next to each other. So I’ll give each one of these divs a width of 50%. Now, just so that we have a better idea of what’s going on, let’s add a red border around these elements.

SITK - Pie Shop - columns with float - child element selector

Now we need to tell Column 2 to float up next to Column 1, and so we’ll use the float rule for that. We’ll say float: left;, and what this rule should do is tell the Column 2 div to show up next to Column 1. Because the box model is at play, and the width and border values are calculated into the overall elements’ width, there’s not enough space to create the columns when each of the divs is set to be 50%. So let make this 49% and save it, now I have two columns floating right next to each other, but there’s still a problem. I have this space left over at the edge of the page. And when you begin designing layouts, small bits of extra space can be frustrating.

SITK - Pie Shop - columns with float - frustating experience

So instead of using the float rule, let’s take a look at how Flexbox can make our life so much easier.

Columns with Flexbox

Starting in the same spot as we did when we first tried to create columns for our layout, we’ll use Flexbox, and we have our columns class and our divs for Column 1 and Column 2 available on the page. Let’s start by getting rid of the width and float rules in our class and class with a child selector. Let’s keep only the border for both of them. It takes up 100% of its parent’s width, so we can start creating some columns.

SITK - Pie Shop - columns with flexbox

Now, I’d like to introduce you to display: flex. By adding this one rule to our page, now when I save the file, you can see we’ve got two columns on the page.

SITK - Pie Shop - columns with flexbox - display flex

It isn’t quite the type of layout that we want, so let’s customize it slightly more. In the child selector .columns > div, we’ll add in the flex rule. Now, by saying flex equals 1, I’m telling the browser to evenly distribute all the space that’s available within the container and allow each one of my divs to take up one portion of that amount of space. So, essentially, since I have two columns, by setting flex equal to 1, I’m telling the browser, allow each div to take up one column’s worth of space within the container.

SITK - Pie Shop - columns with flexbox - flex equals 1

Now, to illustrate this a little more clearly, let’s see what happens when we add a third column into the mix.

SITK - Pie Shop - columns with flexbox - flex equals 1 - adding more colums

By merely adding a new div onto the page, we have three columns that have equal widths, but I have even more control available to me with Flexbox than that.

For our layout, we want Column 1 and Column 3 to be more narrow, and Column 2 takes up a majority of the space within the page.

Well, we can do that by adding in another selector. I’ll start with another child selector based on the columns container. Now I’ll create another child selector, and then I’ll use a particular type of selector called a pseudo‑class. Now the syntax for this is to add a colon, and VS Code will give us many different options available for pseudo‑classes. So I can target the first‑child of the container or the first of a specific type. I want to make Column 2 a little bit wider than Column 1 and Column 3, so I’ll use the nth‑of‑type pseudo‑class. By using nth‑of‑type, I’m telling the browser to look for a div within the container based on its position. So when I add in 2 as an argument, it will skip the first div and select the second div. Now I can add a rule into this block and tell the style I want the flex value to be 2. So, what will happen when I save the file?

SITK - Pie Shop - columns with flexbox - setting size of column 2

That’s right. Column 2 is wider than Column 3 and Column 1. What Flexbox is doing is calculating all of the available space needed for the columns, giving Column 2 a double portion of that space, and Column 1 and Column 3 get a single proportion of the space allotted for the columns. Now there’s so much more that you can do with Flexbox, this scratches the surface, but the rules you see here will get us where we need to build Bethany’s Pie Shop. Next, let’s look at how we can target rules to only apply to desktop or mobile devices.

Responsive Layouts: Viewport

Media queries allow you to target your CSS rules to different devices. It means you can create rules that target the desktop browser versus other rules that apply to mobile devices, so let’s take a look and see how this works.

Here, I have many elements on the page. We want that projects show up on the desktop, the Hello button and the class columns divs show up for mobile devices, and the table shows up only when you print the page. We need to add desktop, mobile and print value to the element’s class attribute to accomplish this task.

SITK - Pie Shop - responsive layouts

Now when you’re designing for the web and creating styles that target different devices, often the best approach is to design for mobile devices first. It is essential because it forces you to make sure that your layout works in the smaller dimensions before it works in the larger ones. Therefore we will use this approach here. Before we start writing CSS rules, there is a specific metadata tag that you need to be aware of that’s essential to make our styles work correctly. The metadata element is named viewport and is required to let the device know how to interpret its width.

SITK - Pie Shop - viewport metadata

This element is telling the browser that the viewport or the way that the page is rendered within the browser will have a width of whatever the device width is. It is important so that the page is rendered at the correct width of the device. An initial scale is a setting for the scaling or the zoom. So by setting an initial scale equal to 1, we’re telling the device to take on the 100% zoom setting, so you’re not zoomed in, and you’re not zoomed out.

Okay, well, with this in place, now we can write some CSS rules that target different devices.

Responsive Layouts: Media Queries

So now, with the viewport defined, I can start working on my styles. Now I want to make sure that I’m doing my styles for my mobile devices first. So the first thing that I’ll do here is to hide the Desktop and Print elements. To do that, I’ll create a list of class selectors and give it a style rule of display: none.

SITK - Pie Shop - mobile first approach

Now when I press Save, you’ll notice that those elements disappear from the page. With display: none in place, it tells the browser that any of these elements no longer take up any physical presence within the layout. By setting display equal to none, I’ve essentially taken those elements out of any rendering on the page. So using display: none is a very common way of hiding elements on the page.

SITK - Pie Shop - mobile first approach - desktop and print elements are gone

Next, I’ll create a media query just for when the page is printed. Now I’m showing you the print media query because other rules we’ll use target the screen only. So we start with the at symbol @ and use the media keyword. Then I tell it that this works for printing only. Within this media query, I want to create the reverse rules for what I initially set up. Here, I want to tell the Mobile and Desktop elements to be hidden and then show the Print element. So this will hide the Mobile and Desktop elements. And by setting display to block for the Print element, that will show that element as we print the page.

SITK - Pie Shop - media query print

So when I press Save, you’ll notice that nothing happened in the browser. As it’s rendered on the screen, it looks just like our mobile stylesheet. However, if I come over to the browser and type Ctrl+P, you can see within the print preview that the only thing that’s rendered on the page to be printed is our Print element.

SITK - Pie Shop - media query print - Ctrl+P

Next, we can target the desktop browser on the screen by using a different media query. So here, I’ll build the rule with the media screen and then add a selector. Now I’m adding the ‘and’ keyword in here to create a selector for the rules to be applied only in certain situations. So, in this case, I only want to apply the rule where the browser’s width is greater than 768 px. So to do that, I’ll use the min‑width property. And so now I can tell the Mobile elements to hide and show the Desktop ones. So, again, any screen that’s 768 px in width or greater will hide the Mobile element and show the Desktop element.

SITK - Pie Shop - media query desktop

So let’s save the page and see what happens. Since I’m showing my screen side by side, and the screen width is less than 768 px, nothing happened. So if I take my browser and expand it out, you’ll notice that it begins to show the Desktop element after it crosses over that threshold.

Now when you’re testing media queries and want to see what they look like in different environments, just changing the size of the browser is not the best way to go about it. And the browser developer tools once again make your life so much easier. So I can open them up by saying Inspect element, and then you’ll notice an icon where you can toggle the device toolbar. When I click on that, it creates a simulation of what this page might look like under different mobile contexts. So here, I can come up here and select from several different preconfigured devices. I can change the orientation and even the zoom level. And so you’ll notice on an iPad Pro, we’ll get the Desktop experience because of its dimensions. But on an iPhone 5, it renders the Mobile experience

Media queries give you a lot of power to target your layouts for different contexts. Next, let’s look at how you can determine browser support for the CSS you write.

Browser Support

Just like when you’re writing HTML, you’ll want to know about the browser support for the different CSS rules you write for your websites. And to find out which rules work in which browsers, we can use the website caniuse.com. So let’s take a look at one of those rules, and we’ll take a look at Flexbox. And so, through this table, you can see that Flexbox enjoys quite a bit of support throughout most browsers available in the world today.

SITK - Pie Shop - Can I Use - Flexbox

And any feature with this type of support you can safely use in just about any production application. Scrolling down the page a little bit, you have the opportunity to read some of the developer notes about the feature, and I find the Known Issues tab to be incredibly enlightening. It is where you can dive into edge cases where certain features may have restrictions under particular circumstances. So that’s a well-supported rule.

SITK - Pie Shop - Can I Use - Flexbox Known Issues

Let’s take a look at something that’s not quite as ubiquitous. Let’s search the hanging‑punctuation rule. It allows some punctuation characters from the start or end of text elements to be placed outside the box to preserve the reading flow. Well, as you can see here, we have a whole lot of red, and this rule is not supported well enough for you to use it in a production application.

SITK - Pie Shop - Can I Use - hanging punctuation

So chances are most of the rules you choose to use for your layouts will be supported well enough for you without worrying about it, but if you have any questions, make your way over to caniuse.com and find out for sure.

Building Content Pages

Introduction

Well, you have come a long way since we first introduced the very basics of HTML. We made our way through style sheets, and now we’re ready to start building the website for Bethany’s Pie Shop. We will set the HTML foundation for the home page and develop the global style sheet and styles specifically for each of the content pages. Let’s start building the home page.

Create the Foundation

So let’s start by returning to the starter project that you downloaded in the first post. Now, let’s create the index file, order file, list of pies, contact file, and the global stylesheet file. Once again, we’ll be using Live Server to watch the changes as we make them here in VS Code.

SITK - Pie Shop - creating HTML and CSS files

Let’s start with the index file, and we’ll use the Emmet shortcut to create the basis of an HTML file. So I can type ht and then come down and select html:5. That will give us an HTML5 stub of a web page. And a lot of this should look familiar to you by now. So we have our doctype. We have our HTML element set with language lang="en" for English. We know this will pass our validation rules. Here we have a meta tag. The character set is UTF‑8, which is the text encoding for this page. We have our viewport. That’s already put in there for us, so they’ll work as expected when we create responsive styles. We’ve got a title and then our body element. So I’ll save this, and then I’ll right‑click on the page and say Open with Live Server.

SITK - Pie Shop - open index with Live Server

That opens the browser for us automatically. And when I come back over to VS Code and hide the explorer. That gives us a bit more space. And now I’ll shrink VS Code so that we can see both windows at the same time. Now, when I type something in the file and save it, we can automatically see that change in the browser.

SITK - Pie Shop - start coding with Live Server on

Now, to serve as a reminder of what we’re building, this is the home page.

SITK - Pie Shop - Home Page

So we’ll start by creating the navigation at the top of the page, add the logo image, generate the markup for the content of the page itself, and then add the markup for the footer. Once the structure is in place for the HTML, we’ll add the styles, and the final result will be this home page here for Bethany’s Pie shop.

SITK - Pie Shop - Home Page described

So here I can add in the structure for the top navigation of the page. And we’ll start, of course, by using an Emmet shortcut again. So inside the body, what I want to build is a header by typing header>. Inside that, the site navigation. The element that we can use here is the nav element header>nav>. Then I want to create an unordered list header>nav>ul>. And inside that list, I want to have three different list items header>nav>ul>li*3>. I want to make an anchor for a link inside each one of the list items header>nav>ul>li*3>a. So now, when I press Tab, all of that HTML will be generated for me.

SITK - Pie Shop - Home Page - Emmet Navigation

If you recall our discussion about semantic markup in the first post of this series, it is telling a search engine that this section of the page is the header of the page. Inside of it, I have navigation, and the nav element is a container for links that apply just to this site. So we wouldn’t put a link to, let’s say, an outside website within the nav element. It is just navigation for our website alone. Then we can create an unordered list and then the list items here.

So we’ll create the first link for the home page. It is a little weird because we’re building the home page right now, but I put it on here just for consistency’s sake as you go through the different pages in the website. Adding the slash value for href tells the browser to go to the very root of the website. In other words, if we had bethanyspieshop.com, that’s where this link will go.

SITK - Piae Shop - Home Page - home link

Next, we want a link to the pies list page, and so we can add pies.html in the second list item, so when you click on it, it’ll go to that page, and then we’ll give it the label of Pies. And lastly, we have a link to the contact page. Now when I press save, you’ll see that the result is pretty unimpressive visually, highlighting the value of stylesheets.

SITK - Pie Shop - Home Page - pies and contact link

And we’ll implement the styles soon, but for now, let’s finish building the rest of the home page’s structure. So next, we’ll add Bethany’s logo to the page.

Add Main and Aside Elements

So now we’ll add the page’s main content. To do that, we’ll use an element called main. The overall structure of the page will give us a header, the main content, and then a footer for the page. It is vital to use the main element for this page because that signals to a search engine that the content within this page inside this element is the primary content. Sure, the header and the footer are essential, but they are most of the time links around the site. We’ll probably have some branding information, maybe some contact information. But when it comes to the primary purpose of this web page, what is in the main element is what we most care about.

SITK - Pie Shop - Home Page - main element

Now inside the main element, I’ll use two different tags. One is the aside, and the other is the article element. Now, if you think of a typical magazine article, the page’s main content flow is the article text, and sometimes you’ll have pull quotes that show up over on the side. Well, that’s the difference between the article element and the aside element, which I’ll use here.

SITK - Pie Shop - Home Page - article and aside elements

The aside element is important and contextually relevant to the content on the page. But it’s not the most critical part. Here I’m using the aside with an image inside of it to show the logo on the page. Let’s use Emmet again, type aside>img:s and hit Tab.

SITK - Pie Shop - Home Page - Emmet aside and img elements

You’ve seen in the past, the source attribute is where we put the path to point to the image, and in this case, it’s images/logo.png. The alt attribute gives a hint to machines about what this image is about. So whether it’s a search engine or a screen reader, the text we add here describes the image. So here I’ll just put in Bethany’s Pie Shop. And so now, when I save the page, the logo shows up on the screen.

SITK - Pie Shop - Home Page - adding logo

Add Article and Footer Elements

Next to the aside element, we’ll add the article element with some different supporting elements. If you recall the finished product, inside the main, we have a banner, a title, and some text with a link to our pies list page. So that’s what we’ll add on the page now.

SITK - Pie Shop - Home Page - what is inside the main

Now, rather than typing everything out character by character, I’ll paste in the markup for this page, and then we’ll discuss it.

So we’ve got the article element, and I’ve got an image element that renders out the banner, the h1 element, that’s the main title for the page. Again, for search engines, they’re going to key in on this h1 element. Then I’ve got a paragraph of text that welcomes people to the page. So it’s a message from Bethany and a link over to the pies list page.

SITK - Pie Shop - Home Page - article with image header1 paragraph and anchor

Now we’ll use Emmet one more time to generate our footer, and then we’ll have everything we need for the home page. Here, we’ll create a footer with a navigation element that includes a list of anchors by typing footer>nav>li. We want three list items, so that’ll be footer>nav>li*3, and inside those list items, we’ll render some anchor tags footer>nav>li*3>a. And again, rather than typing everything out, I’ll copy from the header and paste in the links and save it.

SITK - Pie Shop - Home Page - Footer with nav

We’ve got our top navigation, logo, banner, welcome text, and the footer links on the page. So now we can move on towards adding the global styles for the website.

Global Styles: General and Body Rules

Okay, well, we’re off to a good start. We have the foundation set for the home page. We have all the pieces that we need to start styling it with a global style sheet. I mean by a global style sheet that we’ll create a style sheet that works for every page—all of the base styles that every page needs to make it look like Bethany’s Pie Shop.

Individual pages will have their own set of styles that customize what they need for those pages. But we’ll get started by creating the base required styles for our website.

Now we need to reference our style sheet file. Go to the index.html and make sure that we add a reference to the site.css file so that all the styles we enter into site.css end up getting loaded into the home page.

To do that, we’ll add a new element into the head of the page, and we’ll create a link to site.css. We’re going to have rel="stylesheet". The href will be site.css. And then we need to tell this element that it’s reading CSS, so we’ll add a type attribute, and the value is text/css. Now the type attribute is important because it tells the browser when it loads this file to read it as a CSS file.

SITK - Pie Shop - link index to css via link

The first thing that we want to do is reset the margin on all of the elements on the page. Some elements like title elements have a little bit of margin and maybe some padding built-in as their default styles. To get our layout working correctly, what I’d like to do is reset every single element so that it has no margin at all.

To do that, in the site.css, I’ll use the * selector. It says every single element on the page will get the following rule. So now I can set all margins 0. When I press Save, you can see that all of the margins around these elements are compacted. It is good because now we won’t be fighting with any default values, and so elements will only get the margin that we set.

SITK - Pie Shop - setting margin to 0 for all elements on the page

Next, I want to add rules that will help make sure that it calculates the dimensions of the page correctly. So here I have a selector for HTML and the body. So essentially, this is the entire page within the browser. And here, I’m setting the height to 100%. While this didn’t visually make a change within the browser, it helps other styles to be able to calculate their position on the page correctly.

SITK - Pie Shop - setting html and body to 100% on the site

Now let’s add some styles just for the body itself. These rules will rely on inheritance to make sure all of the other elements on the page have the style rules that we’ll enter here. Here I’ll change the font, and you’ll notice that VS Code gives me some options. So here, we’ll select the Arial, Helvetica, sans‑serif option. And now I want the background colour of the body to be a light gray. I’ll press Save, and we can see the change made to the file.

SITK - Pie Shop - setting body font-family and background colour

Global Styles: P and Header Rules

Now you might be wondering, Why am I setting the background colour to that gray? When we look at the finished product, you’ll notice that the top navigation has its background colour. Within the body of the page, we have an image applied to the background that’s repeated to give us that striped look. And then, when we come down to the bottom of the page, the footer has a gray colour. By adding this rule at this point, the footer can just inherit the colour of the body.

SITK - Pie Shop - Home Page

We want to add a style for all of the paragraphs within our website to have its custom margin.

SITK - Pie Shop - setting margin for all website paragraphs

Now I’ll scroll down on the page, and when I hit Save, you’ll be able to see here within the paragraph how the margins will change.

SITK - Pie Shop - setting margin for all website paragraphs - result

Next, we can add styles for our header so that our navigation begins to look the way we want it. The first rule I’ll add display: block. The second is position: fixed. Now when I hit Save, notice what happens?

SITK - Pie Shop - setting header display and position

The logo shows up underneath the links at the top, but because I have the position as fixed, you’ll notice that the navigation links stay in place when I scroll the page. And that’s exactly what we see on the finished product. As I scroll the page, the top navigation stays fixed into position at the top of the browser.

And so we want to add in that position. So we’ll add top and left dimensions, the top rule telling the browser to fix that position at the very top of the browser window, as well as the very left‑most edge of the window.

SITK - Pie Shop - setting header top and left to 0

Now let’s make it take up 100% of the width of the page, set its background colour, and add a little bit of padding. Here we’ll use the colour code specific to the theme for her website and add in the padding. So now we have a fixed element at the top of the page that includes our links. The links aren’t quite exactly like what we’d expect yet, but that’s just the style for the header.

SITK - Pie Shop - adding width background-color and padding to the header

Next, let’s look at how we can customize the links within the page’s header.

Global Styles: Nav Element

So we have the fixed header set up, now let’s add the rules to make our navigation links look a whole lot better.

First, I’ll start with a selector that styles the links depending on the click state. I want to style the appearance of the links after someone visits them. And the default state for all links underneath the navigation element on the page. So to do that, let’s use the pseudo-class link as a:link. We’ll make the links white, use a rule called text‑decoration, and set that to none. Now text‑decoration: none says that our links won’t have any underlines underneath them.

SITK - Pie Shop - changing link appearance and state under nav element

So now, when I save the file, you can see that the links turn white, and they’ll stay white whether or not we’ve clicked on them before or not, and, of course, the underlining has been taken away from the text.

SITK - Pie Shop - changing link appearance and state under nav element - result

Next, let’s deal with how this list renders on the page. So we’ll look at the nav element and target the unordered list within that element nav > ul. Now we’ll tell the browser to display this list inline and zero out all the padding around the list.

SITK - Pie Shop - changing display and padding of ul elements

When I save the page, you can see that the bullets have disappeared from our list, and there’s no extra padding around the links.

SITK - Pie Shop - changing display and padding of ul elements - result

For our final style for the list, we can add some rules that target the individual list items within that unordered list nav > ul > li. For these, we want them to display as inline‑block, set the list‑style to none, and set the left and right margin. So the first value is for the top, so we’ll fix it to 0, then we have the right, the bottom, and the left value. So what display: inline‑block tells the browser to do is to display our element inline, so that means it stacks the elements right next to each other, but we put it within a particular mode of inline‑block, saying that you can still have control over things like width, margin, padding, where you don’t usually have control over those aspects when you have a typical inline element.

SITK - Pie Shop - changing display list-style and margin for nav li emelemtns

Setting list‑style: none; tells the browser not even to interpret this item as a list item, and then our margin values give a little bit of space between each link. You might be wondering, why using a list element at all when we’re trying to style it to look like a series of links right next to each other? And that goes back to semantic markup. When a search engine looks at our web page, it’ll see that there’s a list of links within a navigation element and has a better job of interpreting the meaning of those links, rather than just having random anchors scattered around on the page.

Congratulations, we’ve got the header and nav elements ready to go. We applied most of the HTML and CSS concepts and fundaments we’ve been learning until now. At this point, things are getting clear, and you are probably having fun! There is more about CSS and HTML in the following posts as well as JavaScript. Let’s make a pause and continue in the next post.

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!

SITK - Pie Shop CSS 2 of 5 Featured image

Exciting Web Development Journey – Pie Shop Website 2/7

Overview

Welcome back to Sharing Is The Key. Let’s continue this exciting Pie Shop website building we started in the previous post. Now we are going to learn a little bit more about CSS. Let’s go deep inside of website anatomy to get the big picture of it.

Website’s anatomy

When you look into the browser, you see a web page made up of text, images, video, and many different interactive elements. And when you see all those pieces put together in a refined way, you’re seeing the final product of a series of technologies, when they are put together in just the right way to present to you what’s called the user interface.

Now that the user interface is a web page made up of HTML, CSS, and JavaScript. Let’s break them down by speaking about the various facets of how it applies to an individual.

When you see a person often, one of the first things you notice about them is their physical appearance. That physical appearance is how you interact with people daily. And people look a lot different based on their bone structure and the clothing they want to wear each day. So if we wanted to match a person’s skeleton system to the structure contained inside their body, that’s the same thing as HTML on a web page.

As you create markup around content, you’re making a structure for the page. Now by itself, as you saw in our original example, really isn’t much to look at. It’s just pieces of information thrown on the page, so you need another layer of technology that’s responsible for what we call the style.

So that’s made possible by Cascading Style Sheets when you think about a style or, in our case, a person’s clothing.

So HTML provides the framework, the Cascading Style Sheets provide the style, or the look and feel, and eventually, no one is complete without what makes them completely special, and that’s their brain.

The brain is where the thinking, logic, and reasoning of a human occurs. And while our web pages aren’t that sophisticated, the brain is the programming, the business rules, and the logic that we build into our web applications. And this is achieved by JavaScript.

When HTML gives you structure, CSS gives you style, and JavaScript brings you interactivity; together, you have a fully functioning website.

Adding Style with Cascading Style Sheets (CSS)

Cascading Style Sheets is the technology you use to incorporate various fonts, change colours, change the scale of the elements on the website, build templates, and more. First, you’ll hear about some simple styling. We’re going to discuss what style rules are, where to put them, how cascading works, and you’re going to start talking about the selectors. So let’s go ahead and get started by opening the browser and messing with some style rules.

Style Rules

Cascading Style Sheets work by allowing you to define rules that describe how you want your elements to appear on the page. Now you can add these style rules in a couple different places, and I’ll cover the different locations in a bit. Let’s add a style section up into the head element. I can target my rules to the h1 element by adding the tag name for h1 and then the open and close curly braces. Now I can change the background colour and even the text colour. Notice how each style rule is formatted with a style property name, a colon, and then the value.

It is one way we use to create style sheets. Now you’ll see me use these colour codes in this post. The CSS colour rules accept colour information in a few different formats. Here I’m using what’s called hex code, and I’ve just memorized these values. But don’t worry, you don’t have to. If you type any colour in and then hover over that colour, Visual Studio Code opens up a colour picker to select any colour you want.

So style rules are made up of a selector, they sit inside curly braces, and then you have the rule, colon, and then value. Now, let’s talk about what’s built into the name of CSS and discuss style sheets’ cascading nature.

Cascading Rules

As the name Cascading Style Sheets, or CSS, suggests, there’s a number of different cascading rules that come into play as you build your styles. We’ll look at the different rules and how they affect the way your web page looks.

What would happen, though, if I created another rule right underneath the existing one? Again, this is for an h1, and this time we set the colour to red. Now, when I press Save, what do you think is going to happen? Is the text going to be #fff or red? Well, it turns out that it’s red. Because of style sheets’ cascading nature, whatever rule the browser encounters last as it adheres to the cascading precedents will win. Therefore, in this example, whatever selector comes later has the rule that wins. Next, we’ll look at what’s called rule specificity.

Specificity

This time I’m going to add class="headings" to the element h1. Next, within my style sheet, I can create a class‑based rule at the beginning of the style sheet that says the heading will appear black. When I save the file, the browser will read the style rule, and the Title is coloured black. It shows up as black because I’ve told the browser to colour any element, whether it’s an h1 or anything else that has the class of heading, to colour that element with black colour. Even though the .heading rule comes first and the h1 rule comes after, is because the .heading rule is more specific.

The class attribute is considered more specific on an element than its tag. Another way to think of it is that an element has its tag, and the tag name generally describes what it is and its purpose. But as you add values into the class, you’re giving more specific information about what that element is so that a class rule will win out over an element rule.

Inheritance

Some style properties are inherited, and some aren’t, and there’s no real guideline that you can follow that helps you know exactly which ones are and which ones aren’t. You have to become familiar with the style rules to understand how they work. But let me give you an example of how inheritance works. So here on my page, among other elements, I have my table and my table head thead. I can go into my style sheet and tell the table that I want to give that a background. We’ll give it a light gray background. The style property that we use for the background is background‑color. And when I save it, you can see that the table takes on a background colour. Now you notice the thead element also has a gray background. It means since thead is one of the table child, it inherits from its parent.

But I can create a new rule to override that inherited value. Now for the thead, I can make the background colour darkgray, and now my table has a lightgray background and my table head has a darkgray background. So the thead inherits the background colour of the parent until a lower‑level style is defined.

Now, as I said, not all properties inherit. For instance, a dimensional property like width. Let’s take a look at that in action. I’ve updated the page to have the header element inside the body, and inside that, I have the h1 with the text “HTML Elements”. So let’s start by making the background colour of the body a lightcyan. For my header element, we’ll change the background‑color to lightpink and give it a width of 50%. Now the header element has a different colour lightpink background, and it takes up only 50% of the page’s width.

Now let’s add a background colour lightblue to the h1 element. So before we save it and you’ll be able to see the dimensions of the h1 that’s inside the header element, do you think it will take up the same amount of space? In other words, turn the lightpink bar into lightblue? Or do you think it’ll only take up 50% of that space? Since width is not inherited, the h1 is taking up 100% of its container, which is the header element.

So if I wanted the h1 to be only 50% of its container, I would have to give it its width property. When I do that, now you can see each level of the structure of our page.

SITK-Pie-Shop-CSS-inheritance5

So inheritance is a compelling concept found in Cascading Style Sheets. Many of the styles you work with are inherited from the parent, and this is exactly what you want because this saves you from having to restate rules repeatedly that you set higher up in the chain. All right, I’ll show you next how the location of your style rules can affect how they’re applied to your page.

Location

There are several different options you have available to you to place your style sheet rules. And interestingly enough, the placement that you choose affects how they’re applied as well. One of the attributes that are available to us of an element is an attribute called style. Within the style attribute, we can add style sheet rules directly to an element. So if I wanted to make my table titles th blue, I could do that using the style attribute.

SITK - Pie Shop - Inline CSS

However, this technique is frowned upon because you lose a lot of versatility by applying styles directly to the element. There may be times when you want to do this, but more frequently than not, what you want to do is enforce the style rules on a style sheet, and that’s what you’ve seen in the examples so far.

I’ll take this style rule, and I’ll put it up into a style sheet, or essentially, within the style element. So as I remove it from the style attribute, I can come up with my style, create a selector for the th elements, and add my rule in there. When I save it, you’ll see that nothing changes because, practically, I’m taking the same rule and applying it to the th elements, but now the instructions show up in the style element with the advantage of not repeating yourself as th elements grow on the page. Now, having styles directly on your page, again, comes at the cost of a little bit of flexibility.

SITK - Pie Shop - CSS stick with style sheet

We’d often like to take our style sheet rules and place them in a separate file. It becomes important because as browsers cache files, you can load a style sheet file into your browser one time, and then each page in the website can reference that, making your website faster. There are many other compelling reasons to put your styles within an external style sheet, like maintenance and the separation of concerns pattern, so let me show you how to do that. Here I’ll take this style rule and the selector and copy it out of the style element. And now, what I’ll do is create a style sheet file, and that’s a file with the extension of .css. I can take my rules and move them into the file. If you look over at the browser, you can see that the text has turned black again.

SITK - Pie Shop - CSS in a file

And this is because, within my HTML file, there’s no reference to my style rule. So let’s go ahead and add that. Underneath the head element, I’ll add a link element. Now Emmet is here to help me out, and it automatically creates an attribute of rel="stylesheet". And now, in the href attribute, I can point to my style sheet. When I save it, my browser is referencing the style sheet, and the rules are introduced back into the page, styling all elements again.

SITK - Pie Shop - CSS link style sheet to HTML file

It is interesting what happens when you begin to mix and match styles that are found within different placements. So right now, I have a style sheet file that says my table titles are coloured blue, but what happens if I bring that style back in the HTML file and add a different colour within my style element? What if I wanted my table titles to be green instead?

SITK - Pie Shop - CSS in different places - file and style tag

Remember, we’re dealing with the same element, selector, and rule. The only difference is that the blue rule is found within the style sheet file, and the green rule is found here within the style element.

If I go down to my style attribute and add yet another colour, let’s see what happens then. Here I can add in a dark red code, and what do you think will happen when I save it? Well, that’s right. The style attribute wins because it’s more specific in scope than the rest of the rules. So hopefully, by now, you’re beginning to see how style sheet rules cascade down from the general to the specific through rules and placement on the page.

SITK - Pie Shop - CSS in different places - file and style tag and element

Selectors

Selectors are a way to locate elements on the page, and for CSS, that’s how it knows which elements to apply the style rules to. Now there are many different types of selectors. There are tags, class, ID, and attribute selectors, and so let me take you through how to use each one.

Starting with an HTML file, let’s wrap our paragraph p, anchor a and table elements into the main element to give our page a semantic approach. As mentioned previously, search engines sometimes need to crawl over the main content in your webpage. Although it has no visual effects on your webpage, it is always a good practice.

SITK- Pie Shop main element

Let’s add two sections with one subheader h2 with text “Project $”, one image img with src attribute that points to https://via.placeholder.com and one paragraph p with the text “To begin with project $ …” for each section, right below the table inside the main. Emmet will help us on this task. Type (section.project#project-$>h2{Project $}+img[src="https://via.placeholder.com/"]+p{To begin with project $ …})*2 and press tab. Let’s add “/150” at the end of the source address for the first image, and “/100” for the second one.

Notice that each section has a class set as project. So that means each one of these elements can be located and identified through the project class.

SITK - Pie Shop - CSS class selector

But each element has its own unique ID. You’ll notice that the ID attribute here is different for each one of the sections. So the first one is project‑1, and the second one is project‑2.

SITK - Pie Shop - CSS id selector

All right, now with this structure in place, let’s start writing some CSS so you can see how different selectors can target other parts of the page. So now, with all this setup, we’ll start looking at applying a style using a tag selector.

Tag Selectors

So if you recall from our earlier discussion, an element’s tag is the element’s name. So I’m going to create a style rule that targets the images on the page. Now you’ve seen these types of selectors before. We’ve used them often. Here, it is saying that any style rule that I add within these brackets will be applied to any image on the page. So here I can set a border. I’ll create a solid border of 1 pixel and make it a dark blue colour. When I save it, each one of the images on the page gets that dark blue border.

SITK - Pie Shop - CSS tag selector

Now, since this is a tag selector, any element tag that I put in the style rules will match against the corresponding element and apply those styles to any of the elements on the page. All right, well, this is great for making widespread style rules, but what if we only want to target specific parts of the page? Well, let’s take a look at class rules next.

Class Selectors

If we review the structure of the page again, you’ll notice that I have two elements on the page that each have a class attribute with the value of project for each of my section elements. Now, I want to write a CSS rule that can target each one of these elements.

SITK - Pie Shop - CSS class selector

To do that, I start with a selector that begins with a dot or period. That dot or period tells the browser that it’s looking for elements based upon the class name. So here I can type .project and open up a rule block. Now I can give my sections a border. And when I save the file, the browser updates, creating a border around each one of the sections.

SITK-Pie-Shop-CSS-a-dark-gray-color-to-the-project-class-elements

What’s valuable about class selectors is that you can apply the same class name to multiple elements. So I could have some different sections on the page, some of them might be for projects, and some may be another type. Still, by applying the project class to just the right elements, I can do that easily with a class selector when I want to create a style only for my project elements. Now, what if we need to target elements specifically by name?

ID Selectors

On my page, I have two elements that are containers for both of my projects. They each have a class project applied to them, but they also have distinct IDs. You use the id attribute when you want to identify an element on the page uniquely. You’ll often do that with elements that collect data from the user, or you might use them for containers that include distinct information on the page. Here I want to write a style rule that only applies to my section with the ID of project‑1.

SITK - Pie Shop - CSS id selector

Now, to create that selector, instead of starting with a period like I did with the class, I will start with the pound sign or the hash symbol. So this rule only matches the element with the ID of project‑1, and go ahead and give it a lightyellow background colour. Now, when I save my changes, the web page is updated to create the background colour just for that one element.

SITK - Pie Shop - CSS a lightyellow color to a specific element

Now, most of your selectors will be a combination of class, ID, and tag selectors, but there is even more power available in different selector types, so next, we’ll look at using an attribute selector.

Attribute Selectors

Thinking back to our previous conversation about different aspects of an element, if you recall, there’s the image tag, an attribute, and an attribute’s value.

SITK - Pie Shop - CSS img tag attribute and attribute value

I want to create a style rule that targets this element on the page based on source value. I’ll start making a selector that begins with a tag name. And then, to tell it that I’m targeting an attribute value, I’ll use the open and close brackets. These brackets say to the browser that the selector is looking at an image with a given attribute value. So inside those brackets, I can tell it what attribute we’re looking for, and then you put the desired value inside the quotes. So I’ll copy the image location down from the page, and I’ll paste it into the selector. And from there, I can add in a rule. So here I’ll give the image of the border. This time I’ll make it 3 pixels, and I’ll make it green. When I save it, just that image on the page is updated with the green-coloured border. It finds that image because it’s looking for an element on the page that has the tag of the image, but not just any image element. It has to be an image element with a source attribute with the value of this placeholder location.

SITK - Pie Shop - CSS attribute selector

Selector Lists

So far, I’ve shown you how to use selectors one at a time, so either a class selector, a tag selector, or even an attribute selector. Sometimes, you’ll want to target more than one element on the page to apply the same style. So to do that, you’ll use a list selector. For instance, let’s say I want all the text inside the table in italic. Well, I can do that with a list selector. I’ll create a list by adding a comma between the table head th and table data td, and then I’ll style their font italic.

SITK - Pie Shop - CSS list selectors

I can mix and match the different types of selectors as well. So let’s say I want to use a class selector with a tag selector. Here I’ll use the project class selector, and let’s say I want to give that and the table on the page a border. When you save it, you can see that the table and each of the project containers now have a border. So list styles are powerful because they allow you to apply the same styles to multiple different elements on the page.

SITK - Pie Shop - CSS list different type of selectors

All right, next, let’s look at the way that you can target children’s elements and add styles specifically for them.

Combinators

One form that your rules can take on is a child combinator rule, and that’s a fancy term that says you can create a rule that targets a specific child of a particular element. So if I wanted to select the paragraphs, but only the ones inside of elements marked with the project class would be these paragraph elements here, I can do that with a child combinator.

SITK - Pie Shop - CSS combinators

Going back up to my styles, I’ll start by targeting the project class. And then I’ll use the greater than sign, which essentially creates an arrow. So I’m saying project, and I have my arrow pointing at the element inside the element that I selected, so here I’ll say all the paragraph tags inside the elements that have a class of project. And to do that, I’ll increase the font size, and now when I save the changes, you can see that the font size is increased for the paragraphs that are inside an element that has the project class.

SITK - Pie Shop - CSS combinators - style children of particular elements

Now you even get hints of these types of selectors used in all kinds of different places. If you look up at the top of the window here in VS Code, you can see it uses that same type of selector syntax to show the parent‑child relationship between different elements within the page.

SITK - Pie Shop - a good use of hierarquical representation of elements

Display Property

Now there’s a concept within web layouts that I want you to be aware of that affects your style rules. Here I have two sections on the page that renders out a couple of children’s elements. First, let’s give them a width of 300px. By default, the section element is considered a block‑level element. What that means is that if I inspect this element and I hover over it, you’ll notice that as I’m selecting just the section element, it highlights the entire space across the browser window. So it takes up a full block of space as it’s being rendered within the browser.

SITK - Pie Shop - Display property depicted

Sometimes, we want to have an element appear in line and control over properties like width and height. Well, what we can do is we can change the style rule to read inline‑block. Now we get the best of both worlds.

SITK - Pie Shop - Display property inline-block

We have inline elements stacked next to each other, but we still have control over style properties normally associated with block‑level elements like width and height. Understanding the difference between block‑level elements, inline elements, and inline-block elements will come in handy as you build layouts for your websites.

Building Styles in Real Time

The browser is truly a fantastic piece of software. Of course, it displays web applications, and it’s our portal to the internet. And on top of that, the developer tools have so much to offer when developing websites.

I’ll come down into the body and create a single div element at the end of the main tag, and we’ll add the text Hello. I’ll save it. We can see our element show up on the page.

SITK - Pie Shop - build style in real time

Now so far, we’ve dealt with styles that I’ve pre‑prepared for you. But I want you to think about what sort of process you might go through if you wanted to add some style to this page. How would you know what selectors to use? How would you know what the colours would look like until you wrote those rules into your page, saved the changes, and brought them up into the browser? Well, when you want to work in a kind of a practical way, there’s a much easier way to do that than going through the process of thinking up a rule, saving the file, and looking at it in the browser.

I’ll right‑click on the element and choose Inspect. With the Elements tab selected, you can see that we have the HTML generated and served up in the browser. And then over here, you could see that we have a listing of styles.

SITK - Pie Shop - CSS element list of style

I can come into this window and begin adding styles and watch how it’s applied to real-time elements. Here I’ll start by adding a border, and then we’ll add some padding around it to take the content away from that border a little bit. I’ll change the background colour to light gray. I’ll set the width to 40px. Now we can align the text inside this box and center it. Let’s go ahead and change the font as well. Here, I can add a list. I’ll say Arial, Helvetica, and sans‑serif, clean fonts found in most browsers around the world. And now, what I can do is I can change how the cursor looks when you hover over it. So right now, it creates that I‑beam type of cursor. Let’s change that to be a pointer. And now, essentially, what we’ve done is created a button out of just a blank plain div element.

SITK - Pie Shop - build style in real time - hello button

In this view, I can come into these checkboxes and check and uncheck to apply or disable any one of these rules. Using this window makes it easy for you to add style rules and immediately see what they’ll look like on the page. But there’s only one problem here. If I refresh the page, we lose all these styles, and we don’t want that to happen. Now what I can do is select these styles and copy them, and now when we come back over to VS Code, I can create a new style called button, paste in those rules, and now apply that class name to my div. Now, any element with that class name gets that style, and that style was straightforward to create because I could do it in real-time in the browser.

Congratulations! You’ve now seen how you can add styles to your web pages using Cascading Style Sheets. So now, in the next post, I’ll show you how to work with Cascading Style Sheets a little more in-depth. We’ll talk about building layouts, determining browser support, and how you can validate the code that you write for your CSS rules. And the best part is when we’re done looking at layouts, we’ll return to Bethany’s Pie Shop and begin building her very first pages.

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!

HTML banner post

Exciting Web Development Journey – Pie Shop Website 1/7

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 seven 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!

%d bloggers like this: