Web Agency Website Project (One)

Introduction

This three-page website for a fictitious web design agency showcases responsive 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, three or four columns on desktop/laptop screens and as two columns or a single column on mobiles.
• Add shadow effects to images.
• Add icons from Font Awesome.
• Add and style horizontal rules.

Adding background colours

In the style.css file, you can see two selectors with a single style rule have been created for background colours.

• One is a pastel pink background for the container-flexbox parent containers.
• The second is a light blue background colour for the .item-col-3 child columns.

Let’s apply these background colours to your three web pages.

1. In VS Code, display the index.html web page.
2. Add the class of bg-pastel-pink to the parent containers that begin with the headings “Stand out from the crowd” and “Let’s make something great together“.
3. To each one of the three child item-col-3 columns that contain headings, text and images, add the bg-pastel-blue class.
4. Switch to the services.html web page.
5. Add the class of bg-pastel-pink to the parent containers that begin with the headings “Your brand on every platform” and “Collaboration today. Success tomorrow.”
6. Switch to the team.html web page.
7. Add the class of bg-pastel-pink to the parent containers that begin with the headings “Need a super hero?” and “We are here to help.”
8. Save the index.html, services.html and team.html files.

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

Adding shadow effects to images

In the style.css file, you can see a selector has been created to add a drop shadow effect to images.

Let’s apply this style to the three images in the home page of your sample website.

1. In the index.html web page, add the class of image-shadow to the images within the three item-col-3 child column elements.
2. Save the index.html file.

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

Adding a horizontal rule to the hero sections

Next, let’s add a decorative horizontal line to the ‘hero’ section of the three web pages. The line will be between the h1 and h2 headings.

1. In the index.html, services.html and team.html web pages, add the hr horizontal rule tag as shown below.
2. In the style.css file, add the following new CSS selector and style rules.
3. Next, add the following two media queries, selectors and style rules for desktop/laptop and mobile screens.
4. Save the index.html, services.html, team.html and style.css files.

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

Adding Font Awesome icons to the ‘Services’ page

Now you will add some Font Awesome icons to the services.html web page of the sample website. The child items with the item-col-4-2 class have already been created to hold the icons. You just need to add them. Follow these steps.

1. In the head section of the services.html web page, just before the closing </head> tag, copy-and-paste the following comment line and code.

   <!-- Link to icons for Font Awesome 5 -->;
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">  
   

   This adds the Font Awesome stylesheet to your web page.
2. As you scroll down the services.html file, you can see the locations for adding the Font Awesome icons. Each contains the placeholder text ‘icon here’ and is within an item-col-4-2 child column. Below are just three of the eight locations.
3. One after the other, add the following eight icons.

   <i class="far fa-lightbulb"></i>
   

   <i class="far fa-comments"></i>
   

   <i class="fas fa-globe"></i>
   

   <i class="fab fa-instagram"></i>
   

   <i class="fas fa-at"></i>
   

   <i class="fas fa-video"></i>
   

   <i class="fas fa-user-friends"></i>
   

   <i class="fas fa-mobile-alt"></i>
   

4. Save the services.html file, and, in your web browser, view the effect on your web page. It should look as shown below.
5. In your style.css file, add the following new properties and values for colour and spacing to the .container-flexbox .item-4-2 i CSS selector.
6. Save the style.html file.

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

Removing the visual layout guides

You can now delete the visual layout guides from your stylesheet.

1. At the bottom of your style.css file, delete the styles for coloured borders around the parent containers and child columns.
2. Save your style.css file.

Click here to view a finished version of the web design agency website.

Adjusting vertical spacing

After removing the coloured borders and blank ‘spacer’ paragraphs, scroll down the web page in your web browser to check the spacing between the various elements looks correct.

• On the index.html web page, for both desktop/laptop and mobile screens, you can see that there is too much vertical spacing after the “Some recent projects” sub-heading.
• Also on the index.html web page, but only for mobile screens, you need to add some spacing under each of the three project examples.

Let’s fix this.

1. At the bottom of the style.css file, add the following two new selectors, each with a single style rule:
2. Switch to the index.html web page.
3. Add the new class of no-padding-bottom to the parent container-flexbox section.   And to the <h2> sub-heading, add the second new class of no-margin-bottom.
4. Switch to the style.css stylesheet.   At (about) line 87 you can see a CSS selector with style rules that apply when a item-col-3 child column is inside a parent container styled with both the container-flexbox and work-samples classes.
5. Switch to the index.html web page.
6. Add the class of work-samples to the parent container-flexbox section of the three sample projects as shown below.
7. When finished, save your index.html and style.css files.

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

Click here to view a finished version of the web agency website.

Uploading your project to GitHub

The final step is to upload your project to GitHub.

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

So you will need to upload this web-agency folder to your account on GitHub.

1. 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.
2. 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
3. On the next screen displayed, you can see a list of the contents your repository.   At the top of the list is a folder named portfolio. You created this folder when uploading your Smoothies project. Click the portfolio folder to access it.
4. Your GitHub screen should look like that shown below. You can see the portfolio folder’s name near the top of the screen.
   • The portfolio folder already contains a smoothies sub-folder and other sub-folders from your previous projects.
   • The portfolio folder is also the location to where you want to upload your web-agency project sub-folder.
   
   
   IMPORTANT Ensure your GitHub account is displaying the portfolio folder before continuing.
   Otherwise, you will upload your new project to an incorrect folder.
5. With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files.
6. You are now ready to upload the entire web-agency folder and all its contents to the portfolio folder on your GitHub account.   In File/Windows Explorer on your computer, drag-and-drop the web-agency folder to the GitHub tab in your web browser.
7. After uploading the web-agency 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.
8. After GitHub has finished processing your upload, it will re-display the main page of your repository. This will list your portfolio folder and files you previously uploaded to your main repository. Click the portfolio folder.
9. On the next screen GitHub displays you should see the sub-folders from your previous projects and the web-agency folder you have just uploaded. Click the web-agency folder.
10. On the next screen you should see the folder’s index.html file and its assets sub-folder.
11. Click 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 the css sub-folder. Check that it contains the stylesheet file.
    • Within the assets sub-folder, click 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/web-agency/index.html

or, simply:

https://username.github.io/portfolio/web-agency

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

Return to Contents.