Exciting Web Development Journey – Pie Shop Website 4/7

Overview

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.

SITK- Pie Shop main background image

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 3em, and 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.

SITK- Pie Shop main padding top and bottom and min height

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.

SITK- Pie Shop adding padding to the footer

For the content inside the middle, which means the aside and article elements, we’ll give it a padding of 2em.

SITK- Pie Shop adding padding to aside and article

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.

SITK- Pie Shop centering logo on the page

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.

SITK - Pie Shop - Home Page

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.

SITK- Pie Shop article width to 75%

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 min‑width of 768px, so these styles will only be applied to screen sizes that are 768px wider and above.

SITK- Pie Shop start media query to desktop experience

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.

SITK- Pie Shop desktop experience - main display flex

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 margin‑left of 2% of the total space available to the browser window.

SITK- Pie Shop desktop experience - aside margin left 2%

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.

SITK- Pie Shop desktop experience - result

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.

SITK- Pie Shop back to the index html page

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.

SITK- Pie Shop fixing home page title

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 font-size of 3em, and what we’ll do is add some margin-top of 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.

SITK- Pie Shop page-specific styles - h1 font size margin top

This banner is a little bit of a problem because you’ll notice that it pushes off and seems to mess up the layout.

SITK- Pie Shop page-specific styles - banner mess up layout

Now we can fix that by telling the banner we only want it to have a max-width of 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.

SITK- Pie Shop page-specific styles - fixing the banner layout messup

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.

SITK- Pie Shop page-specific styles - pop up welcome message

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.

Contact Page

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.

SITK- Pie Shop contact page - copying from index

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.

SITK- Pie Shop contact page - saving contact page 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.

SITK- Pie Shop contact page - empty contact page

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.

SITK- Pie Shop contact page - with content

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 example@bethanyspieshop.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

Again, using the finished product as our reference, I’m going to click on the Pies menu and get a list of available pies from the Home page. Now we’re going to build this page in two different stages. First, I’ll show you how to develop the page to display the pictures in this type of layout, and then next, we’ll begin talking about JavaScript, and after that discussion, we’ll add the interactivity to this page.

SITK- Pie Shop - Pies List page

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.

SITK- Pie Shop - empty pies page

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 class of 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.

SITK- Pie Shop - pies page - adding a section

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 class of 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.

SITK- Pie Shop - pies page - pie div

Well, we need an image for it, so here’s an image element for the thumbnail for our apple pie.

SITK- Pie Shop - pies page - pie div with image

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.

SITK- Pie Shop - pies page - pie div with title and price columns div

Then we have our description and then the button we need to place an order for the pie.

SITK- Pie Shop - pies page - pie div with description and button

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.

SITK- Pie Shop - pies page - cherry pie div

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.

SITK- Pie Shop - pies page - cherry pie div - data order attribute

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.

SITK- Pie Shop - pies page not styled yet

Responsive Columns

Taking a look at the final product one more time, this is the pies list page, and this one looks pretty nice.

SITK- Pie Shop - Pies List page

But the current state without any styles does not look as great.

SITK- Pie Shop - pies page not styled yet - desktop

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.

SITK- Pie Shop - pies page - targeting pie class for styling

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.

SITK- Pie Shop - pies page - targeting columns class for styling

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.

SITK- Pie Shop - pies page - title and price next to each other

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.

SITK- Pie Shop - pies page - h1 title and a secion with both pies

But that 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.

SITK- Pie Shop - pies page - section with columns-desktop class

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.

SITK- Pie Shop - pies page - apply display flex to columns-desktop class

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.

SITK- Pie Shop - pies page - comments in CSS

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 width of 200px, padding of 10px, a margin of 10px, 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.

SITK- Pie Shop - pies page - styling pie containers

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 width of 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.

SITK- Pie Shop - pies page - make pie images take 100% of container width

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.

SITK- Pie Shop - pies page - styling specific pie children selectors

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.

SITK- Pie Shop - pies page - styling pie columns width to 100%

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.

SITK- Pie Shop - pies page - align price right and set pie columns div to 50% each

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.

SITK- Pie Shop - pies page - align price right and set pie columns div to 50% each - explained

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.

SITK- Pie Shop - pies page - order button

So we have a Pies page, with a Home page and a Contact page. In the next section, I’ll introduce you to JavaScript, the programming language of the web. After we cover the foundations there, we’ll be able to start adding interactivity to the website.

JavaScript is one of the most popular programming languages on the planet, and it’s the language that runs right here in your browser. Up next, I’ll introduce you to JavaScript, starting from the very basics and take you all the way up into the mechanics that you need to make Bethany’s Pie Shop a real website.

Introduction to JavaScript

Computers are funny. They do only exactly what you tell them. Luckily for us, we have a long list of ways to help us talk to computers. While a processor only really understands one language, if you want to call it that, of 1s and 0s, as developers, we have an array of programming languages that help us take the commands we want to give a computer and turn it into something that it can understand. One of these languages is JavaScript. JavaScript is the language of the web. It runs on the web browser and can also run on the server. But here, we’ll focus on the code that you write to make a web page interactive in the browser. Now, as every language comprises a series of small building blocks, JavaScript is no different. There are some fundamentals that you need to know to get started using JavaScript. And in this short introduction, I’ll acquaint you with just what you need to get going. So let’s begin by saying hello to JavaScript.

Strings

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.

I’ll be using this command as we go along to keep the console nice and tidy. From this console window, we can type some JavaScript commands in there, and in the background, the browser’s interpreter will execute the code entered right here. Now an interpreter is just a little program that knows how to take the JavaScript commands we type and interpret them line by line into something the computer can understand.

So let’s greet our new friend the browser and start typing hello, and press Enter.

SITK- Pie Shop - Javascript - hello error

That’s not very fun. The first thing we found an error. That program was supposed to be fun. Well, it says hello is not defined. Remember how I said that computers are picky? Well, we need to tell the browser a little bit more about what’s going on and what we want it to do with what we’ve entered into the console. Now, if you take a little closer look at what we typed in, you’ll notice that our message hello is a word, yes, but it’s more than that. It’s a series of letters strung together to make a word. So what we need to tell the computer is just that. We need to say to the computer that it’s a string. Now strings are unique in JavaScript and any programming language because they represent text or a series of characters and spaces strung together.

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.

SITK- Pie Shop - Javascript - string hello

It is great because now the browser knows that this is a string, and we can unlock the power of JavaScript to work with strings. Let’s say we want to know something about the characters in our string. We could type "hello".length, and this returns the number of characters in the string.

SITK- Pie Shop - Javascript - hello string length

So strings are a series of characters, including whitespaces, like line breaks and spaces, just like if we type a different message.

SITK- Pie Shop - Javascript - working with JavaScript is fun

And really, working with JavaScript is a lot of fun. Well, the fun doesn’t stop there. JavaScript is quite good at dealing with numbers as well.

Numbers

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.

SITK- Pie Shop - Javascript - working with numbers

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.

SITK- Pie Shop - Javascript - working with equations

So if you’re ever in need of a calculator, your web browser can always help. Now, what we just typed in, 1 + 1, looks kind of like a mathematical equation, and it is. But in terms of how JavaScript sees that line of code, what we’re talking about is an expression. Expressions are lines of code that, when evaluated, give you a result. The concept of an expression goes way beyond just working with numbers, so we’ll talk about them more a bit. But I want to introduce you to the idea here at least.

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.

SITK- Pie Shop - Javascript - evalue a math expression

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.

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.

SITK- Pie Shop - Javascript - string John

If I take that same value and set a variable equal to my name, I can change the name and always get to the current value by looking at the variable. I’ll show you what that means here in just a minute. In JavaScript, we tell the interpreter we’re declaring a variable because we start the line with the word 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.

SITK- Pie Shop - Javascript - declare a string variable and assign it to John

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

SITK- Pie Shop - Javascript - checking variable name content

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

SITK- Pie Shop - Javascript - setting variable name to a different string

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.

SITK- Pie Shop - Javascript - setting variable name to something else

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 in JavaScript, the keyword const, which stands for constant, does just that.

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.

SITK- Pie Shop - Javascript - declare and ser a const and try to change it later

So you use let when you want to create a variable with a value that can change, and you use const when you want to ensure the value doesn’t change. And you’ll see both of these types of variables pop up as we implement the code for Bethany’s Pie Shop. Now there’s still more to discuss when it comes to variables. But for now, let’s take a pause. In the next post, we’ll continue taking a look at the plus sign and the equal sign and the role and purpose of operators in JavaScript and much more.

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.

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!