Skip to content

adnanmuhtadi/frontend-development-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

(title of project)

View project here

(introduction of the site)

User Experience (UX)

The Audience

The intended audience for this project is individuals ...

User Objectives

My Objectives

User Stories

The intended type of users which this website is targeted for are ...

  1. As a user, I want to be able to ... so ...

Design

  • Colour Scheme

  • Typography

  • Imagery

  • Wireframes

    Home Page

    Master Wireframes

    • Master Wireframes - View

Features

The features that will be utilised in this project will be as follows:

Existing Features

Site Features

Features Left to Implement

Technologies Used

Programming Languages Used

  • HTML5
    • HTML5 was used to structure and present content on my website.
  • CSS3
    • CSS3 was used to provide my website with style

Frameworks, Libraries & Applications/Programs Used

Frameworks

  1. Bootstrap:
    • Bootstrap was used to assist with the responsiveness and styling of the website.

Library

  1. Google Fonts:
    • Google fonts were used to import the font into the style.css file which is used on all pages throughout the project.
  2. Font Awesome:
    • Font Awesome was used on all pages throughout the website to add icons for aesthetic and UX purposes.

Applications/Programs Used

  1. Google Chrome:
    • Default browser used to visually display the build process as well as utilising Chrome Dev Tools to assist where needed.
  2. Git:
    • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub.
  3. GitHub:
    • GitHub is used to store the code of the project after being pushed from Git.
  4. Github Desktop:
    • A tool that allows you to interact with Github from the desktop
  5. Balsamiq:
    • Balsamiq was used to create the wireframes during the design process.
  6. Grammerly:
    • Online tool which assists with the english grammar.

Testing

...

Validation

On code completion, I ensured my code was validated with no snytax errors. I used W3C Markup Validator for HTML5 and W3C CSS Validator for CSS3 to ensure my code is W3C Compliant.

Results

Page Initial Errors Resolved Errors Error Notes
index.html Initial Errors Resolved Errors ...

Further Testing

User Stories Testing from User Experience (UX) Section - View Results

Functionality and Usability Testing - View Results

Browser and Responsive Testing

Known Issues

Deployment

The project was deployed to Github Pages using the following method:

  1. Log into Github and found the Project Repository
  2. At the top of the Repository, i clicked the "Settings" option on the menu.
  3. I scrolled down the page until i found "Github Pages" section.
  4. Under the "Source" section, a drop-down option with the result of "None" is visible. I clicked on the drop-down option and selected "Master Brand".
  5. The page would automatically refresh itself to the top of the page.
  6. I scrolled down to 'Github Pages' again and found a published link which is my deployed site URL.

Making a Clone

To make a clone, I had to get the SSH key from the repository which allowed me to clone the repository to my local hard drive.

Method 1: Github Desktop

The alternative method which I used when I first started the project was Github Desktop. I was able to connect my Github repository and push my files through that method. I eventually stopped as the plugin within my code editor did the same job. This enabled me to have one less application to have running while developing.

Method 2: (mostly used)

Within brackets (Editing tool), I was able to download a plugin which enabled me to connect brackets to my GitHub repository. Whenever code was created and saved, I was given the option to commit and make notes on the upload. Once done, I was able to push the changes to GitHub.

Credits

Content

Code

Media

Acknowledgements

About

Template for static websites using HTML5/CSS3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published