Your Fashion Portfolio Project

Beginning your collection of portfolio projects with a website for a fictitious fashion outlet.

Introduction

Below you can see a screenshot of the single-page website you will create.

final
  • In the <header> or 'hero block' is a background image.
  • In the <main> part are five <section> blocks of content.
  • All text on the web page is in the 'Playfair Display' font from Google Fonts.

Portfolio project folders and files

Your first task is to create the folders you need for this project.

  1. For your first project, the Van Gogh project, you created a new folder named 📁 portfolio inside your ‘main’ 📁 websites folder. file-explorer-portfolio-folder   Inside this 📁 portfolio folder, create a sub-folder to hold the files for your Fashion project. file-explorer-portfolio-folder Name the new sub-folder as 📁 fashion (all small letters).
  2. Inside this new folder, create an 📁 assets sub-folder.   And inside this, create a 📁 CSS sub-folder, an 📁 img sub-folder, and a 📁 js sub-folder. file-explorer-portfolio-folder

✅  All done. You now have created the folder with sub-folders for your Fashion web page project.

Project resources

Your next task is to obtain the various files needed for your Fashion project.

Web page

Save the following 'starter' web page to your 📁 fashion folder:

index.html

Stylesheets

Save the following two stylesheet files to your 📁 fashion/assets/css sub-folder:

lunevedy.css and custom.css

JavaScript file

Save the following JavaScript file to your 📁 fashion/assets/js sub-folder:

menu.js

Your folders and four files (one web page, two stylesheets and one JavaScript file) should now look as shown below

Sample image

Project text

All the text you need for this web page is in the file below. Only <p> tags have been used for basic formatting.

text.html

You do not need to download this file. You can simply copy-and-paste from it.

Project images

Download the following five images to your 📁 fashion/assets/img sub-folder.

✅   That's it. You now have all the resources you need to begin working on your Fashion project.

Launching the Lunevedy app and VS Code

Click the link below to open the Lunevedy app in a new tab of your web browser.

Lunevedy

files

Next, start VS Code and open the two files below.

  • fashion/index.html
  • fashion/assets/css/custom.css
files files

You are now ready to build the various content ‘blocks’ of your web page.

Creating the ‘hero block’ layout

On the home page of the Lunevedy app, choose the Hero block 2 option.

files

On the next screen displayed, choose the following menus and options:

HERO TEXT

Animation

Choose Fade In

HERO BUTTONS

Buttons

Choose None

When finished, click the Copy HTML button near the bottom-right of the screen.

files

In VS Code, display the index.html web page.

Select the opening <header> and closing </header> tags.

files

Now, paste in the copied text.

Your VS Code screen should now look as shown below.

files

Edit the <img> tag as shown below.

files

Because you have not updated any of the default colours in the 'hero block', the Copy CSS button at the bottom-right of the screen is not enabled.

files

In VS Code, save your index.html file. Display it in your web browser. It should look as shown below.

files

Update the 'hero block' with the words from the text.html file.

files

Save your index.html page and reload it in your web browser.

files

To speed up the loading of the hero-still.jpg poster image for the background video, copy-and-paste the following code just after the "Preload hero image" comment line in the head.

<link rel="preload" href="assets/img/hero-still.jpg" as="image">  

✅   Excellent. You have now completed the ‘hero block’ of your Fashion web page.

Creating the ‘deckhead’ layout

As a web page designer, you do not want to show visitors too much information too soon. So it's a good idea to place a short block of introductory text under the header 'hero block' before you list your products or services in detail.

In the US, this short introduction is called a 'deckhead'. In the UK, it's known as a 'standfirst'.

The 'deckhead' will be the first section block after the opening main tag.

In the Lunevedy app, click the Back option near the top-left of the screen. On the home page, click the Single Column option.

files

On the next screen displayed, choose the following menus and options:

SECTION

Class Name

Leave this at section-style-1.

Horizontal Alignment

Choose Center and Center.

Background Color

Choose Solid and green-800.

TEXT

<h2>

Click Choose and white-000.

<p> and <li>

Click Choose and white-000.

Standfirst / Deckhead

Choose Yes.

You are now finished with the Text menu.

 

Next, click the Copy HTML button near the bottom-right of the screen.

In VS Code, display the index.html web page. Inside the opening <main> and closing </main> tags, paste in the copied text.

You can delete any unnecessary line breaks.

You can also delete the second and third paragraph of placeholder text.

Your VS Code screen should now look as shown below.

files

Update the 'deckhead' with the words from the text.html file.

files

Save your index.html page.

Return to the Lunevedy app. At the bottom-right of the screen, click the Copy CSS button.

In VS Code, display the custom.css file and paste in the copied style rules. Your stylesheet should now look as follows.

files

Save your custom.css file. In your web browser, your page should now look as shown below.

files

Next, add the following internal hyperlinks to the text of the 'deckhead.'

files

Save your index.html web page and reload it in your web browser.

files

✅   You have now completed the 'deckhead'/'standfirst' block of your Fashion web page.

Creating the main content layout

Now you will create four section blocks to hold the main content of your web page. You will use two sets of CSS style rules: section-style-2 and section-style-3.

In the Lunevedy app, click the Back option near the top-left of the screen. On the home page, click the Single Column option.

On the next screen displayed, choose the following menus and options:

SECTION

Class Name

Leave this at section-style-1.

Horizontal Alignment

Choose Left and Left.

Background Color

Choose Solid and trend-400.

You are now finished with the Section menu.

BUUTONS

Buttons

Choose One.

Button Style

Choose Rounded.

You are now finished with the Buttons menu.

ILLUSTRATIONS

llustrations

Choose Yes.

IMAGE

Choose Picture.

You are now finished with the Illustrations menu.

Next, click the Copy HTML button near the bottom-right of the screen.


In VS Code, display the index.html web page. After the first 'deckhead' section, paste in the copied text.

You can remove any unnecessary line breaks and also the third paragraph of text.

Move the container-btn div to the bottom of the section

vscode-bg-colours

Then paste the copied text a second time below it. You now have two new section blocks in your web page, each with the same class name of section-style-2.

Save your index.html page.

Return to the Lunevedy app. At the bottom-right of the screen, click the Copy CSS button.

In VS Code, display the custom.css file, scroll down to the bottom, and paste in the copied style rule. Your stylesheet should now look as follows.

files

Save your custom.css file.

In the index.html file update the text and add the correct two images.

Repeat the above steps for two more section blocks, each with the class name of section-style-3. Use a background color of white-000.

In VS Code, display the index.html web page.

In the four buttons, enter the new text of 'Shop the Collection'.

In the opening section tag at the top of each block, enter the appropriate IDsto link each section to a hyperlink in the 'deckhead' near the top of the web page.

Adding the final touches

In the head of your web page, remove the links to the Font Awesome and Google Material Design icons.

Update the title and description as follows:

  • Super Snazzy Fashion
  • Europe's leading online retailer of quality fashion products at affordable prices.

Also, at about line 15, replace the link to the lunevedy.css stylesheet with the faster-loading, minified version of lunevedy.min.css.

<link rel="stylesheet" href="assets/css/lunadoge.min.css" />  

Finally, add the Google Font of 'Playfair Display' as the global font for the web page.

Add the font to the head of the web page in the usual way. And then add this line to the custom.css stylesheet.

files

Uploading your files to GitHub

After finishing your web page and stylesheet, you are now ready to upload them 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. github-signin
  2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your entire 📁 portfolio sub-folder to upload it to your repository on GitHub. Introduction to HTML
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your portfolio project web page is now published on GitHub at a web address similar to the following:

https://username.github.io/portfolio/fashion/index.html
or simply:
https://username.github.io/portfolio/fashion

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