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

WebDesign+
Design
January 2014 – eBook Example 2

WebDesign+
Design
September 2014 – Final Edition

WebDesign+
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.

WebDesign+
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

WebDesign+
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

WebDesign+
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

WebDesign+
Main Issue – Adaptation to variation of screen resolutions & resizing

WebDesign+
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

EPQ Presentation Final

More Related Content

Similar to EPQ Presentation Final (20)

EPQ Presentation Final