HTML JavaScript CSS
Advanced
60 mins
Teacher/Student led
145 points
What you need:
Chromebook/Laptop/PC or iPad/Tablet

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

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.

    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>

    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.

    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.

    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.

    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.

    Copyright Notice
    This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more