Exciting Web Development Journey – Pie Shop Website 4/7
Welcome back to Sharing Is The Key. Let’s continue styling Bethany’s Pie shop website. As we have seen in the third post CSS is really powerful when it comes to providing an outstanding look and feel and having complete control of all HTML elements flow.
Let’s look at building up the styles for the main content area of the page. Now the styles for the main element will give us our background for the page and enforce some base dimensions for us.
I’ll add a tag selector for the main element and tell the browser to display this as a block‑level element. Now to add in a background image, we can use the
background‑image rule. Now, rather than just adding a string here, we need to use the URL modifier to tell the browser to interpret the path we give it to an image. So inside the parentheses, we can add in that path within quotes. So here we’re looking for
images/background.png. When I save the style sheet, you can see that that background image shows up all across the page because all the content inside the main element is filling up the page, and that background image is set automatically to repeat itself. So as this page grows and shrinks, the background image will take up the same amount of space as the main element.
Let’s add some padding, and we’ll do that to the top and the bottom of the main element. I’ll use explicit rules instead of the shortcut, which I showed you for the margin up on line 43. And this is to show you the different ways that you can write the style rules. So here for
padding‑top, I can tell it that I want the padding to be
padding‑bottom, the same. We want to have the content push away from the boundary of the main element to give space for those navigation elements to show up correctly. And the last rule that we’ll add in is
min‑height set at
85%. This rule is necessary to ensure that the bottom navigation shows up at the bottom of the page. When I save the file, you can see that the elements readjusted a little bit on the page. We’re not able to see much of the difference at this point. Mostly, it’s that background image that’s being loaded in for us. But as we flush out the style sheet and test it under different dimensions, then you can see how these rules are relevant.
Global Styles: Footer, Aside, and Article Rules
So as we scroll down on the page, you can see that our footer is looking a little squished within its container. So let’s add a rule in order to give some padding around that container so that those links have some area to breathe.
I’ll add 15px of padding around the entire div element. Let’s save it. See, that’s much better.
For the content inside the middle, which means the
article elements, we’ll give it a
So when I save the page, you can see that now there’s more padding around its content. Now, the
em unit gives you a chance to create a size based on the current font size. Instead of hard‑coding pixels, depending on how the fonts are rendered within that container, if you zoom in or zoom out, the
em unit of measure takes that into account. So, pixels are a fixed value, and
ems are a proportional value. Another way of saying that is the larger my fonts are within my page, the more padding there will be around it, and the smaller the fonts, the less padding there will be.
And this is important to create flexible layouts because as the dimensions change within your page, you want certain portions of it to reflect that.
Now, we want our site logo to show up centred on the page to add a style for that. So inside the
aside element, we’ll say
text‑align: center. So I’ll save the page, and you can see that now it’s centred.
Now, a couple of different things are going on here. Number one, it says
text‑align, and I just centred an image, and that might seem a little strange, and it is. But if you want to center an image or text within a container, this is the rule that you use. What’s nice about using this type of approach, when the page is rendered for a mobile device, the elements stack together under a narrow layout. The
aside element will take up the full width of the page.
However, and let’s take a look at the finished layout for a moment one more time, when the layout is rendered for the desktop dimensions, the aside element only takes up a portion of the page because of the grid layout that we will implement coming up soon. So this creates a lot of flexibility for you. So the layout looks good under mobile contexts, as well as desktop contexts.
But for now, the logo is just centred on the page, and that works great when we’re working with really narrow viewports, like mobile devices. Now let’s add one more style rule for our article, and that’s to set the width of that element to 75%. Now, this rule makes sure that our content doesn’t stretch too far across the page. And if you remember, we’re doing mobile styles first. All the styles that we’ve done until now are created to be optimized for our mobile layout.
Global Styles: Media Query
Our Home page is coming along quite nicely, and we’ve been able to style everything on the Home page so far using global styles. I mean that all of the style rules we’ve added into the
site.css file will apply to every page on our website. Up to this point, all the styles have been tailored to be optimized for the mobile environment, so now, let’s add a media query that gives us a place to put in some rules for styles that target the desktop experience.
So the media query that we’ll use will give a minimum width and target it to the screen. So this media query targets the
768px, so these styles will only be applied to screen sizes that are 768px wider and above.
So the first thing we want to do is for the main element to display as flex. Now the reason for this is because we’re going to create a two‑column layout, and if you remember from our discussion on layouts and columns,
display: flex makes creating those layouts very simple.
Next, we want the logo to pull away from the left side of the screen just a little bit. So I’m going to add some margin to our
aside element, and we’ll give it a
2% of the total space available to the browser window.
So we’ll save those changes, and then we’ll look at the browser in a desktop view. So there it is, now our desktop layout has a two‑column layout, and that logo is positioned exactly where we want it on the page for these dimensions.
Now we’re almost there. All we have to do now is add some page‑specific styles to make the Home page look exactly the way we want it. Again, everything we’ve done until now is some styles that apply to every page within the website. Now we’ll add some styles that are only for the Home page, so we’ll do that next.
Home Page Styles
Here we are, back in the markup file, the HTML file for the Home page, and we’re going to add some page‑specific styles here. We could do that in a style sheet that’s referenced out from the page, or we can do it inside a style element. To keep things simple, I’m going to use a style element here, but if you were building things for the real world, you’d probably want to use a separate style sheet.
Now I noticed we don’t have the correct title on this page, so let’s go ahead and fix this up and title this Home page “Bethany’s Pie Shop” and save it.
Let’s create a style element and add some page‑specific styles. One of the first things that we want to do is update the style of the welcome text. We need this text to be bigger and maybe change the margin a little bit. So we’ll target the
h1 on the page and tell it we want the
3em, and what we’ll do is add some
0.5em. It makes the text bigger and pulls the text away from the image just a little bit. Saving the file, you can see that now we have a proper welcome message.
This banner is a little bit of a problem because you’ll notice that it pushes off and seems to mess up the layout.
Now we can fix that by telling the banner we only want it to have a
100%. So we’ll target the banner. If you remember down in the markup, we gave it a class name of banner. Now when I save it, you’ll notice that it brings that banner down into size.
And if I resize the browser, you can see how it scales.
So that’s the value of creating styles with relative values or percentage values because they’re able to adapt or, as we say it, respond to the different layout needs. These are the techniques that you use to begin to create a responsive website.
The text down at the bottom of the page does not look good. What we want to do is have it pop on the page a little bit, so we’ll add a background colour, change the font size, and adjust the padding just a little bit. Again, there’s a class name that we’ve created called
sub‑title, and I’ll use a class selector to create my rule here. We’ll make the background colour white. So we’ll bump up the font size, give it a background colour, and give it some padding, so the text isn’t pushed right up to the edge of the container. And with that change, our Home page is done.
So whether it’s on the desktop or a mobile device, our website is starting to take shape.
With the Home page done, we can now turn our attention over to the Contact page, and we’ll do that next.
As we turn our attention to building the contact page, we’ll use the home page as a starting point. Here on
index.html, I’ll select the entire contents of the page, copy it, come over to the contact page, and paste all of the code from the home page. So that gives me the foundation of the page and gives me the building blocks of the layout.
I want to change the content in the middle of the page, so nearly everything inside the
article element. So I can delete the contents out of the article, delete the page‑specific styles out of the contact page, and then update the
title. Frequently websites will put the title of the page first, and then a pipe, that’s the vertical bar with spaces around it, and then after that, the name of the website itself. It works well for search engines because if the title shows up in the search results, you can see what page is being returned. So I’ll save all those changes.
And then we can come over and click on the Contact page, and you can see that we’ve got the basis for the layout, just none of the content yet.
We can now go down to the
article element and add in the content for the contact page. I’ve pasted in the markup here, and it’s made up of an
h1 that says it’s the “Contact” page, a text message that’s in a paragraph tag, and then this very long, interesting‑looking anchor. Now, before we talk about what that is, let’s save it and look at the page for a second.
That anchor tag renders out a link. And so when you do that, if you have a default mail client set up on your machine as I do, it’ll bring up the mail program, it sets the To address to whatever you designate, and here for this demo, it’s
email@example.com. I also automatically added in some text for the subject of the email. So here, “Interested in pies”.
Now that you see what it does, let me show you how it does it, the anchor tag is set up to have an
href value, but instead of just pointing to a web address, it starts by saying
mailto. After that, you give the email address. After the email address, you put a question mark and then say
subject=. It maps to the subject line in the email program, and then I can put in “Interested in pies”. But you’ll notice I’ve got this unique code in here,
%20. That’s a particular type of code that tells the program to put a space inside the text. So here,
Interested%20in%20pies. And so that code is what tells the email client how to construct the message. Then I can add in the rest of my label here, “Send us an email”, and close the anchor tag. After that, all I had to do was put the rest of the message underneath it. And that’s all enclosed in a paragraph tag, and that’s what gives us the contact page.
Well, now that we’ve got a way for people to get hold of us, let’s build the pies list page so we can begin the foundation of starting to take orders.
Pies List: Markup
Let’s go back and start building this page from the ground up. Returning to our Home page, we’re going to take the same approach with the Pies list page as we did with the Contact page and start by just copying what we have here, to begin with. So on
index.html, I’ll select all, and then copy this code and put it inside the
pies.html page. I’ll paste that in, and again, what we want to do is take out everything inside the
article element, so I’ll select all this code and delete it. We’ll also get rid of the page‑specific styles for the Home page, update the
title to say “Pies”, and then add in that pipe. So when I save it and now navigate to Pies, you can see we’ve got the basis of the layout ready for us to put content into.
One of the first things that I want to do is create a new container inside the Pies list page. And so here I’ll make a
section element and give it a
columns‑desktop, and we’ll look at why that’s important here in a moment. The layout for our list page will be different on the desktop than it is for a mobile device, so by adding in this class, we’ll add some styles that will allow this page to work well on the desktop.
So now we can add in two different pies. I’ll add in the first one, which is an apple pie. Now each pie is going to take on a similar construction within HTML. First, there’s a container
div that has a
pie. It is essential because as we add more pies to the page. By creating a pie class, I can add styles to that class name and apply them to each one of the pies on the page.
Well, we need an image for it, so here’s an image element for the thumbnail for our apple pie.
Now, in this next container, I’m using the columns class. We will add the styles for this next, but this will allow the layout to position the price and the title next to each other in two columns.
Then we have our description and then the button we need to place an order for the pie.
So I’ll save these changes, and let’s take a look at them in the browser. And the result is pretty bad. It doesn’t look good at all. It is alright because we’re going to fix that.
Well, let’s go ahead and get our cherry pie in there, and then we can work on making this look better. Like the apple pie, the cherry pie is within a container with a pie class. There’s the thumbnail image, the title, the price, description, and then an order button.
And one thing we didn’t talk about a moment ago was this
data‑order attribute. A data‑attribute is a special type of attribute that you can add into an element that allows you to add extra information about that element.
Now, when we create the interactive part of this page, to tell the order page what people have ordered, we’ll ask this button for its value of the data‑order attribute. So are you ready to take a look at what our page looks like now? Again, it’s not quite what we want, but that’s okay because next, we’ll add in the styles that we need for this page to look the way we want it.
Taking a look at the final product one more time, this is the pies list page, and this one looks pretty nice.
But the current state without any styles does not look as great.
Now, as we add these styles, we’ll be using the pie class to target the container and style the elements specifically for the pies on the page.
And if you remember, the title and the price right now show stacked on top of each other, but we have them in a
columns class, so we’re going to add some style first to make sure that these show up as columns.
So when we switch back over to the style sheet, we’re going to want to scroll down the style sheet just before the media query. And so, right here in this position, we’ll add a style telling the browser to display columns as flex. When I save it, you can see the title and the price stack next to each other instead of on top of one another.
We’ll add some more style rules in a moment to make it space out the way we want, but this is an excellent general style to have within the global style sheet. Any time we want to have columns, all we have to do is mark those elements like columns, and they’ll display as flex.
Inside the media query, there’s another style that we want to add that’s specific to the desktop layout. If we look back at the HTML for a moment, inside the
article, we have first the
title and a
section that includes the containers for both pies.
section has a class of
columns‑desktop. Now the purpose of that is to show the pies stacked together in columns for a desktop layout, but they’ll be stacked one on top of another for mobile layouts.
So let’s add the style to tell the desktop layout to stack these as columns. Inside the media query, we’ll add a rule right underneath the
aside rule, and this is for the
.columns‑desktop class. And again, the rule here is
display: flex;. Now I just saved the page, and with the dimensions for a desktop browser, things will change slightly. So as you can see with that rule, now we have the columns stacking next to each other.
Next, we’ll add the rest of the styles to make these pies look precisely how they should.
Pies List: Styles
Now, to start styling the containers for the pies, we’ll add some rules just outside the media query rules. Sometimes, as your style sheets grow, you might want to add some comments to help you organize the styles better. So here I’ll add a comment to signify that the following styles are just for the pies. Comments are lines of code that we can put in different programming languages entirely ignored by the computer. So here, the syntax for comment in CSS is
/*, and then some text, and then
*/ to designate the end of a comment.
The first thing that I want to do is style the container and give it an explicit width, padding, margin, a background colour, and a border. Here I will start with a class selector, provide it with the
background‑color: white, and a
solid 1px border, giving
light‑gray colour. So now when I save the file, both of the pie containers have each of those properties.
Now let’s make the image inside the container take up
100% of the container’s
width. To do that, we can add a selector of
pie and then
img, and tell it to have a
100%. So the visual change here is slight, but the images now take up the maximum amount of horizontal space within the container, and it makes them consistent as well as far as the width is concerned.
Now let’s make the title bold and notice how I’m prefixing each of these style rules with pie, then space, and another selector. What that does is that targets each one of these styles specifically to the pie container. So if I have a title in another part of the page, I may not want it styled the way I’m doing it here, and so by being careful about how I craft my selectors, I can make sure that my styles are only applied where I want them to be.
Now, let’s make the element that holds our columns take up the maximum amount of horizontal space, so those columns spread out slightly. Let’s save it, the visual change here wasn’t anything you can detect, but once I add the next style rule, you’ll be able to see why that width is essential.
Now I can tell the price to be aligned to the right, and then once we make sure each of the columns only takes up 50% of the allowable space, now our pies are starting to take shape a little bit.
So this last selector here looks for the pie container, looks for the container that holds both columns, and then styles the individual div elements to be a width of 50% each.
All right, so then the last thing that we have to do is style the button. Instead of using a class selector, I’ll use an element selector. To make this button look like the branded button we want for the site, we’ll add a background colour, padding, border, border radius to round out the corners a little bit, and then change the text colour. Here, I’ll use the branded colour for Bethany’s Pie Shop, add some padding, give it a border. So let’s take a look at that. Now let’s round out the corners a little bit by adding in some border‑radius. Here I’ll go with 3px. Now, all we need to do is change the text colour to white. Well, there it is, that’s starting to look much, much better.
I’ll open up a blank page in the browser to get things started because the HTML doesn’t matter right now. In my location bar, I’ll type
about:blank, and that gives me this friendly, clean, empty page. Now I’ll open up the developer tools and switch over to the Console tab. Now, a useful keyboard shortcut to know is Ctrl+L, and that clears the console. So if I end up with some gibberish in here and I want to clean that out, I can press Ctrl+L and make that go away, or you can hover over the top here, and it’ll show you the command to clear the console.
So let’s greet our new friend the browser and start typing hello, and press Enter.
So let’s try this again. Instead of just typing hello, I’ll surround the word with quotation marks. Now when we type in hello inside the quotes and press Enter, instead of an error, it shows us the string that we typed in.
"hello".length, and this returns the number of characters in the string.
So strings are a series of characters, including whitespaces, like line breaks and spaces, just like if we type a different message.
It’s probably no surprise to you that computers are quite good at working with numbers. If we go back over to the console, you’ll notice that the browser immediately recognizes the value as a number when we type in a number.
There’s no special formatting needed here. We can type in what you might think of as an equation, and the browser will figure out the answer for you right here in the console. So if we type, the answer pops up immediately.
So if you’re ever in need of a calculator, your web browser can always help. Now, what we just typed in,
So when dealing with numbers, you can have the browser evaluate any type of formula or expression that you can think of. What’s even interesting about the console for math is that you can see the incremental values as you type out an equation. For instance, if I type in
(6 * 6), notice how when I close the parentheses, it gives me
36. But I want to divide that by
(2 * 3), and that gives me 6.
Now, in our expression, we’re using mathematical operators, the plus sign, that slash to divide, and even parentheses. When it comes to programming, we use those operators for more than just giving instructions in mathematical equations. But before we go down that road, let’s first talk about variables.
Now having numbers and strings in your program, don’t get me wrong, that’s great. But, there’s not a lot you can do with them just by themselves. One of many ways that programs, and in our case web applications, can do all they can is because they use variables. You could think of a variable as a container, a container where you can change the contents at will.
Looking at the console again, if you recall from our discussion with strings, I will type “John” if I wanted to type my name as a string. And, also, this is great, but it’s just not that useful.
let, and then we give it a variable name. In this case, we’ll create a variable name and call it name, and we’ll set that equal to my name.
Now something powerful just happened here because now, if we take a look at the contents of the name variable, you can see it’s “John”.
But I can also change that value. Now I can set the variable name equal to “Sharing”. So if I go back and ask the variable for its value again, I get “Sharing”.
Notice something special that just happened here. When I created the variable, I gave it the keyword of
let. So in English, I’m saying, let a variable with the name of
name have the value of
"John". But when I want to change that value, I simply set
name equal to the new value, which is
"Sharing" in this case, and I can change that value at will. So if I want
name to equal something else, I can do that.
Now I’m showing you how to work with strings, but you can declare variables for numbers and arrays and functions and all these other things we haven’t talked about yet. But a variable is just a container for values.
There is one type of container where you can set the value once and then can’t change it again. And that’s called a constant. I realize that it sounds a bit odd, the idea of having a variable, which kind of stands for something that varies, but you can’t change its value. So while I want you to think of variables as containers for things that can change, you can also think of them as placeholders for other values.
When dealing with variables assigned a value and then don’t change after that, we’re working with a placeholder for an actual value. So suppose for a minute you want to create a program that processes orders. In this system, we want to set the maximum number of orders for any given product. We need a container or placeholder for that value, and we want to declare it so that it can’t be changed later on.
So let’s declare a variable named
maxQuantity that tells the interpreter that it needs to remain constant once the value is set and it can’t be changed. Right now, if we try to change the value to 3, we get an error saying that we’re trying to assign a value to a constant variable, which isn’t allowed.
So you use
let when you want to create a variable with a value that can change, and you use
Cool! We are getting the hang of one of the most versatile and widespread software development languages on the planet!
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.
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
See you in the next post!