Web Showcase

In this assessment, you'll create a web page from scratch. Starting with brainstorming ideas, you'll set up your project, add HTML content, style it with CSS, and add interactivity with JavaScript. Finally, you'll review, refine, and share your work for feedback.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Brainstorming Ideas
2 Setting Up Your Project
3 Adding HTML Content
4 Styling with CSS
5 Adding Interactivity with JavaScript
6 Review and Refine

1 - Brainstorming Ideas

Start by brainstorming ideas for your web page. Think about what kind of content you want to include, how you want it to look, and what kind of interactivity you want to add with JavaScript. Sketch out a rough design on paper.

10 points

2 - Setting Up Your Project

Once you have an idea of what you want to create, it's time to start coding. Begin by setting up your project in Codepen. Create a new pen and add the basic structure of an HTML document.

<!DOCTYPE html>
<html>
<head>
	<title>Your Web Page</title>
</head>
<body>

</body>
</html>

20 points

3 - Adding HTML Content

Next, start adding content to your page using HTML. Remember to use a variety of different elements to structure your content, such as headings, paragraphs, lists, images, and links. Consider how you can use forms and input elements to add interactivity.

20 points

4 - Styling with CSS

Once you've added some content, start styling your page with CSS. Try to make your page visually appealing and easy to read. Experiment with different colors, fonts, and layouts. Remember to use CSS selectors effectively to target the elements you want to style.

20 points

5 - Adding Interactivity with JavaScript

Finally, add some interactivity to your page with JavaScript. This could be something simple like a form that validates user input, or something more complex like a game or a dynamic data display. Remember to test your JavaScript thoroughly to make sure it works as expected.

30 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.

Web Showcase

Live Class Feed

1 - Brainstorming Ideas

2 - Setting Up Your Project

3 - Adding HTML Content

4 - Styling with CSS

5 - Adding Interactivity with JavaScript

Unlock the Full Learning Experience

Learning Points