Project Smoothies (One) | IBAT Web Design Portfolio Project

Introduction

This responsive single-page website for a fictitious smoothie outlet contains a showcase of multi-column layouts created with CSS flexbox.

You can display a finished version of this project by clicking the image below.

Learning Goals

At the end of this Tutorial you will be able to:

Create layouts with CSS flexbox that display as two columns on laptop/desktop screens and as a single column on mobiles.
Add a gutter between columns.
Re-order how content within columns is displayed on mobile screens.
Add background colours to parent flexbox containers.
Add images with transparent backgrounds to columns.

Portfolio project folders and files

Your first step is to download the files you need for this project.

If a sub-folder named portfolio does not already exist inside your websites folder, create it now.
DO NOT name your sub-folder with an upper-case ‘P’ as in Portfolio.
And DO NOT use some other mixture of upper and lower-case letters, such as PortFolio or PORTfolio or whatever.
Also, DO NOT enter any blank spaces in the name of your sub-folder: type portfolio NOT port folio.
Download the following compressed file to your computer: smoothies.zip
If a sub-folder named portfolio does not already exist inside your websites folder, create it now.
Uncompress the ZIP file into your websites/portfolio sub-folder as shown below.

This will create a sub-folder named smoothies inside your portfolio folder.

The folders, sub-folders and files for this 'Smoothies' project will be as shown below.

Working with your project files

Now you can begin to work with the files you have downloaded.

In Visual Studio Code, open the following two downloaded files. The first is the web page; the second, the stylesheet:
- index.html: You will find this in the main folder of your smoothies folder.
- style.css: You will find this in the assets/css sub-folder of the smoothies folder.

You can close any other files you may have open in VS Code.

The structure of your project web page

Display the project index.html web page in your Chrome or Mozilla Firefox Developer Edition browser. It should look as shown below.

Visual layout guides

To help you distinguish between the various parent and child elements, the following two styles are added at the end of the style.css stylesheet.

You can remove these styles as you progress through the project.

Sub-dividing the web page with the section tag

As you can see, the index.html web page is sub-divided or structured into five main ‘content blocks’.

You could use the <div> ... </div> tag pair to sub-divide the web page into blocks.

But a better, more modern HTML5 way is to use another tag pair with the same effect: <section> ... </section>.

Section blocks and class names

In VS Code, you can see that the index.html web page is structured as follows:

There are five section containers. These are the ‘parents’ of the content they contain.
The first section container has only one class name: container-block.
The other four section containers beneath it have two class names: container-block and container-flexbox.
The four section containers after the first one each have two child items inside them. The child items are all created with the <div> ... </div> tag and always have the same class name of item-col-2.

This flexbox parent-child structure enables the design of a two-column layout for desktop/laptop screens.

The relationship between the page structure and the class names is shown below.

Adding padding to the sections

The purpose of the container-block class is to add spacing around the four inside edges (top, right, bottom and left) of the section containers.

Follow these steps to add this spacing.

In VS Code, display the style.css file.
Near the top of the stylesheet, you can see two .container-block selectors have been created. The first is inside a media query for desktops and laptops. The second is inside a media query for mobile screens. At the moment, the two .container-block selectors have no values set for them.
Add the padding values below for the two .container-block selectors.
Save your style.html file.

In your web browser, view the web page on desktop/laptop and mobile size screens. It should look as shown below.

Styling the introduction text

At the top of the index.html web page, just after the opening <body> tag, you can see a container-block section containing text enclosed within a <h2> ... </h2> tag pair.

In VS Code, display the style.css file. The h2 selector has just one style rule applied to it. This rule applies a fixed font-size value of 48px to the introduction text.
Update the font-size property of the h2 selector to a fluid value using the typographic equation.
```
  font-size: calc(26px + (54 - 26) * ((100vw - 320px) / (1600 - 320)));
```
No color value has been set for the introduction text. As a result, the web browser displays the text in black (#000), the default text colour. Add a new color property with a purple value.
```
  color: #733fc0; 
```
By default, text in headings or paragraphs is aligned against the left edge of its container. (text-align: left). Add a new text-align property and value as follows.
```
  text-align: center; 
```
Finally, for most web browsers, the default value of line-spacing is in the range 1.2 to 1.3. This is fine for one or even two lines text with only a few words. For multiple lines of text, however, this spacing between lines needs to be increased to make the text more readable. Add a new line-height property and value as follows.
```
   line-height: 1.6;  
```
The h2 selector and its declaration of style rules should now look as shown below.
Save your style.html file.

In your web browser, view the web page on desktop/laptop and mobile size screens. It should look as shown below.

Adding background colours to the sections

In the style.css stylesheet, you can see four selectors with style rules have been created for background colour values.

Let’s apply these background colour classes to your project web page.

In VS Code, display the index.html file.
Add the following four classes, one after the other, to the four sections that have classes of both container-block and container-flexbox.
Save your index.html file.

In your web browser, view the web page on desktop/laptop and mobile size screens. It should look as shown below.

Adding gutters to the two-column layout

On desktop/laptop screens, the two-column layout for each of the four smoothies has no gutter spacing between the left and right child items.

Let’s change this.

In VS Code, display the style.css file.
Within the desktop/laptop media query for the .item-col-2 class selector, reduce the width from 50% to 47% as shown below. The remaining 6% of horizontal space will be added between the two child items, so creating a gutter between the left and right columns.
Save your style.html file.

In your web browser, view the web page on desktop/laptop size screens. It should look as shown below.

The above changes apply only to desktop/laptop screens (768px or wider) and have no effect on mobile screens (767px or narrower).

On mobile screens, the item-col-2 child columns will always fill the full width (100%) of the parent flexbox container.

Updating styles inside the child columns

The next step is to update the styles of the h3 sub-headings and p text paragraphs within the item-col-2 child columns.

In VS Code, display the style.css file.
At the moment, these look as shown below.

Update the style rules of the h3 sub-heading selector by copying-and-pasting the following.

  font-size: calc(32px + (64 - 32) * ((100vw - 320px) / (1600 - 320)));
  color: #d1274b; 
  letter-spacing: 2px; 
  margin-bottom: 4px;

Next, update the style rules of the p paragraph selector by copying-and-pasting the following.

  font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));
  color: #2F4F4F; 
  letter-spacing: 1px; 
  line-height: 1.6;

The complete style rules for the h3 and p selectors should now look as shown below.
Save your style.html file.

In your web browser, view the web page on desktop/laptop size screens. It should look as shown below.

Targeting the blueberry smoothie sub-heading and text

Of the four smoothies, the sub-heading and text of the blueberry one is difficult to read. You need to increase the colour contrast between the words and the purple background.

One option would be to change the text colours to white, for both the sub-heading and the text paragraph, as follows.

  h3 { color: #fff; }
  p { color: #fff; }

Unfortunately, this causes the sub-headings and text of all four smoothies to be displayed in a white colour. This is not what you want.

What you want is your style.css stylesheet to ‘target’ the h3 and p elements of the blueberry smoothie so that only they are displayed in white.

In the index.html file, you can see that only the blueberry smoothie has a class name of bg-blueberry applied to it. None of the three other smoothies have this class name.

Therefore, in your CSS stylesheet, you can target the sub-heading and text paragraph within this block with the following parent-child selectors.

  .bg-bluebery h3 { some property: some value; }
  .bg-blueberry p { some property: some value; }

Let’s do that now.

In your style.css file, enter the following. Or, in shorter form.
Save your style.html file.

In your web browser, view the web page on desktop/laptop and mobile size screens. It should look as shown below.

Centre-aligning child elements on mobile screens

By default, headings and text paragraphs within web pages are aligned against the left edge of their containing element.

For mobile screens only, let’s centre-align the sub-headings and paragraphs of the four smoothies.

In VS Code, display the style.css file.
Under the new lines you added above to display the blueberry sub-heading and text in white, add a new comment and mobile media query as shown below.
Next, enter the text-align property with a center value for both the h3 and p selectors.
Save your style.html file.

In your web browser, view the web page on a mobile size screen. It should look as shown below.

Alternating child items horizontally on desktops/laptops

On desktop/laptop screens, for all four smoothies, the sub-heading and text are always positioned in the left column and the image in the right.

Follow the steps below to alternate how the two-column layouts for each of the four smoothies are displayed on screens of 768px width or above.

In VS Code, display the index.html file.
Within the second two-column flexbox container (for ‘Apple’ smoothies), change the order of the two child items as shown below. On desktop/laptop screens, this will position the apple image in the left column, and the text in the right column.
Next, within the fourth two-column flexbox container (for 'Lemon' smoothies), change the order of the two child items as shown below. On desktop/laptop screens, this will position the lemon image in the left column, and the text in the right column.

Save the index.html file, and, in your web browser, view the effect on your web page on screen widths of 768px or greater.

Reordering child items vertically on mobile screens

In the previous section, you swapped the left-right positions of the images and text for two of the four smoothies: the second (Apple) smoothie) and the fourth (Lemon) smoothie.

On desktop/laptop screens, this introduced some variety to the visual layout of your web page.

Now, let's examine your web page layout on mobile-sized screens.

In visual content layout, the general standard is as follows: first the image, then heading and finally text. See the examples below.

If you display your web page on a mobile screen, you can see that:

For the first (Watermelon) and third (Blueberry) smoothies, the sub-heading and text are displayed first, and then the image. This is not the visual effect you want.
For the second (Apple) and fourth (Lemon) smoothies, the image is displayed first, and then the sub-heading and text. This is the visual effect you want.

Let’s change the first and third smoothie child items, so that for all four smoothies, the image is always displayed above the sub-heading and text.

In VS Code, display the style.css stylesheet.
The first pair of child columns you need edit each have a CSS selector of .item-col-2 and are inside a parent element with the selector .bg-watermelon. So, to target these child elements in your CSS file, you would type the following:
```
/* Mobiles: Re-order columns inside first and third flexbox parent containers */ 
  .bg-watermelon .item-col-2 { some property: some value; }
```
In this case, you want to target each of the two child elements individually. You can do this with the :nth-child(some number) selector. So you would type:
```
  .bg-watermelon .item-col-2:nth-child(1) { some property: some value; }
  .bg-watermelon .item-col-2:nth-child(2) { some property: some value; }
```

The second pair of child elements you want to target have a parent with the .bg-blueberry selector. So, to target them, you would enter the following:

  .bg-lemon .item-col-2:nth-child(1) { some property: some value; }
  .bg-lemon .item-col-2:nth-child(2) { some property: some value; }

You want your changes to apply only on mobile screens. So you would include a media query as follows.

/* Mobiles: Re-order columns inside first and third flexbox parent containers */ 
@media (max-width: 767px) {
  .bg-watermelon .item-col-2:nth-child(1) { some property: some value; }
  .bg-watermelon .item-col-2:nth-child(2) { some property: some value; }
  .bg-lemon      .item-col-2:nth-child(1) { some property: some value; }
  .bg-lemon      .item-col-2:nth-child(2) { some property: some value; }
}

You are now ready to update the order in which the pair of item-col-2 child elements within the bg-watermelon and bg-lemon parents. The CSS property that controls the order in which child elements of a parent element are displayed is called simply the order property. Copy-and-paste the final code below.

/* Mobiles: Re-order columns inside first and third flexbox parent containers */ 
@media all and (max-width: 767px) {
  .bg-watermelon .item-col-2:nth-child(1) { order: 2; }
  .bg-watermelon .item-col-2:nth-child(2) { order: 1; }
  .bg-lemon      .item-col-2:nth-child(1) { order: 2; }
  .bg-lemon      .item-col-2:nth-child(2) { order: 1; }
}

Save the style.css file, and, with your web browser sized for mobile screens, view the effect on your web page. It should look as shown below.

Removing the visual layout guides

You can now delete the visual layout aids from your web pages and stylesheet.

Within your web pages, delete the sets of three blank paragraphs before and after the parent flexbox containers.
At the bottom of your style.css file, delete the styles for coloured borders around the parent containers and child columns.
When finished, save your index.html and style.css files.

You have now completed this Tutorial.

You can display a finished version of the project web page by clicking the image below.

In later Tutorials for this portfolio project you will add an email sign-up form, a footer and menus.

Uploading your project to GitHub

The final step is to upload your project to GitHub.

Before you upload your style.css stylesheet, remove the visual layout guides.

All the files for this project are in a sub-folder named smoothies of your websites/portfolio folder.

So you will need to upload this portfolio folder, which contains both files and sub-folders, to your account on GitHub.

Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now.
On your GitHub home page, click the name of the repository (‘repo’) that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it.
From the dropdown list displayed, choose the option Upload files.
You are now ready to upload the entire portfolio folder and all its contents to your GitHub account. In File/Windows Explorer on your computer, drag-and-drop the portfolio folder to the GitHub tab in your web browser.
After uploading the portfolio folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete.
Your Github account should now contain a folder named portfolio as shown below. Click on this to view its contents. It should contain the smoothies sub-folder. Click on this to see both the index.html file and the assets sub-folder.
Click on the assets sub-folder to view its contents. You should see that it contains the two sub-folders: css and img.
- Within the assets sub-folder, click on the css sub-folder. Check that it contains the stylesheet file.
- Within the assets sub-folder, click on the img sub-folder. Check that it contains all the image files.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/smoothies/index.html

Or, simply:

https://username.github.io/portfolio/smoothies

It may take a few minutes for your uploaded files to appear on GitHub.

Return to Contents.

Contents >

Smoothies Website Project (One)

Introduction

Learning Goals

Contents

Portfolio project folders and files

Working with your project files

The structure of your project web page

Visual layout guides

Sub-dividing the web page with the section tag

Section blocks and class names

Adding padding to the sections

Styling the introduction text

Adding background colours to the sections

Adding gutters to the two-column layout

Updating styles inside the child columns

Targeting the blueberry smoothie sub-heading and text

Centre-aligning child elements on mobile screens

Alternating child items horizontally on desktops/laptops

Reordering child items vertically on mobile screens

Removing the visual layout guides

Uploading your project to GitHub