- Staff
- Calendar
- Module details
- Assignment
- Recommended resources
- Extensions and late submission
- Deferrals, failure and reassessment
- Academic Offences and Bad Academic Practices
- Further general advice on your project
Dr Graeme Stuart: gstuart@dmu.ac.uk
- Dr Graeme Stuart: gstuart@dmu.ac.uk
- Dr Fania Raczinski: fania.raczinski@dmu.ac.uk
- Mr Dave Everitt (lectures only): deveritt@dmu.ac.uk
Please note: teaching staff contact outside workshop and lecture hours is strictly via email. Please contact Graeme Stuart for any admin-based module enquiries.
Module lectures (1 hour) run from weeks 16-26. Module labs (2 hours) run from week 17-27 (final workshop in week commencing 30 March). The final project hand-in date is: 4pm Friday 3 April 2020 (week 27) via the link under Assessment on Blackboard.
Labs and lectures end 10 minutes early to allow for class changeover.
For specific class times and locations, check your personal timetable.
| Week | Date commencing | Lecture | Lab |
|---|---|---|---|
| 16 | 13 Jan | Module introduction, the 3 front-end languages | (no labs) |
| 17 | 20 Jan | Arranging page items: CSS positioning, floats, flexbox, grid | A basic page with all 3 languages, set up GIT and GitHub, project brief |
| 18 | 27 Jan | JavaScript data: local storage | The box model and positioning |
| 19 | 03 Feb | HTML5 semantic markup and elements, validation, CSS syntax | simple JavaScript interaction with local storage |
| 20 | 10 Feb | mobile-first, responsive web design | the DOM: parent, child, sibling, validation |
| 22 | 17 Feb | JavaScript: JSON data, APIs | Mobile-first responsive wireframe, responsive menus. Finalise project concept |
| 21 | 24 Feb | BREAK | (no labs) |
| 23 | 02 Mar | Usability: IA, 4 principles of design, accessibility | pushing remote JSON data from APIs to the DOM |
| 24 | 09 Mar | CSS animation: transition, transformation, animation | IA, content planning and preparation |
| 25 | 16 Mar | Using developer tools (speed/optimisation), good practice(?) | final project development |
| 26 | 23 Mar | Progressive web apps, developer tools (speed/optimisation) | final project development, how to hand in, final look at marking criteria |
| 27 | 30 Mar | (no lectures) | last chance to work on assignment before hand-in deadline 4pm Friday 03 April |
Location and time: Gateway House, check personal timetable for room and time
Ten labs (see timetable above) 2 hours per week (weeks 17-22 and 24-27).
Labs involve guided exercises and hands-on coding, and are a focussed place to work on your final assignment and develop your skills. This is a very concentrated module, covering the three languages HTML5, CSS3 and JavaScript ES6. Completing all the lab exercises will ensure that your knowledge keeps pace with the module calendar.
Work submitted without sufficient knowledge may not meet the required standard and could be rejected, and all code is examined for plagiarism.
Location and time: check personal timetable 1 hour weeks 16-22 and 24-26
Ten 1-hour lectures, week before lab (see timetable above).
Lectures introduce the learning materials the week before the related lab (see timetable). Lectures provide essential technical information as well as wider perspectives on front-end web technologies. They also contain carefully-selected links for further information.
All lectures are made available online in both HTML and PDF formats, and recorded via Panopto. Each HTML slide has a unique URL which enables lectures to be indexed for easier access to specific content.
By the end of this module, through lecture attendance and completion of lab exercises, you will be able to:
- Use GIT and GitHub for version control and code storage
- Demonstrate critical understanding of Information Architecture, user interface design, usability principles and semantic markup
- Demonstrate detailed understanding of all three current front-end web technologies, their use and context
- Create a fully standards-compliant, responsive and accessible website or web-technology-based application
In addition, best practice in general software development (e.g. regular version control of the final project code, consistent code indentation, consistent file and folder naming, etc.) will be encouraged throughout the module. These will also be part of the marking criteria for the final project.
Blackboard is a crucial part of this module, these are the main sections:
- Announcements: important reminders, possible jobs
- Staff Contacts: module leader and teaching staff
- Module Information: handbook and module calendar
- Labs: (numbered) exercises and links to code
- Lectures: (numbered) links to slides (HTML, PDF, Panopto)
- Assessment: assignment brief and marking scheme, hand-in link
- Learning Materials: further learning resources, including:
- GIT and GitHub guide
- recommended books, articles and tutorials
- more advanced or detailed resources
Feedback: will be given on work in progress during workshop sessions and in written form via the marking rubric for the final assignment, within 20 working days of the deadline.
Reminder: all marks are provisional, subject to moderation, and will be ratified by the June Progress and Awards Board.
If you need any support or advice on completing this coursework please visit the Student Matters tab on the Faculty of Technology Blackboard page.
- Weighting: 100% of module mark
- Deadline: 16:00 Friday 03 April 2020 (week 27)
- Feedback: by 16:00 Wednesday 06 May 2020 (week 32)
- Submission: two URLs to the Assignment submission link on Blackboard - GIT repository URL and live pages URL on the module GitHub classroom (URL to follow)
You will create a website of no more than 4 separate pages or - if a SPA (Single-Page App) - 4 distinct screen sections on a topic of your choice (e.g. portfolio, business, interests, game reviews…). This can be useful for your future and should demonstrate your knowledge of all three front-end languages.
- the project code repository on the module GitHub classroom (URL to follow)
- the visible website GitHub page on the module GitHub classroom (URL to follow)
These two URLs can be entered via the Assignment submission link on Blackboard
Please make sure you double-check your code repository and live site URLs before submitting.
These come under four headings:
- HTML and CSS Code Quality
- JavaScript, APIs & JSON
- Responsiveness, Accessibility and Interaction
- GIT Version Control
Please ensure you understand all the requirements under each heading - see the full marking criteria under Assessment on Blackboard.
Because of the practical nature of this module, there will be no anonymous marking as the origin of each students’ work is obvious to the tutors from workshop sessions.
The following are also usable, but not advised for the module:
Do not use Internet Explorer, which may be the default on lab machines. If it opens, just close it down and use Chrome to view your HTML files.
The main default mobile browsers are fine for previewing work, too.
For your own laptop or personal computer, you just need a good programming text editor and GIT. Any of the below are free, and good:
GIT is installed on lab machines, but you can download and install GIT for your own equipment here. All the above editors have integrated GIT management, either natively or via a plugin.
We will be using no more than a handful of GIT commands from the command-line (but not one of the desktop GUI interfaces) throughout the module.
These two books have been core texts for web developers:
- Ethan Marcotte, Responsive Web Design (2014)
- Luke Wroblewski, Mobile First (2011)
Although they were published a few years ago, they are regarded as game-changers and are still relevant in 2019.
Two further HTML5 and CSS3 books are also useful:
- Dan Cederholm, CSS3 for Web Designers (2nd Ed, 2015)
- Jeremy Keith & Rachel Andrew, HTML5 for Web Designers (2nd Ed, 2016)
There's also a free Udacity course - Responsive Web Design Basics - from Google developers.
Two free online JavaScript books are useful references:
- Marijn Haverbeke, Eloquent JavaScript
- Dr. Axel Rauschmayer, Exploring ES6
You won’t need to read these in detail for the module, but if you want to dig deeper into JavaScript, they cover far more than the module learning materials can.
The module recommends only two online reference sites:
- Mozilla Developer Network (MDN): HTML, CSS, JavaScript
- W3Schools references: HTML, CSS, JavaScript (do not use "onclick" examples)
MDN is more up-to-date, accurate and technical. W3Schools is good for quick reference although some examples use inline JavaScript (e.g. "onclick") - instead, the JavaScript eventListener is covered in module learning materials as current best practice.
You can validate HTML and validate CCS online, and a good text editor will also highlight syntax errors.
Finally, Can I Use is indispensable for checking browser support for newer and emerging code features. However, almost all code taught on the module is supported by modern browsers.
These may be granted only for significant reasons (e.g. chronic health issues, serious family problems, etc.) They cannot be granted for bad time management, holidays, pressure from other module deadlines, minor illnesses or accidents, clashing appointments, etc. Your request for an extension must meet the criteria set out by the university where acceptable and unacceptable conditions are listed under "What are extenuating circumstances?".
Late submissions will be processed in accordance with current University regulations which state:
“the time period during which a student may submit a piece of work late without authorisation and have the work capped at 40% [50% at PG level] if passed is 14 calendar days. Work submitted unauthorised more than 14 calendar days after the original submission date will receive a mark of 0%. These regulations apply to a student’s first attempt at coursework. Work submitted late without authorisation which constitutes reassessment of a previously failed piece of coursework will always receive a mark of 0%.”
These rules also apply to work submitted after an agreed 14-day extension deadline authorised by the Module Tutor or Leader.
In very exceptional circumstances, a deferral may be granted.
If you are judged to have failed the course, contact the module leader or workshop tutor as soon as possible for advice on how to resubmit for reassessment.
These include plagiarism, cheating, collusion, copying work and reuse of your own work, poor referencing or the passing off of somebody else’s ideas as your own. If you are in any doubt about what constitutes an academic offence or bad academic practice you must check with your tutor. Further information and details of how DSU can support you, if needed, is available at the following DMU web pages:
Read the DMU library page “What is plagiarism”. As for copying code, developers often examine source code from other sites and adapt features they like into their own work. However, pre–designed templates of complete designs, copying “build a website” tutorials without significant modification, or taking code wholly or substantially from other sources is not acceptable, as you will learn very little.
Please include specific references in your GitHub readme.md file for any third-party code or online tutorials you have adapted.
However, the practical work submitted for this course must primarily be your own, so be aware that tutors will check source code in detail.
For further information, please refer to the student regulations on the DMU website.
- is all HTML and CSS code validated?
- are there any Javascript errors in the console?
- is the site fully responsive at all sizes?
- is the navigation effective or is some content hard to find?
- is there a good page structure with HTML5 semantic tags?
- is all code indented consistently?
- is all JavaScript (.js) and CSS (.css) in separate files?
- are images in a separate folder?
- are all file names lower-case?