MileStone project 1: Code Institute HTML/CSS Essentials.
A small styled website for a gaming scoiety to link all gamers to one platform where it links (by clicking the links in the games page) to the desired platform service of their choice, while being able to contact the team for any inqiries. It is based on sending out each month free content codes to users, updates on games, reviews etc, in the about us section it mentions that a forum will take effect soon which will be one of the main features other than the free content.
In short explaination:
- Increase in players joining the one service
- have all platforms available to view content on the one website linking to original platform sites
For this Code Institute student project a live version demo via github pages can be found here
Figma was used to design this website in a prototype design, Desktop design found here:
Desktop:
Mobile design found here:
- As a frequent user, I would like easy navigation rather than having to scroll for long periods
- As a user of this site, I would like to know its purpose when landing on the page first hand
- As a user I would like to be able to connect to the social media services
- As a user I would like to be able to contact the team via the website
- As a user I would like to have the option of visiting different platforms or see the list of different platforms
The wireframes for Gamerz4US was created on figma, Figma The finished site for now varies slightly from the wireframes created on figma due to changes in developments that happened during the creation process.
GAMERZ4US has 3 pages. The main page is the landing page on arrival to the website Home Page.The second page Games Page this page is the page that will list the different platforms for users to visit and view releases etc. The third page Contact Page will advertise a contact form to get in touch with the website team for sign up process, queries of looking for general information etc.
- The overall fonts chosen for this website project was Kanit and sans-serif, if the font "Kanit" is not appliable it will fall back to the standard sans-serif.
- The colors chosen were to make different elements standout and make key area pop to the eye, for example the navbar is white with a hover attribute and an underline colored styled attribute with the footer following suit with the same styles, the form element has a style of yellow in the input fields when hovered upon to highlight the area the user is in.
GAMERZ4US is a site that is easy to use and navigate with links and pages liking to one another, it contains features that the user(s) would probably be familiar with, such as a navigation bar, footer, links and contact form.
-
The navagation bar (navbar) is located at the top of all pages, with a collapsable feature, color schemes to match and style to the websites other color schemes, the links in the navbar have all been tested and are working, this navabr is not sticky, where it stays at the top and stays there and does not follow the user as they scroll down the page. The company logo is not a clickable link, it is a stand alone title of the Company.
-
The About Us section lets the user know what GAMERZ4US is and who we are and what we do.
-
An button linked to the contact section in the about us text section will help the user(s) navigate quickly to the contact form process.
-
Contains social media links. To enhance the UX the links open in other tabs.
-
The social media links will help the user with their connect with GAMERZ4US and will also encourage them to connect or engage with GAMERZ4US on various systems.
-
Similar to the navbar the footer is resposnive and will move down and render according to screen sizes rather than left to right.
-
- This section should help the user complete the online journey rather than having to contact via email or mobile etc.
- In case the user would like to contact GAMERZ4US directly via email there is a contact details section in the footer.
- There is a form that the user can fill in. It has 6 input fields, first name, second name, email, contact number, Platform played on and a textarea for general information or questions.
-
- This extra html page confirms for the user that their details have been sent to GAMERZ4US. For this MS1 project it validates the form only and does not send it anywhere as there is no javascript or API's set up.
- It provides a clickable button with a direct link back to the contact page also with the normal navigation menu links in the header and footer as with the other pages.
I would in the future after completing the Full Stack course, like to add in a sign in/ sign up feature where the users can create personal accounts and have user names etc, I would also add in a forum section for each game genre with a search function to search games by title, platform and also a section where videos/ images could be posted similar to a redit styled website but for gamers only to use, where all gamers can join and become one community all in one place sharing their own tips, tricks and secrets.
- HTML - To create a basic standard webpage
- CSS - To design and add styles to the basic webpage and help it standout
When designing the website the links in the navbar were set up and then tested after designing them, the buttoms and footer also has the same style design and element attributes also all were tested befoore designing and after designing with css to ensure they are all working correctly, and that they all also open with a _blank attribute anf=d go to the desired http address also. The form on the contact page has been tested with being filled out with the required information and also pressing submit and everthing works as planned.
when the screen size changes smaller the navbar collapses into a burger icon menu with a drop down section added into it, and when the cards on the games page is rendered on a smaller screen the cards become smaller and render to fit on small screen devices and change size due to screen reolution. The footer adjusts to smaller screens by aligning the footer elements along the left hand side of the page for mobile friendly devices creating a cleaner less squashed, more tidier appearance.
A error I found on the form element was that there was a action with post and also and empty ID element where it cause the form when filled out to return an error 404 then a 501 error, HTML W3 validator was used and this became clear, when removed and corrected the form fills out and submits well now.
This assignment/ Project was Deployed on guthub pages directly from the master branch and along with the theme jekyll. the main page for github pages to load was named index.html as this is needed for the browser to read and deploy the website correctly.
The site was deployed to GitHub pages. The steps to deploy a site/ repository are:
- In the GitHub repository, navigate to the Settings tab on the created repository.
- When in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once this has been done it will take some time to deploy, once done the repository url link will appear allowing to view the website in a browser as if it is a published website with a domain etc.
The process of cloning a project from GitHub is:
- Under the repository’s name, click on the code drop down tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open Git Bash.
- Change the current working directory to the location where you want the cloned repositorys directory to be made.
- Type git clone, and then paste the URL copied from GitHub.
- Press enter and the local clone will be created.
python3 -m http.server- A blue button should appear to click: Open Browser.
- A new browser window should appear
- Dont Forget to clear cache if having issues loading CSS and HTML.
to remove or cut ties with github and its repositories in the terminal inside github write:
git remote rm origin
- W3C-HTML-Validator :This was used to validate the HTML to ensure that all elements and text markup were fully correct and functioning, by coping and pasting into webtool and then pasting back into source code to fix errors given.
- Jigsaw-W3-CSS-Validator: This was used to validate the CSS to ensure that all styles were fully correct and functioning, by coping and pasting into webtool and then pasting back into source code to fix errors given.
- Web-formatter-tool : This was used to correctly apply indentation to your code when it becomes messy, by copying and pasting into the web tool and indents within seconds, then pasting back into source code.
For assitance with styles in css i used the following:
- Stack-Over-Flow: Positioning images on a Webpage.
- Geeks-For-Geeks: Aligning Elements.
- iqcode: Hover Psuedo attributes.
- iqcode: Font Awesome Icon Sizes.
- Stack-Over-Flow: Footer sticking at bottom of page.
- Fotor: Used Fotor.com to create a design image for my read me file to show case the design for an image preview before the website is viewed on github page using the link above.
- Pexels: Free image source for websites and projects.
- Figma-Prototype-Design: Used to create a template design of the website design.
- W3schools: For pretty much assistance on the whole project with design tips and tricks to styling with CSS and HTML write ups.
- Font-Awesome-Icons: For cool Icons for design process.
- Google-Fonts:For fonts designing and styling.
- All photos were used or taken from the free images based website Pexels.
-
For the navbar I used assistance from Code-Pen: I found it difficult creating a navbar using vanilla css and html so I used navbar assistance form code pen listed above, and chnaged styles according to my website needs.
-
For the Footer I used assistance from Code-Pen in mobile design and also colums and structures as with plain CSS and HTML I found this difficult to complete, I changed fonts, colors, links and added css and styles to fit the website I was creating as a assignment.
-
For the card section I tried muyltiple ways to complete this but when trying different methods it was disrupting my other stylea and elements. I used assistance from Code-Info-Web for the cards I changed the images, added styles and colors and font sizes, I also added hover psuedo attributes and also links to sources and also border radiuses etc.