In this task we are quipped with a starter code which includes the html and css files. The purpose of the activity is to make the marketing website more accesbile and ensuring the structure of the code is clean with an easy to read format ensuring the search engines are optimized. (Client Side/User Story).
This means the website must meet accesability standards. Including using Semantic HTML elements throughout the code with a logical structure.
For the task ahead we have been provided starter codes for the website including the HTML and CSS file.
- In order to contribute to the task we must install Visual Studio Code. This will be the basis in which we refactor the html and CSS files that have been provided. We would also need to intall an extention within Visual Studio Code to run and open a live server in the browser such as in 'chrome'.
- We will require a terminal/bash to create a repositary that will enable us to push the configured code base onto github. For this we will need to install Gitbash.
In order to make the website more streamlined in the HTML we will look at ways to compromise the codebase. To do this we will look at all div containers and see how they impact the code. Should they not add anything extra to the code we can change this to the most realevnt element that are available. Changes applied innclude headers being in sequential order (h1, h2, h3 & h4), we changed the header and footer elements to corrospond to the top and bottom of the page, a 'body' and 'main' element aswell as 'sections' and 'aside' elements. To continue to meet the Acceptance criteria of acceability standards we added alt functions to images (img alt=" decription of picture" src ="Link to image") this is applied to make it more acceabile for those who can't view the images.
From changing the codebase in HTML this natrually affected the styling within CSS and therefore we had to apply chnages un order for the classes to match the content of the HTML. removing were applicable some div classes by removing the period and changing the name of the element to match that of the HTML file such as within 'section' A further step that was taken in CSS that a few styling's had the same format and we optimized this further by removing the duplicated styling for each section and placing this as a 'class'.
Being completely new to front end web development this task was quite diffcult to get my head around at first but I allowed myself to stay focused and seek help where and when required through ASKBSC and other tools such as youtube tutorials and I started understaning how to refactor and optimize html as well as CSS elements and was able to confidently apply chnages to this particular project. My main learning point from this project is continuous practice and curiousity to learning from others visually showing me and explainig where I was able to pick up on things and why and how certain functions and elments are carried out. I was able to complete the project to the best of my knowledge through this. I do understand that there may be possible improvements to my work that could be further looked into.
- https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/
- https://www.w3schools.com/html/html5_semantic_elements.asp
- https://htmlcheatsheet.com/
- Jung Yoon & Jessica Song (Instructer and TA from the bootcamp)
- Ian Scott (Bootcamp member)
- Carlin, Tyler, Rudie, Ntombi (AskBSC comminity members)
I have chosen to go with the MIT licence as it allows people to do almost anything to the project to help improve the website further if required. It is also a simple and persmissive im compaiesion to other licences.