/User-Centric-Milestone-Project

User-Centric Milestone Project (Code Institute Milestone Project 1)

Primary LanguageHTML

Adrian's Workshop

Welcome to Adrian's Workshop!

This webpage is aimed at anyone interested in woodwork, and who's not afraid to get covered in saw dust! This website should be a go-to for someone struggling with a practical issue or even a technical one, within reason. Above all else, this page should inspire creativity.

UX

Wireframe

I used https://balsamiq.com/ to help me with my wireframe.

Desktop Wireframe

Desktop wireframe

Mobile Wireframe

Mobile wireframe

Features

- Existing features

  • Desktop aside icons dance upon page loads.
  • Desktop menu and footer items dazzle you when hovered.

- Features left to implement

There are currently no features left to implement as the project is completed to the expectation of what's it was designed for (student project).

Technologies Used

Technologies used in this project:

HTML5:

CSS3:

Javascript:

Bootstrap 4:

Testing

The following test cases have been performed to test funtionality:

  • Navigating within pages, using the menu items | Expected behaviour = the different pages loading without new windows/tabs opening | Pass

  • Changing viewport to landscape | Expected behaviour = content fills the landscape view | Pass

  • Clicking "Fire Away!" with empty form fields | Expected behaviour = error message | Pass

  • Hovering anywhere in the desktop menu boxes | Expected behaviour = anchor tag should be clickable anywhere within the idividual boxes | Pass

  • Clicking the title heading (any screen size) | Expected behaviour = loads home page | Pass

  • Navigating through nav bar (mobile/ipad) | Expected behaviour = smooth navigation between pages / exiting back to current page when closing | Pass

  • HTML validated via https://validator.w3.org/ - received errors for duplicate ids and warnings for sections without header tags.

  • CSS validated via https://jigsaw.w3.org/css-validator/ - Pass

Deployment

For this project, I have used Github Pages to deploy and host the application.

Below are the steps I have taken to achieve this:

  1. Navigate to "settings";
  2. Scroll down to "GitHub Pages" section (see image below);
  3. Selected "master branch" and deployed.

GitHub pages

Github Pages link:

Credits

Background images courtesy of unsplash.com: Home background image: Photo by Ricky Kharawala on Unsplash About background image: Photo by Hal Gatewood on Unsplash Services background image: Photo by Dominik Scythe on Unsplash Gallery background image: Photo by Dominik Scythe on Unsplash Contact background image: Photo by Alexander Andrews on Unsplash

Gallery images courtesy of Adrian Havenga-Bennett and also unsplash.com with credit due: "Garden Bench" by Jose Moreno via unsplash.com

I used the book "HTML&CSS - design and build websites" by Jon Duckett as a go-to reference if what I was looking for wasn't clear in the modules, on StackOverflow, and/or CSS Tricks (these are the main websites I use when struggling with a concept - the latter helped me further understand the concept of relative parents and absolute children).

I drew inspiration from the CSS Tricks website RE spinning icons.

Copyright 2019 - Adrian Havenga-Bennett