01 Project - Online Shop

Assessment details

Assesment details are on iQualify classroom

Brief

A client has come to you with a list of products and needs you to build them an online shop. They have provided a rough idea of the layout they want, and the content in a Google Document. You will need to design and build a website from these requirements.

Online shop brief

The website needs to work across multiple screen sizes and use design principles to make the content easy to read. It needs to use semantic HTML and CSS for the page design.

Rationale

Taking requirements from a customer and turning them into a website is a common requirement in the software industry. Ensuring you can translate design and content into semantic HTML, and writing good quality CSS is a critical skill as a web developer.

Instructions Part A - Home page

The approach you can take when building this site is to build page by page, starting with your mobile design and working your way upwards.

Make sure you commit to git very regularly throughout your development process. Write clear commit messages such as "Create HTML content for the product listing page".

Read the brief, and make sure you understand all the requirements. Clarify with your instructor if anything is not clear.
Create a file in the Submission folder for your HTML, name it index.html, and add all the HTML content for the home page, including the header
Create a CSS file in your Submission folder names style.css, and link it to your index.html file
Start with your mobile design. Add all your base CSS such as heading font sizes, line heights, general colours of the text etc. Complete the design for mobile.
Add a media query for your next screen size, and add a CSS grid. Add any extra CSS you need in this media query for the medium screen.
Add another media query for your large screen size, and update the CSS grid properties if required. Add any extra CSS you need in this media query for the medium screen.

Instructions Part B - Single product page

Choose a single product from the brief, and build the page for that product first.
Create a file in the Submission folder for your HTML, name it product1.html (or something appropriate), and add all the HTML content for the product, including the header
Following the process outlined in Part A to complete the design for the product page. You might need a different grid for the product page, you can achieve this by using a different class name for the grid container.
Start with the mobile design first, then add the next screen size, and then the largest screen size.
Once complete, you can create the other two product pages, and update the HTML content for them without changing the CSS. Link to these product pages from the home page.

Instructions Part C - Contact page

Create a file in the Submission folder for your HTML, name it contact.html, and add all the HTML content for the contact page, including the header
Following the process outlined in Part A to complete the design for the contact page.
Start with the mobile design first, then add the next screen size, and then the largest screen size.
Once complete, make sure all the navigation links to the contact page throughout the site.

Instructions Part D - Upload to Render and Lighthouse workflow

For a general overview of setting up Render view this Loom video

Sign in to Render with your GitHub account
Click on the New + button
Click on Static Site
In the following screen copy the URL of your project on GitHub (it should look like https://github.com/Developers-Institute-Classrooms/01-project---html-css---online-shop-XXXX
Paste it in to the Public Git repository field and click Continue
You may need to connect your GitHub account to Render.
Authorise your account
On the next screen on Render enter the Name as html-online-shop
Set the Publish directory as ./Submission
Click the Create Static Site button, and you should see a terminal in the browser
Once the message "Your site is live", you can then click on the purple link with a URL similar to https://html-online-shop.onren...
Save and copy the url for your new website it should look like this for example https://html-online-shop.onren...
In the .github/workflows/lighthouse.yml replace the "replace-me" sub domain part of the urls item and add a comma delimited string of your pages to the file like this:

      - name: Lighthouse
        uses: foo-software/lighthouse-check-action@master
        id: lighthouseCheck
        with:
          outputDirectory: /tmp/artifacts
          urls: "https://replace-me.onrender.com/,https://replace-me.onrender.com/contact.html, https://replace-me.onrender.com/product1.html"

Please note that each URL of your website will need to be declared in the comma delimited string.

Submit your Project

Feedback has been completed, and committed to git
Commits are pushed to GitHub
Site set up on Netlify

Git CLI Refresher

If you need help remembering what commands to type with git, use the following as a reference, or watch the git walkthrough tutorial video

# when ready to commit and push
git add .

git commit -m "Added product HTML to the product listing page"

git push origin main

MorganHannahRoss / online-shop-html-css