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

Setting up Essential Tools

In this step-by-step lesson, you'll learn about essential web development tools, including code editors, browser developer tools, and the console for debugging. You'll use CodePen, an online code editor, to create and edit HTML, CSS, and JavaScript files. You'll also create a basic webpage and add interactive elements to it.
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 - Introduction to Web Development Environments

    In this lesson, you will learn about the essential tools needed for web development. You'll explore code editors, browser developer tools, and the console for debugging. These tools will help you create and edit HTML, CSS, and JavaScript files and identify and fix issues in your code.

    2 - Choosing a Code Editor

    Code editors are tools that help you write and edit code. They come with features like syntax highlighting, autocompletion, and code snippets to make coding faster and more efficient.

    Some popular code editors include Visual Studio Code, Sublime Text, and Atom. In this course, we'll be using CodePen, an online code editor that allows you to write and preview HTML, CSS, and JavaScript in real-time.

    CodePen

    What it is: An online code editor and open-source learning environment, where developers can create code snippets, creatively named "pens", and test them.

    Why it's useful: Offers a live preview of what they're creating, making it excellent for experimenting and immediate feedback. It also provides tons of community-created 'pens' for inspiration.





    3 - Understanding Browser Developer Tools

    Browser developer tools are built-in tools in modern web browsers that help you inspect, debug, and optimize your code. They provide features like inspecting elements, viewing and editing CSS, and monitoring network activity.

    To access browser developer tools, right-click on any element on a webpage and select 'Inspect' or use the keyboard shortcut (e.g., Ctrl+Shift+I for Chrome and Firefox).

    For example, right click on this and then click on 'Inspect'. The browser develop tools will open and you will see the code of this web page.


    4 - Using the Console for Debugging

    The console is a powerful part of the browser developer tools that allows you to view errors, warnings, and log messages from your JavaScript code. It's an essential tool for debugging your code and understanding what's happening behind the scenes. To access the console, open browser developer tools and click on the 'Console' tab.


    5 - Exploring CodePen

    Now that you know about the essential tools for web development, let's explore CodePen, an online code editor, to start coding. Follow these steps:

    1. Go to CodePen.
    2. Click on the 'Start Coding' button to open the online editor.
    3. You'll see three sections on the screen: HTML, CSS, and JavaScript. These are where you'll write your code for each respective language.

    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