Web Development Assignment Using HTML5, CSS3 and JavaScript
Introduction
web development of documentation is intended to elaborate the decisions taken during the drafting code process. This description is intended to clarify why some form of code was utilised for the creation of the website in my assignment. I selected to continue my previous work on the web development project for the remaining half of the year as the goal of the digital project. The latest hand-in includes the finished website for the graphic designer from Joel Harrison. The website consists of 12 different pages, each of which is based on the previous one, for the current project. The web site also contains code from the following online platforms, HTML 5, CSS3 & JavaScript: HTML Validator, HTML5 Outliner, Wave Web Accessibility Tool, Check my Color, CSS Validators. Validation was required in order to identify potential mistakes in both the textual code and in compliance with standards relating to accessibility and web development
The project will be documented in the following way: Common elements of sites cross: < nav> and > server-side products and SSIs, section, portfolio section, contact section, blog section, web page responsiveness, and web development accessibility criterion. Cross-site common elements: However, solutions like as responsiveness and accessibility are covered as individual chapters of the documentation, given that they are sets of criteria utilised concisely across the complete website. Each portion has been documented outlining the code used in the relevant component. In addition, the chapters on responsiveness and accessibility will explain why these features matter and how each page is consistent with these requirements and best practise solutions, giving the complete Website a concise look.
Common elements of the cross site
Navigation, footers and SSIs
The title and navigation bar start with the usual parts of the website. The title of page 1 element, which is the website’s homepage. The name of the website “Joel Harrison Graphics design” is also the title of the home page. It is the sole text that appears in the same manner and place on the entire website to identify the role of the title. What is the best practise in terms of optimising the search engine. In addition, the title functions as a link from the other web pages to the homepage. The title looks the same on all pages, regardless of function. The tile text on the Home page is used as a simple.
The font family is used to select the type of text used throughout the full menu bar in our example, without serif. In addition, font sizes are given with an em size unit as well. The padding bottom helps to position the from 20px. The blank space between the top of the page and the with within the title text is used. The padding top is used for the same purpose except that it applies to the element’s lower part of the declaration. Auto margin 0 and text-align: centre is used for horizontal centering of the within the page in web development. The divides the size of the title to the width of 800 px. In conclusion, the font weight is set to < h1 > in the first page to simulate a title style.
The function of the alinkdecor class is to use text decoration for styling the link inside the element: none. Decoration purpose: none to remove the emphasis of a link and colour: black combines the colour and the text of the link to black look.
Football
Moving to the inside of the footer with the image of the logo. The footer logo is added to the HTML using a image link element and a description of the “alt=” value to comply with accessibility rules. The “footerimg” class in the CSS file, with the following declarations, is called: height: 110px; float: right, padding: 0. Right margin: 100px; bottom margin: 150px; left margin: 10px. The padding is set to 0, to limit the area of logo cover in the footer. Written values in web development such as width and height are utilised in our case to size the image. Positioning takes place with the float in our box: right; then the logo travels in the middle of the page with the aid of the margin-right. Bottom margin to adjust the gap between the bottom of the page and the logo and left margin to modify the space between the copyright and the logo. The px dimensions utilised were quite difficult to change, thus several attempts were made to correct the units. The copyright text placed on a element with the class styled “footerpar” is left on the logo, because the name for the entity is © value, the copyright sign is written. © value.
The following statements are placed in the footerpar, float: Right, leaving margin: 30px; leaving margins: 40px. Here and in the logo the is swung right in then, with the aid of margin-left and margin-top statements, positioned so as to achieve the desired space between the bottom page and right end of the page in px units. The last set of items in the footer on the left is the social network link with a “Ul > list of three “li >” items for each social media connection and “< img >” content with the following “CSS footer”
The following CSS footer “Ul < Ul > “li >” Range top: 20px, width: 30px; height:30px; right-hand margin:5px; padding: 0; inline display; Float: left-hand side. The
- elements are vertically inline at the same level. The footer styled 20px from the top of the footer then floated left and was given 30px in height and width. Finally, the footer is added to a server SSI file and uploaded where changes applied to all pages in the SSI file i