- About
- Live Project
- Deployment
- Design Draft
- Design Final
- Colours
- Fonts
- Features
- Codes
- Testing
- Project Revision and Manual Testing
- Credits
The Flying Nerds is about what it takes to build, to acquire, to own and to fly a drone. The website aims at promoting products and services related to educational drones.
Using Github and Microsoft Visual Code to deploy my project
- Created a new public local repository on my Github account, and copied the repository locally on my computer using Microsoft Visual Code to start building the website.
- Regularly and repeatedly, I committed my changes to my local repository with commands below. Each commit has its custom message.
- git add .
- git commit -m "Custom message"
- Finally pushing my commits to my remote repository by using the command below.
- git push
- To start working on my website, I went onto Github and selected my repository named TheFlyingNerds_sandbox.
- I went to Settings > Pages
- I made sure the following settings were applied:
- Source: 'Deploy from a branch' on the dropdown menu
- Branch: 'Main' and 'root' from the dropdown menus
- Entered save
An initial draft of the project was designed on Balsamiq Wireframes.
It was an overscale project with lot of content and features. This draft contained a blog and a shop which were removed from the final version.
Additionally, most of the pages were divided into 2 sections: an Introductory section and its associated section.
-Two main colours to contrast objects of the website, notably the menu, headers and buttons
#1a4b82#ead615
-Background colour
rgb(200, 201, 204, .9)
-Two main colours for fonts
#000000#FFFFFF
Two main fonts were used:
-Font for the logo, menu and headings: Google font called Goldman
-Font for the body text: Google font called Roboto Flex
-Logo
A distinctive and customised logo
-Menu
An extensive and responsive menu:
-Pages
An extensive, responsive and colourful website: The website combined HTML, CSS and bootstrap
The website contains six pages:
-
A landing page:
-
A picture and video gallery:
-
A contact page with a google map and a form:
-
A newsletter subscription field with a modal pop up:
-
A page showcasing my services:
-Mobile Responsiveness
The website is built for mobile users
The stylesheet contains no error.
I tested each webpage of the website. Below I highlighted what was Before and the corrective steps after.
-Webpage: index.html
Before
After
-I removed un-needed div tag line 90 on the index.html
-I changed the card title header from h5 to h3
-I changed the aria-labelledby on the lines 243 and 244 to pills-law-tab
-I removed subLabel id from the modal
-Webpage: Before testing the other webpages, I applied some of the above correctives steps to all pages:
-I removed the un-needed div tag line 90 or from the header
-I removed subLabel id from the modal
-I ignored the below error on all pages:
-Webpage: gallery.html
Before
After
-I removed frameborder.
-I ignored the warning section lacks heading.
-Webpage: workshop.html
Before
After
-I removed the trailing slashes.
-Webpage: about.html
Before
After
-No change made on this page.
-Webpage: contact.html
Before
After
-I correct 'current' on the line 73
-Webpages: success-subscribe.html and success-form.html
Before
After
-No change made on these pages.
My main focus was the accessibility score and keep it equal or above 90%.
-I ran the testing and made the following changes:
-I added an additional colour #e4ff05 to have contrast colour in the menu
-I added a title for the frame tag of google map
The pages "index.html", about.html and workshop.html show a good score
The page "gallery.html"
Comments:
-The low score on Best Practices is due the cookies.
The page "contact.html"
Comments:
-The low score on Best Practices is due the cookies.
Additionnal testing:
-I tested on the following browsers on windows environment: Chrome, Firefox, Ms Edge and Opera
-I tested on mobile environment: Samsung and iPhone.
-I was not able to test it Mac product
-I changed the font awesome from footer link (Script) to a header link across all pages.
-I changed Flyshop to Workshop on HTML across all pages.
-The Video Gallery, that initially contained two of my videos, was changed to a single video display.
Reason: The embedded link provided by YouTube for one of video was not working.
-Two webpages were added to return notification, one after submitting contact form and the other one after subscribing.
-The fields in the contact and subscription forms are required.
All pictures displayed and used are property of @TheCreativeNerds.ie (Me).
Initially purchased with a commercial licence and re-worked graphically for consumption.