JavaScript with HTML and CSS

This four-week JavaScript bootcamp will give students with little to no coding experience an introduction to web development. Throughout the course, students will create objects with HTML, style these objects with CSS, and animate them with JavaScript.

Start free course Join 244 others!

JavaScript with HTML and CSS

This four-week JavaScript bootcamp will give students with little to no coding experience an introduction to web development. Throughout the course, students will create objects with HTML, style these objects with CSS, and animate them with JavaScript.

Week 1: Getting started with HTML and JavaScript

Learning Objectives

  • Setting up programming environment
  • Creating HTML and JS files
  • Learning basic HTML syntax to make buttons and display text
  • Learning JS functions to receive and read user input

Week 2: Styling your webpage with CSS

Learning Objectives

  • Creating a CSS file
  • Defining classes for features in HTML
  • Learning attributes and properties in HTML and CSS
  • Stylizing digital clock and features in CSS

Week 3: Advanced topics in HTML, CSS, and JavaScript

Learning Objectives

  • Understanding basic syntax for HTML, CSS, and JS
  • Creating an analog clock from the digital clock

Week 4: Applying what you've learned

Learning Objectives

  • Integrating both clocks into one interactive interface
  • Adding buttons to switch between clocks
  • Using your creativity to jazz up your page
Steps to complete this course 23
  1. Week 1: Task 1: Environment setup and starting your first HTML file

    In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file.

  2. Week 1: Task 2: Getting user input with buttons

    For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button.

  3. Week 1: Task 3: Using JavaScript to read user input

    Now that we've set up the form, we'll use JavaScript to grab the user's input for us to use in our code.

  4. Week 1: Task 4: Printing the time with JS

    In this task, we'll show you how to print your local machine's time onto your webpage using some basic JS tools.

  5. Week 1: Task 5: Changing your clock based on user input

    Now we'll show you how to write a JavaScript function that takes the user's input from the radio button and prints the time in the timezone they selected.

  6. Week 1: Feedback

    Provide your feedback for Week 1!

  7. Week 2: Task 1: Linking your CSS file

    How to begin a CSS file and link it to your HTML file.

  8. Week 2: Task 2: Styling the body

    In this task, we'll go over how to style the text in your body tag.

  9. Week 2: Task 3: Creating your clock

    For the third task, we're going to begin designing a digital clock using some basic styling techniques.

  10. Week 2: Task 4: Styling your buttons

    Now that you've styled your text and your clock, now's time to make any changes to your radio buttons that you'd like.

  11. Week 2: Feedback

    Provide your feedback for Week 2!

  12. Week 3: Task 1: Gathering your existing code

    This step will simply guide you through starting a JavaScript file and copying your code from last week's assignment.

  13. Week 3: Task 2: Building the background of your clock

    In this task, we'll cover some tips and tricks to get your clock shaped and positioned correctly on your page.

  14. Week 3: Task 3: Adding numbers to your clock

    We'll use HTML and CSS in this step to print numbers on your clock and get them ready for positioning.

  15. Week 3: Task 4: Using rotation to align the numbers on your clock

    In this task, we'll walk you through how to use variables in CSS, as well as how to use a built-in CSS function to rotate your numbers so that they're in the right position on your clock.

  16. Week 3: Task 5: Designing the hands of your clock

    We'll go over some more CSS tricks in this step to get the hands of your clock in position for time-telling.

  17. Week 3: Task 6: Getting your hands to move

    We'll add some final touches to your CSS file so that your hands rotate correctly and then get to work on your JavaScript so that your clock can do what clocks do.

  18. Week 3: Feedback

    Provide your feedback for Week 3!

  19. Week 4: Task 1: Create a new page with an analog and a digital clock

    Your final assignment is going to merge everything you've created so far onto a single webpage, and allow the user to choose between a digital clock and analog clock. This first task will help you get all of your code in one place.

  20. Week 4: Task 2: Adding radio buttons for clock preferences

    Next, we're going to create a set of radio buttons that allow a user to choose if they’d like to see the time on an analog clock or on a digital clock. This task will demonstrate a different approach to radio buttons.

  21. Week 4: Task 3: Toggling between a digital and an analog clock

    Now that we have the page all set up, all that's left to do is to get our code to do what the webpage says! This task will go over some JavaScript functions using methods you've learned previously.

  22. Week 4: Task 4: Adding the bells and whistles

    Your final task will be to use your creativity to add anything you'd like to your clock webpage

  23. Week 4: Feedback

    Provide your feedback for Week 4!

Share JavaScript with HTML and CSS
Free

All public courses on Learning Lab are free.

Latest release

What is GitHub Learning Lab?

Learn new skills by completing fun, realistic projects in your very own GitHub repository.

Ready to start learning?

Start JavaScript with HTML and CSS