Learning Outcomes
- LO1: Demonstrate understanding of web standards and web deployment considerations
- LO2: Apply HTML and CSS to properly seperate content and presentation concerns of web pages
- LO3: Create imageless and efficient web navigation using advanced CSS solutions
- LO4: Implement dynamic and DOM-based web scripts that respond to user interaction
BNU Module Plan
Assessments
- 100% CW1: Feb 2019 Assessment Brief 2018-2019
Module Weekly Plan
| Week | Date | Subject Content | Practical |
|---|---|---|---|
| 1 | Oct 02 | Intro to Web & HTML | Exercise 1 |
| 2 | Oct 09 | HTML 5 Text & Hyperlinks | Exercise 2 |
| 3 | Oct 16 | HTML5 Tables, Images and Forms | Exercise 3 |
| 4 | Oct 23 | Core CSS styles | Work on CW1 |
| 5 | Oct 30 | CSS Layout and Navigation | Work on CW1 |
| 6 | Nov 06 | JavaScript Variables | JS Fundamentals |
| 7 | Nov 13 | JavaScript Functions | JS Functions |
| 8 | Nov 20 | JavaScript Objects | JS Objects |
| 9 | Nov 27 | JavaScript Forms | JS Bootstrap |
| 10 | Dec 04 | Form Validation | JS Forms |
| 11 | Dec 11 | Assignment Workshop | Bootstrap |
| 12 | Dec 18 | Assignment Workshop | HTML,JS,CSS |
| VACATION | |||
| 13-15 | Jan 15 - Jan 29 | Website Presentation | SUBMIT CW1 |
Useful Resources
- Wesbite w3schools.com: HTML5 Tutorial
- Wesbite w3schools.com: CSS Tutorial
- Wesbite w3schools.com: JavaScript Tutorial
- Wesbite w3schools.com: jQuery Tutorial
- Wesbite w3schools.com: Bootstrap Tutorial
- Book Teach Yourself: HTML, CSS and JavaScript (£22)
- Video:HTML5 Part 1 A very clear introduction to the basic elements of an HTML5 document
- Video:HTML5 Part 2 An example of using headings and css (but not used in the best way)
- Video:HTML5 Part 3 An example of using images and hyperlinks (but again using styles in the html which is regarded as very poor practice!!! Also contains examples of poor html code layout!!!)
- Video: Beginning HTML5 Part 5 A good example of using the new HTML5 semantic tags to structure the content of a web page
- Video: Beginning HTML Part 6 A good example of how css can be used to change the look and layout of elements in a web page.
- Video: How to Choose the best HTML5 Tag
- Video: Designing a Web Site. An example of designing, using sketches and design software to produce website for Joomla, WordPress and others without using PhotoShop.