Disclaimer: This is an example of a student written assignment.
Click here for sample essays written by our professional writers.

Any opinions, findings, conclusions or recommendations expressed in this material are those of the authors and do not necessarily reflect the views of UKEssays.com.

Web Development Assignment Using HTML5, CSS3 and JavaScript

Info: 9485 words (38 pages) Assignment
Published: 22nd Apr 2021 in Assignment

Reference this

Visual Design and Web Project Assignment

Web Project Supporting Documentation

Table of Content

Introduction                                                                                                                                1

Cross site common elements                                                                                                      3

Main Section                                                                                                                              8

About section                                                                                                                            10

The Portfolio sections                                                                                                                  12

The Contact sections                                                                                                                 16

The Blog sections                                                                                                                      18

Webpage responsiveness                                                                                                          26

Accessibility criteria                                                                                                                 28

References                                                                                                                                 30

Introduction

The documentation serves the purpose of elaborating the decisions made during the process of writing code. In other words, the description serves the purpose of explaining why a certain kind of code was used in my assignment to create the website. As the goal of the digital project I had chosen to continue and to complete my earlier work for the web development project due for last semester.  The current hand-in contains the finished website made for Joel Harrison graphic designer. The website is made of twelve separate pages all made for the current project on the basis of the earlier one. Furthermore, the website contains code written in HTML5, CSS3 and JavaScript all which had been validated through the following online platforms: HTML ValidatorHTML5 OutlinerWave web accessibility toolCheckmycolour and CSS Validator. Validation was necessary to spot out potential errors both in the written code and in fulfilling accessibility and outline related criteria.

Get Help With Your Assignment

If you need assistance with writing your assignment, our professional assignment writing service is here to help!

Find out more

The documentation will go through the project using the following outline: cross site common elements: < nav > and < footer > items and SSIs server-side solutions, about section, portfolio section, contact section, blog section, webpage responsiveness, accessibility criteria. Each section had been documented describing the code used in the specific section, however, solutions such as responsiveness, accessibility will be detailed as separate chapters of the documentations since they are sets of criteria applied concisely through the whole website. Moreover, the responsiveness and accessibility chapters will present why these aspects are important and how each page conforms to these regulations and best practice solutions giving a concise look to the website as a whole.

Cross site common elements

Navigation, footer, SSIs and plug-ins

Starting with the common elements of the website deliverable pages the title and navigation bar. The title element of page number 1 which is the home page of the website. The title of the home page is also, the title of the website “Joel Harrison Graphic design”. To indicate the role of the title it is the only text appearing in the same way and same place in the through the whole website. Which is best practice when it comes to search engine optimization. Furthermore, the title works as a link to the home page from the other pages of the website. In all pages indifferent of function, the title is styled to look the same way. On the home page the tile text is used as a simple < h1 > element styled with a h1 selector with declarations margin:0; and padding: 0; with the goal of eliminating any unseen spaces around the text itself which made it easier for myself to style the page since the padding and margin areas being 0 do not interfere with any other element on the page. On the about page the text is used as a link and written inside a < div > element and styled in CSS with the help of a class called “ligthfront”. The link inside the < div > element is styled with a different class called “alinkdecor”. The two classes inside the < div > element have different functions. The “lightfront” class is used to style the text inside the < div > to look as a < h1 > element. Do to this the “lightfront” class uses the following declarations: font-family: sans-serif; font-size:2.800em; padding-bottom: 20px; padding-top: 20px; margin: 0 auto; width:800px; text-align: center; font-weight: bold;.

The font-family is used to determine the style of the text in our case sans-serif which is the font-family used through the entire navigation bar. Moreover, font sizes as well are all declared using em size unit. Padding-bottom is used to help with the positioning of the < div > leaving 20px; of white space between the top end of the page and the < div > with the title text inside. Padding-top is used for the same purpose with the exception that the declaration applies to the bottom of the < div > element. Margin 0 auto and text-align: center are used to center the < div > horizontally within the page. The < div > is given an 800px width which is the size the title covers. Finally, the font-weight is set to bold to imitate the style of the title in < h1 > on the first page. The role of the class “alinkdecor” is to style the link inside the < div > element using text-decoration: none; color: black; declarations. The purpose of the decoration: none is to eliminate the underlining of the link and using color: black makes the link color and text associate with the link look black.

Footer

Moving forwards to the elements inside the footer, staring with the logo image. The footer logo is inserted into the HTML using an < img > element containing the image link and the alt= “” value with a description to comply with accessibility regulations. In the CSS file the class assigned to style the logo is called “footerimg” containing the following declarations: width: 90px; height: 110px; float: right; padding: 0 margin-right: 100px; margin-bottom: 150px; margin-left: 10px. Values such as width and height are used to size the image in our case in pixels the also, padding is set at 0 to minimize the space the logo cover within the footer. The positioning is done with the help of float’s in our case float: right; after adjusted with the help of margin-right so the logo moves in towards the center of the page. Margin-bottom to adjust the space between the page bottom and the logo and margin-left to adjust the space between the copyright and the logo. The px sizes used were really hard to adjust it took many attempts to get the units right. Left to the logo is the copyright text placed in a < div > element with the < footer > styled with the class “footerpar” the copyright sign is written with the © value because it is an entity name. Within the footerpar the following declarations are placed float: right; margin-left: 30px; margin-top: 40px; Here as well as in the case of the logo the < div > is floated right within the < footer > then positioned with the help of margin-left and margin-top declarations to get the desired space between page bottom and right end of the page in px units. The last set to elements placed in the footer on the left-hand side are the social media links using a < ul > list containing three < li > items for each social media link and < img > content styled with the following CSS footer < ul > < li > a descendant of the footer < ul > using the following code: margin-top: 20px, width: 30px; height:30px; margin-right:5px; padding: 0; display: inline; float: left. The < ul > is displayed inline meaning all < li > element are on the same level inline vertically. Then floated to the left inside the footer styled 20px from the top of the footer and given a height and width of 30px. Finally, the footer is added to a SSIs file and uploaded to the server where modifications made to the SSIs file apply to all pages.

SSIs

Server Side Includes in short SSIs is a part of Microsoft’s SQL Server Integration Services the primary use of the tool is data warehousing, data transaction and data extraction.  The SSIs can be utilized for merging data from heterogeneous data stores populating data, warehouses and data marts cleaning and standardizing data building, business intelligence into a data transformation process and automating administrative functions and data loading. Basically, the tool is an import, export wizard for data which allows in our case the storing of common element of webpages on a single file with the ending of ssi which is very practical from a point of view of website building and maintenance since the written code needs only to be edited in the particular ssi file which then will apply the changes to all other pages the file is being linked too. Presentation and content being separated the web server combines SSi and page code together.  The SSIs work in the following way in my case the < footer > fragment or element of the page is being written in a SSIs file which means that the HTML code is written inside the ssi file then the file is placed into a separate directory ex named SSI at this time the HTML inside the ssi file does not have to be a valid HTML  than another file with the named .htaccess is placed into the directory in which the file the user wants to maintain are located in. The .htaccess file contains the following code:

AddHandler server-parsed .html

AddHandler server-parsed .html

AddHandler server-parsed. ssi,

which is the basic syntax of the code many elements can be parsed in our case the footer for which the is being used. Directory names and elements can vary but usually the file ending is in SSI however it can be text or HTML as well.  As a last step all pages we want to run the SSI file must include the following code anywhere in their HTML . The only downside of the tool being when offline the SSI element will not appear on the particular webpage. SSI can be useful then maintaining or creating large websites where the tool can spare us considerable amount of time when modifications are needed. For my project I had only used the tool for my < footer > element since this element is the only one that is common on all page’s other element such as the header are somewhat different on most of the pages of the website. (SSIs, 2018)

Share This Plug-in

The last element that is common throughout the pages is the plug-in of sharethis.com a side bar of social media share buttons generated through < script > on the Sharethis website  embed to the HTML with the help of a link  containing a < script > item. The Share bar is consistently, present on all of the pages of the website contributing to the consistent minimalist overall look of the website. Furthermore, the version of the share button bar is called a sticky button one of the two button types available on the providers website the website allows you to customize your bar by selecting your social services from a wide range of options by just dragging the into the bar moreover, a wide range of customization option are available from alignment options to only reveal the number of likes after reaching a certain number or to not be displayed at all. Button sizes and label can be added or changed finally, the user only needs to register and past the code inside the website at the end of the < body > element or inside the < head >  (Share This Plug-in, 2018)

Main Section

The main page of the website host as a first content element below the navigation bar a picture < img > element which presents one of the works of the graphic designer’s portfolio the goal is to showcase the work of the designer at first glance. The < img > element is styled with a class called “workimg”. The class styles the size of the < img > and the position it takes within the page, declarations used are the following: display: block; padding-top: 50px; margin-bottom: 10px; width:1100px; height:620px; margin: 0 auto. Display: block is used to keep the image in a particular position without the interference of other elements. Margin: 0 auto is set to position the < img > to the center of the page, the width and height of the picture is set to look appealing to the viewer using px size units finally, paddings and margins are set to adjust the space between the other elements above and below the < img >.

Continuing to the lower part of the page you can see there are text three columns made with the help of CSS3 flex-box container declarations. The way the flex-box works is that first of all, we have the whole of the content wrapped in < div > elements in HTML5 in total five < div > elements are used. Starting from inside to outside the first 3 < div > elements contain one < h2 > and one < p > element each. These then are wrapped with a “flex container” < div > which is in turn wrapped with one last < div > element containing all of the above-mentioned elements. Its < div > is styled with a class of “wrap” laying out the main characteristics of the wrap in which all of the rest of the element will take place. The class “wrap” has the following declarations width: 100%; max-width: 1200px; margin: 0 auto; fixing the width to the whole page and centring the content with the element. Going one element inside the next < div > element is styled with the class “flex-container” hosting the following declarations display: flex; flex-wrap: wrap; these are the declarations creating the flexible responsive layout structure. Using display: flex the parent element becomes flexible. Flex-wrap: wrap; orders flex items to wrap if necessary. (Net Ninja Tutorials Flex-box, 2017 ) Finally, the last three < div > elements are given a class of “box” with the following declarations height: 400px; flex-basis: 300px; padding: 20px; width: 70%; font-family: monospace; margin: 0 auto. Essentially, the class is responsible to give shape to the three columns a height a width a padding and a flex-basis. The flex-basis specifies the initial length of a flexible item, meaning that the initial length is 300px however, if we shrink the browser this length can change according to what size does the browser window has. Columns can adjust according to window size to for example display one on top of each other is the window is too small to display inline. Moreover, the class “box” has two descendants “box p” with the following code:  text-align: left; and “box h2” with the code: text-align: center; each styling the < p > and < h2 > elements in the respective < div > element. “box p” declares text-align: justify; to organize paragraphs to display justified, “box h2” declares text-align: center; which as the declaration says centres are < h2 > elements.

(WDUX Assignment, 2018)

About Section

The section which host information regarding the designer also, works like a cv listing previous qualifications and works. The whole of the section is placed within a container called .about-container  with the attributes of display: flex; flex-flow: wrap; giving it the characteristics of a flex item with a flow of wrap meaning if the screen is to small items will wrap around each other making the section responsive. Moreover, advantages of the flex-box model area for example what one can avoid using positioning or floats in its code furthermore, it helps create a responsive layout and it is widely supported on all types of browsers. Starting with the < h1 >  of the page which is styled through the class called .me containing the following code:  width: 100%;  height:100%; padding-top:100px; padding-bottom: 100px; margin: 0 auto; text-align: center; font-family: monospace; font-size: 5.000em; color: black; is given a colour of black which according to Checkmycolour passes contrast ratio, brightness difference and colour difference criteria’s. Padding top and bottom is given to create white space bellow and above the < h1 > element width and height are given 100% and the element is being centred using margin: 0 auto.

The CSS used to style the img element is done by class called .about containing the following code: display: block;  margin: 0 auto;  width:85% ; height:40%;   margin-top: 20px; The display: block  styling is given so that the img element starts on a new row taking over the whole width of the row. The img is being centered and given a top padding for white space below the < h1 > element. All, text elements are place in a < div > styled with the .inbrief  class directly or through its descendants. The < div > is centered using a margin:0 auto; all text is set to use a. font-family of monospace this is consistent through all the pages with minor exceptions. The width: 90%; font-size: 1.200em; font sizes padding-top: 15px; line-height: 2.5;   text-align: left; The text alignment to the left side is important because of accessibility reasons since the website must adapt to accessibility criteria’s. The descendants of .inbrief style the elements within the < div >  .inbrief h2 is given a larger font size of 3.000em, .inbrief article is given a  padding:40px; .inbrief article h3 is also, given a larger font size of 1.500em and text-align center. Two of the three articles on the page are given a background color and different text color by using classes the choice for using classes was made because I wasn’t able to style only certain articles with descendent. The two classes are called  .decor  and decor3 one styling the top article and one the last one below. Class decor giving a background-color: yellow; and decor3 a background-color: black; color: white; to its article.

At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.

(WDUX Assignment, 2018)

Portfolio Section

The portfolio section is made of four pages with the same layout and styling the pages feature a jQuery image carousel with images and text as content. Each page can be accessed through the links above the carousel which are styled as a local navigation bar. As throughout the website pages do not link to themselves avoiding any confusion within the users. The links are styled with the class .tabsstyle and its descendants .tabsstyle a, a:hover and .tabsstyle h2.  The class .tabsstyle uses the following code: margin-bottom: 20px; margin-left: 110px; positioning the links, tabsstyle a uses the following code: padding: 8px; border: 1px solid;  text-transform: uppercase; letter-spacing: 2px; text-align: center; color: black; margin-left: 10px; margin-top: 10px; cursor: pointer; font-size: 0.700em; text-decoration: none; background-color: black;    color: white; font-family: monospace; styling the a link as buttons or tabs finally a red hover is added with the descendant a:hover and the h2 is styled with font-size: 2.000em; padding-left: 10px; padding-bottom: 10px; font-family: monospace.

The image carousel itself is a jQuery plugin which uses HTML, CSS and JavaScript elements.  Furthermore, the portfolio page linked to Googles jQuery library with < script loading="lazy" src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”> which is place in the < head > element this is needed in order for the jQuery to work. The plug in implemented contains the CSS styling of the carousel the HTML syntax the jQuery code. Both the CSS and the jQuery files are linked to the HTML < script loading="lazy" src=”/digitalproject/lightslider.js”>< /script>. All jQuery had been placed to the end of the page just before the tag is closed. All three languages the HTML the CSS and jQuery had been edited by myself to make the carousel appear in a neat way within the page. Starting with the HTML a < section >, < article >, < h2 > < h3 > and < p > elements containing the description of images had been added to the < li > of the < ul > below the image links. The carousel works in a way in which the jQuery makes the carousel rotate the < li > elements within the unordered list. The default CSS styling of the carousel uses webkit- a html/css rendering engine used by Safari and Chrome with decoration is part of CSS3.This is a good way of writing CSS since most major browsers use WebKit as part of their browser engine. For both the carousel itself and the above pager which is a list of pictures what are displayed in big inside the carousel. The plugin uses the following classes and its descendant to style the carousel and its pager: lSSlideOuter, lightSlider, .lSSlideWrapper  .lSAction. The type of CSS used is called Also, @-webkit-keyframes are used which is used for CSS3 animation. That is used to move the images within the pager left and right.  Some of the modifications made in the CSS are for example in the .lSSlideOuter .lSPager .lSGallery that is the class the pager is being styled the pager got a border: 5px solid black; also, weight and width properties had been modified for the carousel .lSSlideWrapper width:90%; The

, < article >, < h2 > < h3 > and < p > within the < li > had been styled with the class .clearfix  and its descendants ul giving it a  list-style: none outside none;  padding-left: 0; margin: 0; width:100%;  .clearfix section article h3 giving it a styling of  float: left; margin-right: 300px; the < section > element had been styled with the descendant li section using color: white; background-color: black; padding: 50px; margin-top: 40px; margin-bottom: 20px; font-family: monospace;li section article descendant with padding-bottom: 10px. The third coding language used in the creation of the carousel is jQuery the HTML contains a link to the jQuery file containing the code used however, the HTML file hosts a part of the < script> as well. The < script> within the HTML host a function() which influences both the slider and the image bar bellow.  Using the list of setting from the webpage the slider had been downloaded from the carousels speed or auto transition had been adjusted by giving the pause declaration a higher unit number in milliseconds ms. (Light Slider, 2018)

JavaScript

The JavaScript file contains the JavaScript syntax which is a client-side script what allows us to create dynamic content in our case the image carousel. The script uses functions to make the content dynamic. A function is being activated or executed when something invokes it or calls it. As in the file /digitalproject/lightslider.js functions can contain other functions as well. A function is composed of variables is short var which is a kind of container for the data that we use, the data can be of three types strings text characters delimited with single or double quotes. Numbers which are not wrapped in quotes and Booleans data types with two possible values true or false they do not use quotes. Once a JavaScript variable is created you can store any kind of data type in it. A JavaScript interpreter will understand what type of data the variable holds by looking at the actual data assigned to the variable by the coder. Moreover, variables should use camel case, variable must begin with a letter a_ or $, variables are case sensitive and should not use JavaScript reserved keywords. Furthermore, variable values are updated or calculated with the help of operators and array provides a simple, organized way of tracking and working with a list of related items of data.

Find out how UKEssays.com can help you!

Our academic experts are ready and waiting to assist with any writing project you may have. From simple essay plans, through to full dissertations, you can guarantee we have a service perfectly matched to your needs.

View our services

An array is declared in the same way as any other variable in JavaScript using the [] square brackets. Arrays are written vertically but if we have longer data we can write it horizontally as well. Moreover, arrays can store Booleans numbers and strings as well, to access an item inside an array we simply need to call it by its name ex: alert(lastName); To add to an array we need to uses an index notation to manipulate an array we can use array methods push () to add one more item to the end of an array. Unshift () to add one more item to its beginning, Pop() to remove the last item from the array and shift to remove the first item from an array. Strings, dates, numbers, arrays, documents, for example, are all JavaScript objects ex getDate(), getMonth() and indexOf(). Other important elements are the conditional statements if and if else and complex conditional statements (JavaScript Module 2017-2018)

Contact Section

The contact page of the website uses a form mail plugin from tactile.com the form consists of two files a HTML file and a PHP file. Moreover, the contact form uses a server-side solution to make the contact page work the PHP file communicates between the server and the HTML page and the browser. The form makes it possible for user to communicate with the website owner sending a message on the webpage contact form which with the help of server-side solution gets sent to our e-mail. Since the form is a pre-made form its essay to install first we need to fill in the PHP file with the correct data the downloaded PHP contains a three-step description on how to make the form work. First, we need to set a target email where we would like our messages to be sent. Than we need to upload the PHP file to our server using any file name as long as it ends with .php in my case the form is uploaded to the digital project directory “ /htdocs/digitalproject/formmail.php”. After we can create a form in HTML or use the one provided by tactile.com the form must have a hidden called “recipients” with the email address of the person to receive the form’s results. As a last step set the action attribute to the formmail.php uploaded to the web server. By only doing these few simple steps we can have a functioning online form, if we wish to make any advanced changes the form provides instructions upon that as well. Furthermore, the form uses the element of the

After completing the setup of the PHP and HTML of the contact page the page had been styed using CSS first of all, the form element is placed within a < div > styled with the class .contact-container giving it a width:80%; and a margin-left:100px.  Than form elements inside the container are style through the declaration form and its descendants. Form is given the following styling width: 80%; height:70% float: left; font-family: monospace padding:100px, font-size: 1.800em; color: black; The h1 is styled with form h1 margin-bottom: 20px; giving it some white space above the form input area. The text area is styled with form textarea giving it a width: 80%; height: auto; for responsiveness, background-color: beige; order: 5px solid lightblue; resize: vertical; border-radius: 25px. Resize for responsiveness and some color like a border of light blue and a text area color of beige.  Furthermore, input text areas had been styled using form input[type=”text”] width: 50%;

height: auto; padding-left:250px; padding-top: 25px; padding-bottom: 25px; background-color: beige; border: 5px solid lightblue; resize: vertical; border-radius: 25px; the same color and resize options are given for consistency. As the next element the submit input had been styled with form input[type=”submit”] with the following code: padding: 10px; border: 1px solid; text-transform: uppercase; font-size: 0.699em; letter-spacing: 2px; text-align: center; color: black; margin-left: 200px; margin-top: 10px; cursor: pointer; border-radius: 25px;

The submit input is styled with uppercase letters and a pointer when the mouse finally, giving it a input[type=”submit”]:hover with the color red. As a last element < label >s had been given a padding-bottom: 20px; font-size: 1.050em; using the form label declaration.

At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.

(Tactile, 2018)

Blog Section

Main Blog Page

The blog section of the website contains 5 pages, one that we can consider the main page of the section and 4 pages of subsections containing the articles. The 4 article subsections consist of the same CSS styling and same HTML structure with the content being the only aspect of the pages being different. From a point of view of CSS styling and HTML we can say there is only two different page types the main and subsection styles.

The main page of the blog section works as an access page to all articles listing them one after another in a chronological style. Each article can be accessed by clicking on the article title or read more link alternatively from the side < ul > list at the top right-hand side of the page called recent posts. Both the < ul > and < div > containing the articles are inside a container box < div > styled with the class wrapper2 containing:  width: 100%; max-width: 1200px; margin-bottom: 180px; The width is given 100% so the whole width of a page can be used to place items a max width is used to make sure content is not larger than 1200px; if yes the height of the item will change to fit the element within the max width requirement. If the element is smaller the code has no effect. Finally, a margin bottom of 180px is given to create a white space between the < footer > and everything inside the wrapper2.  Following there is a < div > containing a h1 element, all pages must have a h1 element. Concisely, all h1 elements on all pages will be styled the same way using the CSS class called .foliohead with the following styling applied: width:75%;  height: 30%;  padding: 50px; margin: 0 auto; font-family: monospace;   font-size: 2.500em; text-align: center;  The goal of the styling is to place the h1 on the top of the page under the < nav > the class .foliohead is used on several other places as well to style the h1 where layout and content allows it. The Styling follows the concise approach to style all font in monospace and all sizes are given in em units. Width, height and padding such as the margin:0 auto and the text align serve the purpose to position the < div > and h1 within. The < div > used as a side column or side content styled with the class posts is serves the purpose of a side list next to the main content area of the page the function of which is to enable the user to view full articles without scrolling down the page this option can be useful if articles are many. Posts contains the following code: height:350px; font-size: 0.900em; padding: 0; width: 300px; float: right; margin-top: 200px;  The < div > is being floated right to occupy a top left position on the page leaving space to the main box-blog < div > height and width are given values of 350px and 300px which is enough for the content within font-sizes are in em and padding is 0 since there is no need for any space between < div > elements margin top is set to 200px from the top of the page making the posts appear on the same level as box-blog on its left side. Descendants posts li, posts li a and posts li p style the content within the elements.  Posts li has a styling of list-style-type: none; to make the bullet points of each < li > disappear. Posts li a styles the link within the

    with font-size: 1.200em; font-family: ‘Montserrat’, sans-serif; text-decoration: none; color: black; margin: 0; padding: 0; The font size is self-explanatory while the font family is given a special font from google fonts library which is being linked into the HTML inside the < header > element. text decoration none is given to the a links so it will not appear as an underlined link instead the special font given to differentiate its purpose from the rest of the page. Color and margin and padding settings are also, self-explanatory. Furthermore, posts li p is given a font-size: 1.000em; font-family: monospace; as to all text on the page and margin: 0; padding: 0; so, we only have the < p > without any margin or paddings around it. The < div > inside posts containing the text recent posts is being styled with the class called .listp containing the following code: padding-left: 50px; font-family: monospace; font-size: 1.600em; padding-bottom: 0;   margin: 0; A puffing left is given for positioning reasons font-family: monospace; as to all text on the page and margin: 0; padding: 0; so, we only have the < div > without any margin or paddings around it. The following < div > is the flex-container2 which in turn host several other < div > inside the < div > is styled in the following way padding-top: 100px; margin: 0; display: flex; flex-flow: column. The padding is necessary to create some white space between the top part of the page and the items in flex-container2, margin is set to 0 so there are no margins between wrapper2 and flex-container2 and the items with flex-container2 are mode into flex items using display: flex and flex-flow: column giving the page in our case a column layout.

    Moving forwards to the < div > styled with the class box-blog which hosts the main content of the page. The class box-blog contains the following code: padding-left:30px; padding-top: 20px; width: 700px; height: 850px; font-family: monospace; font-size: 1.100em; text-align: left; margin-bottom: 40px; margin: 0 auto; The size of the box is given using width and height in pixels the column of boxes is given a margin bottom of 40px which represents the white space between each box. Padding top and left is given to position the box-blog div right next to and on the same level as the post < div > and its content. Text is aligned left for accessibility reasons and text size and fonts are in em and monospace. The descendants of box-blog are box-blog h2, box-blog h2 a, box-blog h2 a:hover, box-blog h3 and box-blog p. These descendant style each element within the < div > The h2 descendant consists of the following code: padding-top: 10px; text-align: center;  margin: 0 auto; font-family: ‘Montserrat’, sans-serif; A special font family is given to the h2 since it also, serves as a link to the article just like the links in the .posts < div > padding top is used to create some white space above the element and the element is being centered with text-align: center.  The second descendant the h2 a uses text-decoration: none; color: black; to change the default underlining decoration of the link and it’s color. H2 a:hover is given a background-color: yellow; which means every time the cursor points at the link the background around it becomes yellow for the time being pointed on. Descendant h3 uses margin: 0 auto; text-align: center; padding-bottom: 10px; padding-top: 5px; to position the h3 within the < div > element. Descendent p dose the same with the help of padding-top: 0; padding-bottom: 0.

    At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.

    Article Blog page

    The Article pages of the website currently 4 as mentioned above on the top of the chapter use the same styling and HTML with the content being the only variable that is changing. The page consists of a two-column layout a main column and a side one. The main column hosts the article with an image on the top of each followed by the text content a Facebook plugin consisting of a like and share button and a comments section. Also, at the end of the article there is a link button sending the user back to the main blog page. Following the first column the second column hosts content in form of social media plug-ins which were generated by the social media developer platforms ex: Facebook developers website where only the link to a certain page is needed and the width and height of the plug-in we wish to embed.  The sidebar hosts 5 elements the recent post < div > containing the < ul > list presented in the main blog page above, a < div > used as a title with the text social media inside, two plug-ins one from Facebook and one from Twitter and a Gif used to promote the module.

    Staring on the top of the page all content is place within a container styled with the class named .full with the following code: width: 100%; max-width: 1500px; padding-top: 50px; background-color: white; height: 2000px. Giving the characteristics of the container all other elements will be placed in on both columns. The side column styled with the class .blogside using the following CSS: margin-top:300px; width:300px; height:1900px; padding: 0; margin:0; float: right;  margin-right: 180px; The column is styled in a way to fit next to the main column between the margin of the page and the main column. Measurements of height and width are given accordingly, to make the positioning possible. The < div > is floated to right side of the page the main column being on the left side. All element widths will be set to 300px to fit inside the < div > creating a neat column look. The first element do be documented inside the column is the social media < div > styled with the class of sidesocial using margin-top: 520px; width:300px;  height:80px;  text-transform: uppercase; font-family: monospace;  font-size: 0.999em; letter-spacing: 2px; text-align: center; padding-bottom: 0. The content is set to all uppercase letters also, the letter-spacing is set 2px font family is concisely the same as in all < div > containing text and height and width is set to fit the < div > inside the column.

    The first social media plug-in is generated by Facebook developer website Facebook the tabs is selected to be a page. The code generated is emended inside the HTML of the page inside of a < div > with the instructions to embed the code inside that page where we would like it to be displayed. The code consists of the link to our page some inline styling and a < blockqoute > element. The inline styling is done through data-tabs=”page” data-width=”300px” data-height=”200px” data-small-header=”false” data-adapt-container-width=”true” data-hide-cover=”false” data-show-facepile=”true”.  The data-tabs page refers to the style of the plugin which is a page, data-width refers to width which according to the developer website can be given a min of 180px and a max 500px by default the plug-in is generated to 340px.  Data-height refers to the height of the plug-in minimum height is of 50px and the default setting is of 500px. Header preference data-small-header=”false” meaning that we use a medium sized header. Data-adapt-container-width=”true” fits data inside the given width and height of a container. Data-show-facepile=”true is used to show the picture of people who liked your page on the plug-in. The last two attributes can be added to the plug-in as optional with ticking the option on the developer page. The plug-in uses short code which can be edited however, the inline styling cannot be replaced with a class moreover, the < blockqoute > cannot be deleted or altered if let’s say we change the element with a < div > the plug-in will still work but the html validator will see it as an error even with the cite code changed to href code. Because of these reasons I did not try to make any modifications what would cause errors in the HTML code. The twitter plug-in works similarly with the use of shortcode for the width and height and color containing the link to our twitter page and a < script> element linking the plug-in to twitters own JavaScript. The procedure of creating the plug-in is the same as for the Facebook plug-in with selecting the options on the company’s developer page. (Twitter, 2018)

    The last plug-in was created by myself on Photoshop CC and uploaded to GIPHY which is a website what host GIF content. The emended link was generated by the website with an inline styling however, the inline code was deleted and a class was successfully added to the code. The class is called .giphy-embed containing the code  width:300px;  height:600px;  position: absolute; border: 0; styling originally generated as inline styling by the GIPHY website. The purpose of the GIF is to demonstrate how a commercial would look like included to on the page.

    Moving ton to the main column of the blog article page the part where the articles are actually fitted. A < div > contains all elements Every element inside the < div > is being styled by the class .box-blogfull and its descendants. The class contains the following code   padding-left:30px; padding-top: 20px; width: 700px; height: 1750px; font-family: monospace; font-size: 1.000em; text-align: left; margin-bottom: 40px; float: left; The box size is set using height and width font family is monospace as in the whole website concisely, padding top is added to create a white space between the top of the page and the box finally, the whole box is floated left. The descendent of the box are h1, h2, h3, p, a, a:hover  and article.  Each descendant refers to one element inside the < div >. First the < article > element acts like a container of all other descendants the article background is set to beige.

    The < h1 > element is give a styling of text-align: left; font-size: 3.000em; background-color: yellow, h1 is the header of the article and of the page as well. The < h2 > is given a styling of text-align: center; margin: 0 auto; padding-bottom: 10px; padding-top: 5px. H3 is given a styling of padding-left: 70px; the < p > is styled with padding: 80px; padding-top: 0; padding-bottom: 0, < h3 > is given a margin: 0 auto; to align center. The a link at the end of the article is given a styling to look like a button with the following code padding: 50px; padding-top: 0; margin-left: 360px; padding-bottom:10px; border: 1px solid; text-transform: uppercase; font-size: 0.699em; letter-spacing: 2px; text-align: center;   padding-top: 10px;   padding-left: 10px;   padding-right: 10px;   color: black;   margin: 0 auto;

    Padding and border are being used to create a button like look with the link color black and uppercase styling of the a link text. Margins are used to place the a inside the article. Furthermore the a is given a a:hover of yellow color when the pointer of the mouse is on the element. Finally, the styling of the last element of the

    another two Facebook plug-ins this time the comments and like and share buttons. Both provided by the Facebook developers website the plug-ins use shortcode and JavaScript. (Facebook, 2018) The like and share buttons are also, styled with a class called .fb-like with the following code: margin-top: 50px. The same applies for the comments plug-in which uses the same kind of shortcode and link and CSS class applied by myself the class .fb-comments features the styling of text-align: left; and padding-top:50px. At the end of the page just before the end of the < body > element the JavaScript part of the Facebook plugins is being placed which consists of a function calling for the plug-ins to work the function host variables var, if else statements and a link to the Facebook developers site where the script is generated from.

    At the end of the sections content all element mentioned above are optimized for screen sizes of bellow 600px and above 1200px with the help of the @media screen styling however, the method will not be discussed in this chapter but will be discussed within the Responsiveness chapter at the end of this documentation.

    Webpage responsiveness

    Flex and @media

    Responsiveness is an approach which makes webpage content render well on all screen sizes and devices. The point of the approach is to make your website look good on by hiding, resizing and shrinking or enlarging web page elements so they look good on all screens. To achieve this, I had used a number of tools to make the page responsive first of all, I had used < meta name=”viewport” content=”width=device-width, initial-scale=1.0″> as a < meta > element which gives indications through the viewport to the browser on how to control the page dimensions and scaling. Secondly, all < img > elements are set to width:100% height: auto; which makes the pictures scale up and down as the browser size changes. Furthermore, the webpage uses display: flex or flex-container as a tool to create responsive elements within the website that behave in an expected manner. Flex-container or flexbox makes it easy to create responsive layouts and it works well with @media queries.  Flex-box has many options elements can be displayed vertically or horizontally using the row or column options. Other usefully styling options are justify-content where we have four options to chooses from flex-start, flex-end placing the content to the top left corner of the page or top right. You also, have the options: center, space between and space around. (Flex-box, 2018)

    Internal elements can be adjusted using one of these three properties flex-grow, flex-shrink and flex-basis, the first two define the growth, shrink ratio of internal items. The syntax does not use any units so flex:2 is correct this would define each box of having a ratio of 2 but for example if we have 3 boxes we can adjust their ratio separately. Also, global values can be applied as well such as inherit, initial and unset. The only flex that uses units is flex-basis which declares the internal box default size in height and width where one can use px or ems as well.

    Furthermore, you can use floats and flex-box together in the assignment I had used these declarations together moreover, the assignment uses flex-flow: wrap which wraps elements together is the screen size changes. Moreover, one of the advantages of flex is that you do not need to apply it on across the whole webpage only to certain elements or pages.

    As the last tool to make the webpage responsive I had used the @media quarry to optimize the website for all screen sizes. Usually, if not optimised the webpage would appear on an ex: phone screen with the same layout just smaller however, it can make content hard to read element too small to observe. Using @media elements can be optimised to screen size of course not all elements need to be optimised but with @media we can choose which pages and which elements we want to optimise for this assignment I had used @media only screen and (min-width:600px) for small screen devices and @media only screen and (min-width:1824px) for large screens. The @media uses pixels as units since depending on size a screen is composed of more or less pixels. For this assignment all pages featuring written text content had been optimised for mobile use and large screen use as well for example on all blog pages the side column is hidden moreover, the < nav > element had been optimised as well for mobile use. The challenge in using the @media technique is that the developer basically needs to retrofit the responsive design to the already existing code however, most of the time adjustment in ex height and width is enough. The positive of the tool is that we can design a different layout to a webpage while on an 1824-pixel screen and a different one for a 600-pixel screen. Furthermore, using flex-box and @media do not exclude each other as well as using in fact it makes @media easy to use. (CSS @media rule, 2018)

    Accessibility criteria

    The first accessibility guideline came out in 1999 published by W3C with the goal of helping by giving access to people with some forms of disabilities. Including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Moreover, current regulations make certain accessibility regulations mandatory by law when building a website for commercial use. The website produced for this assignment follows the guidelines of accessibility which are relevant to the content featured on the website. Before completion the pages produced where checked with the help of automated online checkers than manually using the sources included in our modules slideshows. Relevant regulations where implemented in non-text contents across pages a text description had been assigned to all non-text content such as images all < img > elements contain an < alt=”” > element which are used for the purpose of giving a description to images within the page except to controls located within the navigation bar. Furthermore, distinguishability of content is made possible by giving the background and the foreground contrasting colours in our case back and white colours. Also, contrast ratio between text and image content reaches the norms provided in regulations, text can be resized up to 200% and information is contained within text instead of images as regulation suggest it.

    The navigation bar makes it possible for user find content easily and to helps users find their way within the webpage, link purpose can be determined by just reading the link text and headings and labels describe topic or purpose consecutively within each page. The content of the page can be presented in different ways indifferent of presentation since all information is being presented in text as well as image. As for the text language following regulation the text language is easy to understand the navigation bar is consistent with pages not linking to themselves and always marking the currently loaded page. (WDUX Assignment, 2018) Also, on all page’s components with the same function are identified consistently which add to the overall predictability of the webpages. Furthermore, all pages where checked with Checkmycolour to assure all colours used passes contrast ratio, brightness difference and colour difference criteria’s. The online checker did not report any errors and all colour related regulations passed with AAA meaning all of the above mentioned three aspects where fulfilled 100%. Moreover, pages such as the contact page use the < label > element which make the contact page accessible, < label > elements need to be provided to identify all form controls, including text fields, checkboxes, radio buttons and drop-down menus. Labels can be associated with form controls explicitly or implicitly when associated explicitly the for element of the label must match the id element of the input.  When making the association implicitly, associations should be clear from the context of the page moreover label can be hidden but they still need to be provided within the code to support screen readers and speech input forms. The finished contact page had been checked with  Wave web accessibility tool to make sure all regulations are being meet. The online checker did not report any errors giving the green mark to all page features. To tick another accessibility criteria all abbreviations within the text use the < abbr > element for example < abbr title=”United States of America” >US< /abbr > for webpage readers to identify then and where an abbreviation is being used with the text.  Finally, throughout the whole website text is being aligned left in order to make the text easily readable with any concertation problems or dyslexia. Justified text is being avoided thorough the website following the indications of w3.org all text is being aligned on one side in our case to the left to avoid river of white between words this makes it easier to read for people using text resize or zoom on their browsers. Align center is also not recommended for the same reasons.

    (Accessibility Regulations, 2018)

    References

    1. Net Ninja Tutorials Flex-box [online]

    <https://www.youtube.com/watch?v=ux4h6pejCSM&index=2&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG> [Accessed October 1 2017]

    1. Net Ninja Text Columns tutorial [online]

    <https://www.youtube.com/watch?v=W77geg_3B5o&index=7&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh> [Accessed October 1 2017]

    1. HTML and CSS tutorials [online] < https://www.w3schools.com>
    2. [Accessed October 1 2017]
    1. Accessibility Regulations [online] <https://www.w3.org/TR/WCAG20/ > [Accessed April 1 2018]
    1. JavaScript module 2017-2018 Birkbeck, University of London – John Coumbe presentation [online] <https://moodle.bbk.ac.uk/course/view.php?id=22899> [Accessed April 15 2018]
    1. A complete guide to Flex-Box [online] <https://css-tricks.com/snippets/css/a-guide-to-flexbox/> [Accessed April 21 2018]
    1. CSS @media rule [online] <https://www.w3schools.com/cssref/css3_pr_mediaquery.asp > [Accessed April 20 2018]
    1. Web Development and User Experience Assignment [online]

    https://drive.google.com/open?id=12kejRS8FZ39nrHHL3zvsLeVcOATX2_5T> [Accessed April 10 2018]

    1. Form Mail [online] < https://www.tectite.com/ > [Accessed January 2018]
    1. Share This Plug-in [online] < Sharethis.com> [Accessed March 25 2018]
    1.  Light Slider [online]< http://sachinchoolur.github.io/lightslider/index.html > [Accessed April 10 2018]
    1. SSIs [online]< https://en.wikipedia.org/wiki/SQL_Server_Integration_Services > [Accessed April 20 2018]
    1. Facebook Developer [online]<https://developers.facebook.com/docs/plugins/page-plugin> [Accessed April 15 2018]
    1. Twitter [online]<https://dev.twitter.com/web/javascript/loading> [Accessed April 10 2018]

     

Cite This Work

To export a reference to this article please select a referencing stye below:

Reference Copied to Clipboard.
Reference Copied to Clipboard.
Reference Copied to Clipboard.
Reference Copied to Clipboard.
Reference Copied to Clipboard.
Reference Copied to Clipboard.
Reference Copied to Clipboard.

Related Services

View all

DMCA / Removal Request

If you are the original writer of this assignment and no longer wish to have your work published on UKEssays.com then please: