Unit 20: HTML & CSS

Learning Outcomes

Understand the fundamentals of cascading style sheets (css)

Assessments

7th May 2018 Assessment 1: Cascading Style Sheets

Week 1 Activities - HTML Coding

Week	Lesson Activity	Learning Assessment	Skill Developed
Explain how HTML files access CSS Explain the features of the box model for CSS assess different implementation styles of CSS
1.1	10 min Tutor & Students: 10 min Complete Survey: Unit 22: Developing Computer Games 10 min Explain Assessments 1 and 2 in detail and answer any questions. 5 min Create a new Web Project as an empty ASP.NET Web Forms application, or add new html pages to existing website for the following demonstration. 25 min Presentation on the on the Basics of HTML in conjuction with the activity below 30 min A demonstration creating a simple html5 page using Visual Studio 2015. 10 min Summarise html5 and answer any questions	Questions and Answers Example HTML5 Page	Use Professional IDE Use Professional VCS (Git) HTML5 Coding
1.2	5 min Summarise last lesson on the basics of HTML. 30 min Semantic Markup with HTML5 together with a demonstration creating a simple example html5 page. 30 min An excercise in Semantic Markup using HTML5 tags to structure a typical web page. Example Text: Peacocks Wines 10 min Example HTML: Peacocks Wines 10 min Summarise the key concepts and answer any questions	Questions and Answers P4 M3 HTML5 Page Structure	Using Professional IDE HTML5 Coding
1.3	5 min Summarise last lesson on HTML5 Semantics. 25 min Presentation on the Basic Styling of HTML with CSS2.1 in conjunction with the following 30 min a demonstration of styling an html5 page using css. 25 min Completing Assessment 1 on how cascading style sheets work. 5 min Summarise css and answer any questions	Questions and Answers Example Styled Page Assessment 1	Use Professional IDE HTML5 Coding CSS 2.1 Coding

Useful Resources

Codecademy: An interactive way of learning the basics of HTML & CSS, JavaScript and jQuery
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.
Tutorial: The Beginner Tutorial explains the three ways of applying css and the css box model. The more advanced tutorials will be useful for assessment 2
Tutorial: Explains the three ways of applying css
Tutorial: Explains the css box model
Blog: Implementation Styles of CSS

Extended National Diploma in IT

Unit 20: Client Side Customisation of Web Pages - HTML and Css

Learning Outcomes

Assessments

Week 1 Activities - HTML Coding

Useful Resources

Week Index