✏ Lab 1—Basic HTML and jQuery exercises
This is the first lab of the Beginning jQuery course.
Welcome to the lab and exercise section. In this section, I’ll give you several hand on tutorials and exercises.
Tutorials come with the step-by-step sample code that you can follow. After you complete the tutorial, I encourage you to build something your own on top of the tutorial code.
Besides tutorials, there are exercises. I’ll provide a starting point to help you. But there is no model answer on the topic. You need to figure out how to accomplish the task.
1. Basic HTML exercise
Imagine now we are planning a website. The website is about a game that uses real world’s weather data. We have the following content.
Title: World Simulation Game
This is a game that simulate your life with your real world data. This game uses the real world’s weather and temperature data.
It’s rainy today in Macao. You should buy an umbrella by using $10 game coins.
Haven’t started playing yet? Buy now with $4.99.
Thank you and enjoy the rest of your Friday.
Now try to implement the HTML by using the provided content. Make sure you apply the right grouping on the content. Also please consider adding
You can use the following link as a starting point.
2. Basic jQuery Exercises
You may find the suggested solution in the following link:
Taking the code further
- How about adding a button that clears the error message?
- Can we define the show and hide animation by using CSS and jQuery addClass?
- Let’s take the exercise one step further. Now we have a form that user needs to input data. Please display an error message if the user submit the form with the input field blank. The following link provides you a starting point.
After you completed this exercise, try to add more fields to the form and do similar jQuery checking. For example, you may add a checkbox and check if the checkbox is checked on form submission.
3. Lab — Building tab panel
The following links show how we can build a tab panel by using HTML and jQuery.
In Step 2, we use jQuery to handle the tab link clicking and toggle the visibility of tabs.
In Step 3, we use
removeClass to indicate which tab is currently in active.
Taking the code further
By following the steps, you created a working tab panels. We haven’t added any CSS styles to the tab. Can you style the tabs into different themes?
4. Extra Resources: 147 Color Names
There are actually 147 color names in CSS. If you need to choose colors for your CSS styles, you can find those color names in the following website.
Submitting your exercises
Once you have worked on the exercises, you can send me the links of your work in the chat area, globally or privately. Usually there are plenty of questions when working on the code. You can ask me any questions via the 1-on-1 chat too.