EPQ Presentation Final

How are HTML, CSS and JavaScript used to create Websites?

Extended Project Qualification 2014 Andrew Smith

WebDesign+ ➢ Initial Ideas for Web Development

➢ Conclusion

➢ Demonstration of WebDesign+

➢ The development lifecycle of WebDesign+ ➢ Analysis ➢ Design ➢ Implementation ➢ Testing ➢ Evaluation

! Christmas 2013 - Need for a resource that could be used as a reference guide for learning HTML and CSS.

! Create something that would involve me learning and putting into practice Web Design & Development Skills

! Supervisor – Create Artefact

! Idea that primarily began with the combination of wanting to create a resource to code Websites and research this in more detail through the Extended Project Qualification

! Front End Web Design focus Vs Back End Web Design focus

Initial ideas for Web Development - Analysis

WebDesign+ The Development Lifecycle

Design Christmas 2013 – eBook Example 1


Design January 2014 – eBook Example 2


Design September 2014 – Final Edition


Implementation

➢ Principally made up on ‘3 series’ of lessons: HTML, CSS and JavaScript

➢ Each series of lessons includes sub sections, showing how something (mostly an

element) or how a certain setting can be coded using the respective a language of

those series of lessons

➢ Consistent template throughout – Navigation bar always present

➢ Different colours to represent 3 different languages.


Implementation➢ General need to show ‘raw’ code alongside ‘live’ code

➢ Use of ‘LiveBoxes’

➢ Tip boxes offering advice

➢ Learn boxes summarising useful information of the page

Early LiveBox prototype

Navigation Bar & Homepage


Testing ➢ Line of code to add a pink background to the element

➢ Shows the area that an element takes up

➢ Ultimately, used for diagnosing issues where elements overlap or take up excessive

space

➢ Further tests involved:

➢ Dry run trials

➢ Getting others to check and use site

➢ Validation tests using http://validator.w3.org/ ➢ Verification via beta tests

http://validator.w3.org/

http://validator.w3.org/


Main Issue – Adaptation to variation of screen resolutions & resizing

➢ Main issue throughout development

➢ How to make page react well to different screen resolutions

➢ Mr Wilkinson & Mr Copeman– Use JavaScript to detect screen

resolution, add variable container to allow an increase or

decrease of screen resolution

➢ Local Web Developer contact – Use CSS Framework

➢ AOL Work Experience contact – Use different positioning

➢ Final Solution: ➢ Add main container & guttering

➢ Varied the positioning type

Rendering site on a Tablet Fixed screen resolution issue


Main Issue – Adaptation to variation of screen resolutions & resizing


Evalution ➢ Created a resource offering users the information needed when creating a

Website of intermediate level

➢ Put into practice skills that I had researched

➢ Used a wide range of sources to gather research

➢ Interactive courses – Useful, reliable & offer users a new learning

environment and experience

➢ CodeAcademy

➢ W3 Schools

➢ Long and ambitious project completed

➢ 27 pages

➢ 124 related files

➢ 8,317 separate lines of code

Conclusion ➢ Gained new skills in the field of Web Design & Development

➢ HTML

➢ CSS

➢ JavaScript

➢ Experience a project in its full cycle; analysis, design, implementation, testing, evaluation – Often required

when pursuing a career in Computer Science (software projects)

➢ Opened up work experience opportunities & gave confidence to pursue other Web projects

➢ AdShack – Online Advertising Based Community

➢ Punchline Productions – Local Media Production Company

➢ AS Computing Web Design module

➢ Further research the topic

➢ JQuery

➢ PHP

➢ Back-end Web Development

Documents

EPQ Presentation Final