Your Smoothies Portfolio Project

Introduction

In this portfolio project, with a flexbox-based, multi-column website for a fictitious smoothie outlet.

You can view how this web page will look at the end of this Tutorial by clicking the link below.

index.html

In later Tutorials, you will complete this portfolio project by adding menus and a header, email contact form and footer to it.

Portfolio project folders and files

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

1. If a sub-folder named 📁 portfolio does not already exist inside your ‘main’ 📁 websites folder, create it now using all lower-case letters.
2. Download the following compressed file to your computer:  smoothies.zip
3. 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 your 'Smoothies' project will be as shown below.

You no longer need the downloaded smoothes.zip file. You can delete it from your 📁 websites/portfolio sub-folder.

The structure of your project web page

Display the project index.html web page in your web browser. It should look as shown below.

In VS Code, you can see that the index.html web page is structured into five section blocks.

At the top is a section block containing a h2 heading that fills the full width of the web page.

Beneath that are four section blocks. Each contains a flexbox parent (class name container-flexbox) with two child items (class name col-2) inside them.

This flexbox-based parent-child structure enables the design of a two-column layout for desktop/laptop (768px or wider) screens.

Visual layout guides

To help you distinguish between the various parent and child elements, the following two styles are added at the end to the head of the web page.

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

Styling the introduction text

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

1. 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.
2. Update the font-size property of the h2 selector to a fluid value using the typographic equation.

   font-size: calc(26px + (48 - 26) * ((100vw - 320px) / (1600 - 320)));
   

3. 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; 
   

4. 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; 
   

5. 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.
6. 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-color values.

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

1. In VS Code, display the index.html file.
2. Add the following four classes, one after the other, to the relevant section blocks for the four smoothies.
3. 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.

1. In VS Code, display the style.css file.
2. Within the desktop/laptop media query for the .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.
3. 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 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 col-2 child columns.

1. In VS Code, display the style.css file.
2. At the moment, these look as shown below.
3. 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; 
   

4. 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; 
   

5. The complete style rules for the h3 and p selectors should now look as shown below.
6. 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 its section block. 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-blueberry h3 { some property: some value; }
.bg-blueberry p  { some property: some value; }

Let’s do that now.

1. In your style.css file, enter the following. Or, in shorter form.
2. 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 (text-align: left).

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

1. In VS Code, display the style.css file.
2. 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.
3. Next, enter the text-align property with a center value for both the h3 and p selectors. Also, add some margin spacing above and below the images on mobile screens.
4. 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.

1. In VS Code, display the index.html file.
2. 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.
3. 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.

1. In VS Code, display the style.css stylesheet.
2. The first pair of child columns you need edit each has a CSS class of col-2 and are inside a parent element with the bg-watermelon class.   So, to target these child elements in your CSS file, you would type the corresponding CSS selectors:

   .bg-watermelon .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 .col-2:nth-child(1) { some property: some value; }
   .bg-watermelon .col-2:nth-child(2) { some property: some value; }
   

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

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

4. 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 .col-2:nth-child(1) { some property: some value; }
       .bg-watermelon .col-2:nth-child(2) { some property: some value; }
       .bg-blueberry  .col-2:nth-child(1) { some property: some value; }
       .bg-blueberry  .col-2:nth-child(2) { some property: some value; }
   }

5. You are now ready to update the order in which the pair of 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 (max-width: 767px) {
       .bg-watermelon .col-2:nth-child(1) { order: 2; }
       .bg-watermelon .col-2:nth-child(2) { order: 1; }
       .bg-blueberry  .col-2:nth-child(1) { order: 2; }
       .bg-blueberry  .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.

You can now delete the ‘red box’ style rule from the head of the web page.

Alternatively, wrap it inside comment tags, just in case you want to reuse this visual guide again later. To do so, copy-and-paste the following lines over the current ‘red box’ style rule.

<!--
<style>
    section { border: solid 2px red }
    .col-2  { border: solid 2px blue }
</style>
-->

✅ You have now completed this Tutorial and the first part of your ‘Smoothie’ portfolio project.

Your project web page should look similar to the example at the link below.

Sample Smoothies Web Page