Web design - Certificate tasks




About our certificates

Unlike other providers, our certificates are not merely an acknowledgement of attendance, the child must demonstrate they can complete all the tasks required for a certificate unaided.

The certificates become increasingly difficult as a child progresses. The Level 2, 3, 4, and 5 certificates may each take a child 10-15 sessions to complete, depending on their age, knowledge and experience.

How to earn a certificate

Students can achieve a certificate in 2 ways ..

  1. By building a website or websites during an activity or code club session. As students progress their teacher will give them feedback on what they need to do, and let them know when they have reached a certificate level.
  2. Complete the certificate tasks on this page under exam conditions.

Types of evidence

At least one of the following ..

 

Rules

To achieve your certificate you must complete ALL of the tasks under exam conditions. This means ..

  1. You must use a text editor.
  2. You must be able to explain how your website work.
  3. You must complete the tasks during a Pixel Gang lesson/session (like a test or an exam) or be able to explain your website or processes if you have made a website elsewhere.
  4. You CANNOT use any of the tutorials or example scripts from this website or any other website to help you. You must only have this web page open.
  5. You cannot use notes or books to help you.
  6. You must save and present your work so it can be assessed.

 

Level 1 - beginner

You must be able to create a basic multi-page website with text and images and link between the pages and to other websites.

Web Design Level 1 Certificate tasks
Level
Task 1a Create web pages

Show that you know how to hand code two (or more) html documents

Create a simple CV/biography website. Do the following ..

1. Start by creating a local site folder.

2. Use a text editor to hand code two or more web pages. You must include, html, head, title, body, h1, h2 and p tags.

Your site could include the following pages ..

"Home"
"About me",
"Contact"
"Biography"
"Interests"
etc

3. Add text content to your site pages.

4. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
1
Task 1b Link between web pages

Show that you know how to add links to navigate between the two (or more) html documents you created in task 1a.

Do the following ..

1. Create a text list for a navigation feature and then it with <a href> tags (relative link).

2. Convert the text list into <a href> links to your website pages

3. Add the navigation feature to every site page.

4. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
1
Task 1c Link to another website

Show that you know how to add a link to an external website

Do the following ..

1. Create some links to other websites. For example, create a list of favourite sites.

2. Demonstrate/show your work in a browser.


IMPORTANT NOTE! Do NOT ?
1
Task 1d Use images

Show that you know how to add an image to each html document

Do the following ..

1. Create and save an image in an appropriate format such as .gif, .jpg or .png

2. Use <img src> tags to add the image to a web-page.

3. Demonstrate/show your work in a browser.


IMPORTANT NOTE! Do NOT ?
1
Task 1e Create a basic website

Show that you know how to create a basic website

Do the following ..

Successfully create and demonstrate a basic finished personal CV website in a browser. Your site must include ..

1. Page headings

2. Navigation between 3 or more site pages

3. Text content

4. Images


IMPORTANT NOTE! Do NOT ?
1
     

 

Level 2

You must have completed all Level 1 tasks. You will also know how to use CSS styles for text and images.

Web Design Level 2 Certificate tasks Level
Task 2a Define basic internet concepts

Show that you understand basic web concepts

Do the following ..

Explain the difference between the internet and the world wide web.

IMPORTANT NOTE! Do NOT ?

2
Task 2b Basic CSS styling

Show that you know how to use basic CSS

Do the following ..

1. Create a CCS style sheet document.

2. Create a style/selector for the <h1> tag.

3. Link the style sheet to 2 or more web site pages.

4. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
2
Task 2c Edit CSS styles/selectors

Show that you know how to code CSS styles

Do the following ..

1. Create a styles to colour the background of your website.

2. Create a style to control the appearance of <p> tag content.

3. Create a style to control the appearance of the <a> tag.

4. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
2
Task 2d Use class style for text

Show that you know how to use CSS class styles for selected text

Do the following ..

1. Create a class style to allow you to style selected text in a <p> tag. Add the following properties to the style ..

color red
bold
italic

2. Apply the style to selected words in 3 locations on a web page.

4. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
2
Task 2e Use class style for images

Show that you know how to use CSS class styles to float images

Do the following ..

1. Create a class style to allow you to float an image left or right in a <p> tag

2. Apply the style to an image so that <p> text flows around it.

3. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?
2
     

 

Level 3 - intermediate

You must have completed all Level 1 and 2 tasks. You will also know how to position web page elements with <div> tags.

Web Design Level 3 Certificate tasks Level
Task 3a Center a website in a browser window

Show that you know how to use the box model, and use <div> tags and styles to control positioning of elements on a page

Do the following ..

1. Add a container <div> tag to a web page.

2. Create a style to center the web page content (entire website) in a browser window.

3. Demonstrate/show your work in a browser.

IMPORTANT NOTE! Do NOT ?

3
Task 3b Use CSS layout page techniques

Show that you know how to ?

Do the following ..

1. Divide web page content with <div> tags nested within the container div tag, such as ..

Page title (masthead)
Navigation
Content box
Footer

2. Create styles to re-size, position, and colour the backgrounds of your div tags so they are clearly visible

3. Demonstrate/show your work in a browser


IMPORTANT NOTE! Do NOT ?
3
Task 3c Web page background images

Show that you know how to add a background image to a web page

Do the following ..

1. Create an image large enough and with a suitable resolution to work as a background for a web page

2. Add the necessary <div> tag to your web page

3. Create a style to display the background image

4. Demonstrate/show your work in a browser.


IMPORTANT NOTE! Do NOT ?
3
Task 3d Embed media

Show that you know how to embed external media: Such as a YouTube video or Scratch game.

Do the following ..

1. Embed a YouTube video in a web page

2. Embed a Scratch game in a web page

4. Demonstrate/show your work in a browser

IMPORTANT NOTE! Do NOT ?
3
Task 3e Tables

Show that you know how to add a table of data to a web page.

Do the following ..

1. Hand code a table with at heading and at least 5 rows and 4 columns. For example, make a table with your favourite games showing title, description, cost and review (star rating)

2. Style the table with CSS styles

3. Demonstrate/show your work in a browser


IMPORTANT NOTE! Do NOT ?
3
Task 3f Web fonts

Show that you know how to use web fonts throughout a site.

Do the following ..

1. Select 2 or more Google web fonts

2. Embed the necessary Google code in the head tag of your web pages

3. Use style to style text tags with your selected web fonts

4. Demonstrate/show your work in a browser


IMPORTANT NOTE! Do NOT ?
3
     

 

Level 4

You must have completed all Level 1, 2 and 3 tasks. You will also know how to refine a website with html5 effects and optimise it for SEO.

Web Design Level 4 Certificate tasks Level
Task 4a Opacity/transparency

Show that you know how to make an html element transparent

Do the following ..

Add transparency to html elements including ..

1. <div> tags

2. Text tags

IMPORTANT NOTE! Do NOT ?
4
Task 4b Gradients

Show that you know how to add a colour gradient to a <div> tag

Do the following ..

Add gradients to solid background colours to contrast with text headings.

IMPORTANT NOTE! Do NOT ?
4
Task 4c html5 effects

Show that you know how to use html5 transform effects

Do the following ..

1. Create a shadow effect on some text.

2. Create a shadow effect on a <div> box

3. Add rounded corners to a visible <div> box shadows, rounded corners and transitions.

4. Create 3 CSS transform animation effects such as re-sizing, skewing, moving and fading

IMPORTANT NOTE! Do NOT ?
4
Task 4d Social media widget

Show that you know how to add a social media elements to a web-page

Do the following ..

1. Embed a social media share widget in a web page

2. Add a social media feed to a web-page

IMPORTANT NOTE! Do NOT ?
4
Task 4e SEO

Show that you know how to implement an effective search engine optimisation coding strategy for a website

Do the following ..

1. Identify the best keywords and keyword phrases

2. Optimise file naming

3. Add meta data to the <head> tag

4. Optimise the <title> tags

5. Optimise <h1> tags

6. Write some SEO optimised content

7. Optimise image alt tags


IMPORTANT NOTE! Do NOT ?
4