Practical Exercises

Part 1: HTML
HTML Exercises:

1. Create a file index.html. This should be a simple page that shows the following text:
“Welcome to Eagle IT Solutions”:

2. Crate a file index.html. This should be a simple page that shows the numbers from 1 to 10:

3. Crate a file index.html. This should be a simple page that has its title set to “Eagle IT
Solutions”.

4. Crate a file index.html. This should be a simple page that prints the message "Who created
this page? Check page's title for the answer." to the screen, and set the title of the page to
your full name.

5. Crate a file index.html. This should be a simple page that contains two lists. The first list in
unordered and is a list of subjects: English, Math, Programming, Algorithms and Databases.
The second list is ordered list and contains the following items: pizza, salad and coffee.
Styling HTML Exercises:
1. Create a file index.html. This should be a simple page that shows the following text:
“Welcome to Eagle IT Solutions”. The text should be in blue.

2. Crate a file index.html. This should be a simple page that shows the numbers from 1 to 10.
Each number should be in different color by your choice.

3. Create a file index.html. This should be a simple page that shows the following text:
“Welcome to Eagle IT Solutions”. The text should be in Tahoma font

4. Create a file index.html. This should be a simple page that shows one paragraph with
multiple sentences. Each sentence should be in different font family.

Used fonts: Courier New, Times New Roman, Helvetica, Georgia.

5. Create a file index.html. This should be a simple page that shows one paragraph that is a
description of a book; include the title of the book as well as its author. Names and titles
should be underlined, adjectives should be italicized and bolded.

6. Crate a simple page that showsyour name to the screen with every letter being a different
heading size.
HTML Text Formatting exercises:
1. Create a simple page that shows the squares of the numbers 1 - 20. Each number should be
on a separate line, next to it the number 2 superscripted, an equal sign and the result.

(Example: 102 = 100)

2. Create a simple page that shows 10 names with a line break between each name. The list
should be alphabetized, and to do this place a subscripted number next to each name based
on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized
list with a subscript number next to each name, then the alphabetized list. Both lists should
 have an <h1> level heading. The output should be like the following:

3. Create a simple page that prints an h1 level heading followed by a horizontal line whose
width is 100%. Below the horizontal line print a paragraph relating to the text in the heading.

4. Create a simple page that shows an address in the center of the page:
 5. Create a simple page that shows ten acronyms and abbreviations of your choosing, each
separated by two lines. Specify the data that the abbreviations and acronyms represent.

HTML link exercises:

1. Create a simple page that will contain links to Google, Udemy and Coursera:

2. Create a simple page that will contain links to Google, Udemy and Coursera, that when
clicked will open the site in a new window.
3. Create a simple page that at the top will contain a link that when clicked will go to the
bottom of the page. Make sure that you have enough text that will fill the height of the
entire screen:

4. Extend the previous exercise by adding a link at the bottom of the page, that will go to the
top of the page.

HTML Image Exercises

1. Create a simple page where you will display 5 different images. Skip 2 lines between each
image. Make sure that each image has a title.
2. Create a page where you will display and image with border of size 2, width 200 and height
200.

3. Create a page where you will display and image that when clicked will open Udemy in a new
window.
 4. Create a page where you will display and image that when clicked will open itself in the
browser :

Part 2: CSS exercises

CSS background exercises

1. Using HTML and CSS, create a simple page where you will do the following tasks:
• Set the page background color to gray
• Create a table and set its background color to light blue
2. Using HTML and CSS, create a simple page where you will do the following tasks:
• Set a background image for a page
• Set a background image for a table
3. Using HTML and CSS, create a simple page where you will set a background image that does
not move
4. Using HTML and CSS, create a simple page where you will set a background image that
repeats horizontally
5. Using HTML and CSS, create a simple page where you will set a background image that
repeats vertically
6. Using HTML and CSS, create a simple page where you will set a background image that
repeats for the whole page
7. Using HTML and CSS, create a simple page where you will set a background image that is
center positioned
8. Using HTML and CSS, create a simple page where you will set a background image that is
center positioned and does not move
9. Using HTML and CSS, create a simple page like in the previous exercise, where you will set all
the background features with one declaration

CSS text exercises

1. Using HTML and CSS, create a simple program where you:

• set the font type of text
• set the font size of text
• set the color of text
• set the font style of text
• set the font weight of text
• set the font variant of text
• set all the font features with one declaration
CSS list examples
Create a simple page using HTML and CSS where you will have:
- one unordered lists with different bullets

- one ordered lists with different bullets
- One list where you have image for bullets

CSS border examples

Create a simple page using HTML and CSS where you will:
-set the style of the left border

-set the width of the left border

-set the color of the left border

-set all the properties of the left border

-Do the same for the top, right and bottom border
-Set the style of the entire border

-Set the width of the entire border

-Set the color of the entire border

-Set all the border properties in one declaration

CSS margin examples

Create a simple page using HTML and CSS where you will create one div, set a solid blue border of
1px, and orange background and then:
-Set the left margin
-Set the right margin
-Set the top margin
-Set the bottom margin
-Set all the margin properties in one declaration



CSS padding examples

Create a simple page using HTML and CSS where you will create one div, set a solid blue border of
1px, and orange background and then:
-Set the left padding
-Set the right padding
-Set the top padding
-Set the bottom padding
-Set all the padding properties in one declaration



CSS dimension examples

Create a simple page using HTML and CSS where you will create one div, set a solid blue border of
1px, and orange background and then:
-Set the height of an element
-Set the width of an element
Part 3: JavaScript

1. Write a JavaScript program to display the current day and time in the following format:
Today is: Tuesday.
Current time is: 10:30
2. Write a JavaScript program to print the contents of the current window

3. Write a JavaScript program to get the current date and print it in the following formats:
mm-dd-yyyy, mm/dd/yyyy or dd-mm-yyyy, dd/mm/yyyy
4. Write a JavaScript program to find the area of a triangle where lengths of the three of its
sides are 5, 6, 7
5. Write a JavaScript program where the program takes a random integer between 1 to 10, the
user is then prompted to input a guess number. If the user input matches with guess
number, the program will display a message "Good Work" otherwise display a message "Not
matched”
6. Write a JavaScript program to calculate multiplication and division of two numbers (input
from user). Note: you can’t divide by 0.

7. Write a JavaScript program to convert temperatures to and from Celsius, Fahrenheit. The
formula is: c/5 = (f-32)/9 , where c is the temperature in Celsius and f is the temperature in
Fahrenheit. For example:
60°C is 140 °F
45°F is 7.222222222222222°C

8. Write a JavaScript program to get the website URL (loading page)

9. Write a JavaScript exercise to get the extension of a filename. For example, define a variable
that holds a filename “report.pdf”. The program should output pdf.
10. Write a JavaScript program to remove all special characters of a given string and return the
new string.
11. Write a JavaScript program to check whether a string starts with 'Java' and false otherwise
12. Write a JavaScript program to check the total marks of a student in various examinations.
The student will get A+ grade if the total marks are in the range 89..100 inclusive, if the
examination is "Final-exam." the student will get A+ grade and total marks must be greater
than or equal to 90. Return true if the student get A+ grade or false otherwise
13. Write a JavaScript program to capitalize the first letter of each word of a given string
14. Write a JavaScript program to convert a given number to hours and minutes
15. Write a JavaScript program to extract the first half of a string of even length
16. Write a JavaScript program to create a new string without the first and last character of a
given string
 17. Write a JavaScript program to test whether a string end with "Script". The string length must
be greater or equal to 6
18. Write a JavaScript program to create a new string from a given string, removing the first and
last characters of the string if the first or last character are 'A'. Return the original string if
the condition is not satisfied.

19. Write a JavaScript program to compute the sum of elements of a given array of integers
20. Write a JavaScript program to check whether 1 appears in first or last position of a given
array of integers. The array length must be greater or equal to 1
21. Write a JavaScript program to check whether the first and last elements are equal of a given
array of integers
22. Write a JavaScript program to reverse the elements of a given array of integers
23. Write a JavaScript program to test whether an array of integers contains the values 1 or a 3
24. Write a JavaScript program to swap the first and last elements of a given array of integers.
25. Write a JavaScript to find the longest string from a given array of strings

Part 4: Practical Problems

Start this exercises after watching the HTML, CSS and JavaScript YouTube playlists.

1. Make a tribute page of some famous person (actor, author, scientist… you choose), writing
about that person, adding mage, biography etc. On the top of the webpage, add the image
and name of the person and below that give layout for the rest of the details. You can use
paragraphs, lists, links, images with CSS to give it a descent look. Add a suitable background
color and font style on your webpage. Most of the parts you can make using HTML but to
give it a better look using a bit of CSS. For example:
2. Create a simple page that will act as a survey. All fields should be required. The output
should look like this:

When you fill the form and you click submit reset the form and show an alert message that
“The survey was completed successfully”.
3. Make simple page that will act as simple calculator. Use simple HTML, CSS, and make all the
components work using basic JavaScript functions. To display buttons and numbers, use
HTML, and add some beautification to them using CSS. To make the buttons perform the
respective functions use JavaScript, which also will be used for displaying the result. Try and
design the calculator like the following:

Hint: Use HTML table. Use CSS properties like border, border-radius, background-color,
color, font-size, font-style, text-align, padding, margin. Use JavaScript for the clicks(inputs)
and calculating the result
4. Using HTML and CSS, create a simple page that will be a landing page. The resulting page
should look like this:
Note: Use your own images and colors.
Recommended web sites:

- HTML: https://www.w3schools.com/html/default.asp
- CSS: https://www.w3schools.com/css/default.asp
- JavaScript: https://www.w3schools.com/js/

Recommended playlists:

- HTML & CSS: https://www.youtube.com/playlist?list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-

- JavaScript: https://www.youtube.com/playlist?list=PL46F0A159EC02DF82