US25656 Student Assessment Resources
US25656: Level 2 | Credits 3 : "Create a website using a mark-up language to meet a set brief".
Tauira/Student info page:
You will need to plan your website, make your website and test your website. You need to give evidence that you have done all 3 parts.
This page is a full of quick links to help you with your assessment.
For this assessment you need to learn how to use basic HTML and CSS to make a website. You can use our HTML-CSS courses.
Assessment brief
Conceptual Statement:
You need to use HTML5 and CSS3 to develop a website on one of the following topics. The website should inform people who visit it about the topic. The content and language used should be appropriate for the target audience, and comply with relevant legislation (e.g. copyright, privacy). All code used for evidence of the standard must be written by the tauira.
Website topic | |
Ko wai au? | Create a website about yourself. This could include information about you, your whānau, your whakapapa, interests and hobbies, achievements or anything else relating to yourself. |
Turangawaewae | Create a website about the place you come from or consider home. The pages of your site could focus on different things about the place, or highlights of the place, or even different places as many people call more than one place home. |
Tāngata/Wāhi Whakahirahira | Create a website about a person or place of significance relating to local history. This could be things like Pa sites and their histories, places relating to purākau and pakiwaitara, where famous local musicians/sports people grew up, went to school and did their activity. You may even have relatives who did significant things. |
Specifications
The site will:
- Have an index page and at least 2 other pages
- Have all pages linked with an easy to use navigation menu
- Include a range of appropriate structure tags (at least 2 from
<!doctype>
,<title>
,<style> </style>
,<header>
,<nav>
,<section>
,<article>
,<aside>
,<footer>
,<figure>
,<html>
,<head>
,<body>
) - Include a range of appropriate element tags (at least
<h1>
and<h2>
headings, paragraphs, hyperlinks/anchors and images) - Include at least two different embedded media that are relevant to the website topic(s) and target audience e.g. sound, video, animation, images.
- Include at least two CSS enhancements, e.g. colors, fonts, backgrounds, advanced layout/alignment.
- Have a consistent color scheme and use no more than 3 fonts.
- Be able to be opened and viewed on at least two browsers on a platform (e.g. Chrome/Firefox).
- Be able to be viewed by people with disabilities such as visual impairment (e.g. good contrast and text size, alt attributes on images). It is accessible and readable to a wide audience.
Constraints
The site must:
- Be written in HTML and CSS in a text editor such as the Code Avengers IDE or Notepad++
- Follow copyright and privacy laws (use creative commons and/or reference sources)
- Use content and language that is suitable for the target audience
- Be readable/legible and be proofread for spelling, grammar.
- Have text content that is original, appropriately licenced and referenced, or supplied by the teacher.
- Be tested during development and at the end to ensure it displays correctly in the relevant browsers and platforms.
- Be completed by the due date.
All code used for evidence of the standard must be written by the tauira/student. Teachers should ignore any CSS added by using templates.
First step is to login to https://www.codeavengers.com/ with your email and password.
Helpful files/links:
- Video: "How to login" - Stop at 1:44
- Video: "How to use the lessons"
- Download DOCX of assessment booklet
- Download PDF of assessment booklet
Notes:
- You are actually completing version 4 of the assessment, but this document is more difficult to read and is identical to v3.
- If teacher provides different assessment booklet, use that one.
Assessment Resources
- HTML-CSS Intro Resources
- HTML-CSS Level 1 Resources
- How to plan assessment
- How to make assessment in the IDE
- How to test assessment
Which course you will use?
In 5 lessons you will learn to create an extremely basic website. Then you will use Website IDE and the assessment booklet to plan, create and test your own website for the level 2 assessment US25656 v3. Download Intro course PDF instructions
In 11-20 lessons you will learn to create a basic website. Then you will use Website IDE and the assessment booklet to plan, create and test your own website for the level 2 assessment US25656 v3. Download Level 1 course PDF instructions
HTML-CSS Intro Resources:
<p>
, <h1>
and<h2>
<!doctype html>
,<html>
, <head>
, <title>
and <body>
<img src="" width="" height="" alt="">
* Important note <iframe>
<a href="https://www.codeavengers.com">
, document relative, root relative, absolute Adding external CSS
background-image: url()
, color
, background-color
HTML/CSS Level 1 Resources:
<p>
,<br>
<title></title>
, <h1></h1>
, <h2></h2>
, <h3></h3>
& <strong></strong>
1. paragraph and break tags
2.
title
, heading
(<h1>
) & strong
tags
3. Fixing common HTML mistakes
HTML notes
<img src="" height="" width="" title="" alt="">
<a href="" target="_blank" title="">Link text</a>
absolute, document relative and root relative
<ol></ol>
, <ul></ul>
, <li>
, <hr>
, <meta name = "description" content="">
, <meta name="viewport" content="width=device-width">
& <meta charset="utf-8">
<html></html>
, <head></head>
, <body></body>
, <header></header>
, <footer></footer>
& <section></section>
9. Google style guide for HTML
10.
header
, footer
& section
tags
Google Style Guide and structural tags notes
html { background-color: green;}
, ol,p { color: red;}
h2 { font-family: monospace;}
, h3 {font-family: 'Trebuchet MS', sans-serif;}
,
Sans-serif
(- Andale Mono, Arial, Arial Black, Century Gothic, Trebuchet MS, Verdana),
Serif
(- Times New Roman, Georgia),
Cursive
(- Comic Sans MS),
Fantasy
(- Impact),
Monospace
(- Courier New), &
h1 { font-size: 1.27cm;}
text-decoration: underline;
(overline, line-through) text-transform: uppercase;
(lowercase or capitalize) Pseudo-elements
:active
, :focus
, :hover
, :lang
, :link
, & :visited
14. Add style to anchor tags
15. CSS Google style guide
CSS Style Guide and anchor style notes
border:
, width:
, height:
, max-width:
auto;
, rgb(r,g,b)
, hex #ff8800
, hsl(hue, saturation, lightness,alpha)
margin:
& padding:
letter-spacing:-1px
,box-shadow: inset;
([horizontal offset] [vertical offset] [blur radius] [spread radius] [color])text-shadow: horizontal offset;
([vertical offset] [blur radius] [color])list-style-type: circle;
(disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman)<header></header>
, <footer></footer>
, <nav></nav>
, <aside></aside>
, <section></section>
, <article></article>
, <figure></figure>
Assessment
Planning your website
Info | CA lesson | Notes | Video |
Use text editor, save files: Learn to use CA IDE or Notepad++- create, save, edit html, css and png docs | CA IDE | IDE guide | What is the CA IDE |
Opening in browsers: Teach to right click open with, or deploy webpage and copy/paste URL into different browsers. | |||
Milestones, resources, testing procedures: How to plan (milestones, resources, what does testing look like?) | Planning | ||
Purpose, target audience: What is your website about, who will see it, what are their needs? | Brief | ||
Conceptual design, site map: Wireframes- not text, just boxes and annotations | Page Layout Notes | Conceptual Design |
Making your website
Info | CA lesson | Notes | Video |
Assessment: YOU MUST DOWNLOAD your work after every session so you have a digital copy of your files and to SAVE your work hit the UPLOAD button to upload to our live site. A basic website is 3 connected webpages with hyperlinks, images and some simple CSS. | Make you own website in our Website IDE. | IDE Notes- Scroll to "HTML/CSS Website IDE" | Video for setting up IDE |
Testing a website and meeting social responsibilities
US25656v3 | CA Resources | ||
Concepts to teach for assessment | CA lesson | Notes | |
Testing to make sure the website works: Evidence in screenshots or because the website works | Use our IDE to view on different platforms and the Deploy function to push the website into a live version. You can record student URLS and access the live sites later for marking. | ||
Accessibility: Nav bar in same place, use alt tags, Write transcript/lyrics of video, Translate languages | HTML/CSS 1#4.5: Alt attributes | Alt Attribute Notes | |
Presentation: Good design practices | Good Design notes | ||
Copyright, creative commons: Following the law | Creative Commons Notes |
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F