===
Module leader:
General queries and admin issues:
Graeme Stuart: gstuart@dmu.ac.uk
- Years of professional and academic experience
- We don't know everything
- We don't mind if you point out mistakes
- Front-end web development is continuously evolving
- Tutors are also always learning
===
BEWARE: you're probably better or worse than you think you are:
The Dunning-Kruger effect on RationalWiki
===
- HTML defines Content
- CSS specifies Appearance
- JavaScript handles Behaviour
===
A website on a topic of your own choice
No more than 4 separate pages or 4 distinct screen sections (for a Single-Page App) that demonstrates your knowledge of all three front-end languages.
Most 3rd year students want to create something of use in a future career, others choose something that helps develop a skill or interest.
- Weighting: 100% of module mark
- Deadline: 16:00 Friday 3 April 2020 (week 27)
- Feedback: by 16:00 Friday 1 May 2020 (week 31)
- Submission: two URLs to the Assessment submission link on Blackboard - GIT repository URL and live GitHub pages URL
4 main sections, each with 5 detailed criteria
| 1 | HTML and CSS Code Quality |
| 2 | JavaScript, APIs & JSON |
| 3 | Responsiveness, Accessibility and Interaction |
| 4 | GIT Version Control |
See the marking criteria under Blackboard -> Assessment
===
let regularAttendance = "better grade";
- attendance and active attention in labs and lectures
- requires self-motivation and initiative
- satisfactory achievement of lab exercises
Specific learning outcomes are given for some labs
===
are numbered:
- lectures: links to slides online and Panopto video
- labs: complete lab exercises and links to starter code
agile learning materials mean there's a lab and lecture plan but some content emerges as the module progresses
- Announcements: (including jobs)
- Staff Contacts: Graeme, Fania, Dave
- Module Information: and handbook
- Lectures: numbered, links to lecture slides and video
- Labs: numbered, exercise details, links to code on GitHub
- Learning Materials: resources as required/requested
- Assessment: assignment brief, marking scheme, hand-in
The Learning Materials section contains:
- HTML/CSS validators, accessibility checker…
- guides to GIT and GitHub
- Programmer's text editors
- a guide to Chrome Developer Tools
- recommended books and articles
- other useful front-end resources
===
- open a free GitHub 3 year Education Account
- the module assignment requires regular GIT commits
- You will need to learn GIT basics
- if your code goes bad you can rewind
DON’T use other social online version control services (BitBucket, GitLab…) for this module
- lab code & examples
- lecture slides (HTML and PDF)
updated by tutors regularly (sometimes even during classes):
- You might spot an error we need to fix
- there's an unforeseen browser issue
- lab exercise code needs clarification
===
your web developer friends might say (every year!):
- "Just use Bootstrap/HTML boilerplate…"
- "Everyone's using React/Angular/etc."
- "Everyone uses JQuery. Why write JavaScript?"
- "To look modern it needs parallax scrolling"
- "All sites have a fat footer nowadays"
- "Use CoffeeScript/TypeScript/SASS/etc…"
People will always ask "should I learn X OR Y?" or A OR B… and ignore the fact that there's a C or a Z!
- Learn the core languages to be competent
- Being a JavaScript developer is future-proof. Being a specific framework developer is not (no matter what companies or managers ask for)
- Framework fashions (<-good guide!) change all the time
- Frameworks owned by large corporations have their own agenda
- We can point you to the most likely current trends
- For Node (back-end) your JavaScript skills will transfer
- We don't teach Bootstrap/SASS/LESS/cssnext, etc. because
CSS Grid Layout with custom properties is the framework
===
The official learning outcomes are:
- 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
- Demonstrate critical understanding of Information Architecture, interface design, usability and semantic markup
- Use GIT and GitHub for version control and code storage
- some understanding of the cultures and decisions driving current front-end web technologies
- how basic design principles affect usability and user interface (UI) design
- how Information Architecture aids navigability, usability and structure
- an ability to critically evaluate internet technologies and languages
- pointers towards what’s happening next for web technologies
===
- SGML is the basis (
title,h1-6,p,ol,ul...) - 1965 Ted Nelson, hyperlink
- 1987 Hypercard uses local hyperlinks (Bill Atkinson, Apple)
- HTML devised by Tim Berner-Lee (TBL) when at CERN
- 1989 TBL creates HTML/www on the Unix-based NeXT (for collaborative research)
- 1989 global hypertext project - the WorldWideWeb (www)
- 1991 the Internet first carries the www
The birth of the web (CERN) (probably before you were born)
A history of HTML—Dave Raggett 1998, co-editor HTML4 spec
The first visual web browser
The first visual web browser (on a Mac)
Semantic tags (they do what they say) e.g.
header, figure+figcaption, nav, main, section, footer…
For a great infographic see The History of HTML5, Matt Silverman, 2012
===
BACK END: ‘server’
(you may be familiar with this): handles requests for resources, does any necessary processing or retrieval (say from a database) finds images and other files, and sends it all to your browser.
FRONT END: ‘client’
(the subject of this module) typically a web browser—receives content from the server, renders and displays the pages you view, creates the HTML DOM, applies CSS styles and handles JavaScript interactions, including communication with online data.
HTML5 documents begins with this document type:
<!doctype html>then the HTML (parent) element:
<html>Then some information the browser needs:
<head>Then what actually appears in the browser:
<body>All websites have the following fundamental HTML tags
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Visible content is between matching pairs of HTML tags:
<header>The box at the top</header>
<p>Some text in a paragraph</p>
<footer>The box at the bottom</footer>Some tags don't need 'closing' e.g. the img tag:
<img src="my-images/my-duck-face.png">The only other 'self-closing' tags you might use are:
<br> <!-- a line break -->
<input> <!-- for forms -->A hyperlink goes to another page, website.
It can also link to a specific section on the same page, identified by an HTML id attribute:
<a href="http://xkcd.com">Go to another website</a>
<a href="another-page.html">Go to another page</a>
<a href="#my-section">Jump to an ID on the same page</a>
<section id="my-section">
<p>A paragraph inside the section</p>
</section>most HTML tags are nested inside other HTML tags:
<header>
<h1>The main heading</h1>
</header>
<main>
<section>
<h2>A section heading</h2>
<p>Some text in a paragraph</p>
</section>
</main>You can add HTML comments in your code:
<!-- The figure tag is for image/captions boxes -->
<figure>
<!-- The img tag goes here -->
<!-- The figcaption tag goes here -->
</figure>Text between <!-- and --> won't show on screen.
===
- HTML you only need some tags, don't learn them all!
- HTML tags are nested inside other HTML tags
- CSS learn the syntax, use only what you need
- indent your code as you go, with 2 spaces
- JavaScript is for programming interaction or data
===
"[I want to be a Web Developer but I know nothing…](https://www.quora.com/I-want-to-be-a-web-developer-but-I-know-absolutely-nothing-about-it-What-should-I-learn-and-how-and-where-can-I-learn-it/answer/Dave-Everitt?srid=2K0v\)"
===
Since its inception, the web has been primarily about information but this data-driven trend can just drown people with a flood of disconnected, random info factoids that few can grasp and even fewer be interested in.
The goal of a front end developer is to create clear, easy, fast pages and interfaces that will make people understand and care about the information, by putting it in context… and revealing implicit or explicit interconnections.
Front-end is not just a pretty face, it's the friendly, forward-looking interface of web development.
What is front-end development? —Ivan Codesido, The Guardian Online, 29sep2009 (yes, it’s still relevant or it wouldn’t be here)
===
===
Codecademy has the following free courses:
See the 2018 Module Options presentation
IMPORTANT:
although this is still good for an overview, there have been some changes since then
===
Please discuss module-related issues and questions with your module tutor or module leader