HTML, CSS, JavaScript task

This document contains a set of tasks for self-implementation. The tasks are about the
basics of CSS.
Quiz and project tasks
The tasks were divided into two groups. First, take a simple quiz to help you sort through
your choices. Think of it as a form of warm-up before carrying out the right tasks. After
completing the quiz, go to the practical tasks and complete them according to the
instructions.
Good luck!
CSS basics quiz
Take the quiz below by selecting the correct answer or multiple answers. The solutions are
on the last page of the quiz.
1. Select the appropriate CSS_selector definition from the following definitions:
a) CSS selector is a kind of tag inside which we put the definition of CSS rules
b) The CSS selector is a match that allows you to select HTML elements for which the
style rules are to be applied
c) The CSS selector is a single rule to apply, e.g. it sets the background of an HTML
element to black
2. From the following CSS selectors, select the correct one:
a) all.p
b) div,span
c) div.control input
d) #d
e) div-p.title
f) *
g) input[type="text"]
3. Select the correct CSS rules from the following:
a) color: #ffffff;
b) text-color: red;
c) background-color=black;
d) margin: 5px, 10px, 20px, 30px;
e) padding-top: -5px;
f) padding: 0
g) list-style-type: none;

1
Congratulations! You have finished our short quiz. Make sure you answered all the
questions correctly and proceed to the practical tasks
Solutions
Exercise 1: Answer _b) _
Exercise 2: div,span, div.control input, #d, *, input[type="text"]
Exercise 3: color: #ffffff;, padding: 0, list-style-type: none;
Practical tasks
As part of the practical tasks, you will have to obtain the presented effect in the form of an
HTML page view. If you need help, please use the links below:
• Tutorial from Mozilla Developer portal (https://developer.mozilla.org/en-US/docs/
Learn/CSS)
• A few useful How To (https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto)
• CSS course and documentation from w3school.com (https://www.w3schools.com/css/
default.asp)
• Very rich list of How To (https://www.w3schools.com/css/css_examples.asp)
Learning CSS - instructional task
First, see some interesting examples of using CSS styles:
CSS Garden clean, without CSS (Žiadny prelink, našla som len toto https://
csszengarden.com/)
Selected examples of CSS Garden styling:
Example 1 (https://csszengarden.com/101/)
Example 2 (https://csszengarden.com/099/)
Example 3 (https://csszengarden.com/221/)
Example 4 (https://csszengarden.com/220/)
Example 5 (https://csszengarden.com/219/)
Example 6 (https://csszengarden.com/218/)
Using styles to obtain presentation effect (Žiadny prelink) and email client (https://
www.w3schools.com/w3css/tryw3css_examples_mail.htm)
Basics of working with styles - an instructional task
Include an external CSS style, embedded CSS style, and any element styling in the form
of a style attribute in the HTML Basics HTML. Lists How-To Part. Get the effect as seen
without changing the page content itself.

2
Solution

Basics of working with styles - independent task

Include an external CSS style, embedded CSS style, and any element styling as
a style attribute in the HTML document "HTML Basics. Lists - Standalone". Get the effect
as seen without changing the page content itself.

Attractive forms - an independent task

The aim of the task is to add styles to the HTML document below in such a way as to
obtain the presented effect:

3
Page layout 1 - independent task
The aim of the task will be to prepare the following page layout. You will complete Exercise
in the steps described below.

You can use the following HTML code for your page and add styling for selected elements
only:

4
Step 1. Header

If we use a div element for the header, it should naturally occupy the entire length of the
page. So we need to define:
• header background / color,
• alignment of elements to the center,
• setting the font for the title and possibly the subtitle,
• offset elements from the edge.
Note: it is also a good idea to start with box-sizing and specify the size of the base
font: root: {font-size: 12px; }.
Step 2. Navigation menu

In the case of the navigation menu, we need to define styles for the entire menu, but also
for its elements.
For the whole, we need:
• background color.
For the menu items we need:
• content centering,
• display successive menu items on one line, from left to right, but as a box-model to
control their size,
• proper formatting of links so that they are more like buttons, not links.

5
Also, differentiate the links so that when you hover over them with the mouse, they
change, for example, the background and text colors. Use the state selector for this
purpose: a:hover { ... }.
Step 3. Main content

Contrary to appearances, it is very easy to use the column layout. We just need to:
• treat the columns as blocks that are arranged on the left side,
• define their width, with the side columns each taking 20% and the main column 60%,
• use the clear fix option if we want to have several lines on the page or we want to
have a footer underneath.
Step 4. Footer

For the footer, we can use the default formatting of div elements and specify only:
• background/background color,
• center alignment of the text,
• offset the content from the edge.
This way the footer will be formatted the same as the header.
Creating a page layout 2 - independent task
The aim of the task is to prepare the page layout in accordance with the view below. You
carry out the entire task yourself.

You can use the HTML code below and add styling to the appropriate elements only:

6
Congratulations!
You have completed all tasks related to working with the basics of CSS.
You can validate your solutions with the standalone solutions provided. You will find them
on the following pages.
Solutions for individual work
Basics of working with styles - individual task

7
Attractive forms - an individual task

8
Page layout 1 - individual task

9
Page layout 2 - individual task

10
11
HTML
This document contains a set of tasks for self-implementation. The tasks cover the basics
of HTML.
Quiz and design tasks
The tasks were divided into two groups. First, take a simple quiz to help you sort through
your choices. Think of it as a form of warm-up before carrying out the right tasks. After
completing the quiz, go to the practical tasks and complete them according to the
instructions.
Good luck!
Basics HTML quiz
Take the quiz below by selecting the correct answer or multiple answers. The solutions are
on the last page of the quiz.
1. Select the correct structure of the HTML document:
a)
<html></html>
<head></head>
<body></body>
b)
<html>
<body>
<head></head>
</body>
</html>
c)
<html>
<head></head>
<body></body>
</html>
2. From the elements, select the ones that affect the formatting of the document (we
assume no use of CSS):
a) <body>
b) <p>
c) <strong>
d) <div>

12
 e) table
f) span
g) article
h) section
i) script
j) ol
3. From the elements, select those related to the so-called document semantics and
define the nature of the data, not the document formatting:
a) author
b) article
c) a
d) form
e) img
f) p
g) pre
4. Select block elements from the following:
a) tr
b) td
c) li
d) div
e) head
f) span
Congratulations! You have finished our short quiz. Make sure you answered all the
questions correctly and proceed to the practical tasks
Solutions
Exercise 1: Answer c)
Exercise 2: <p>, <strong>, <table>, <ol>
Exercise 3: <author>, <article>, <img>
Exercise 4: <tr>, <li>, div
Practical tasks
Each task consists of two parts.
The first part contains the presented problem and its solution. Your task is to understand
the problem and analyze the applied solution.

13
In the second part you solve a similar problem but completely independently. There is also
a solution to this part that will be made available to you but we strongly encourage you to
try to solve it yourself at all costs.
Lists - instructional part
The aim of the task is to realize the following view in HTML code:

Solution

Lists - indepentent part

The goal of the task is to implement the following view in the HTML code:

Remember that HTML elements can be nested within each other, i.e. one list can be an
element of another list.
Text formatting - instructional task
The goal of the task is to implement the following view in the HTML code:

14
Solution

Text formatting - independent task

The goal of the task is to implement the following view in the HTML code:

Note that the view also includes links to other pages. Links should open in new windows.
Tables - instructional task
The goal of the task is to implement the following view in the HTML code:

15
Solutions

Tables - independent task

The goal of the task is to implement the following view in HTML:

Note that in the table there is not only a header row with columns with <th>, but also
columns with days of the week in the following rows as well.
Forms 1 - instructional task
The goal of the task is to implement the following view in HTML:
16
Solution

Additional exercise
How does the website address change in the browser after sending the form?
Try to remove the name parameter from any control and submit the form. Do values from
such a control appear in the page address in the browser after sending the form?
Forms 1 - independent task
The goal of the task is to implement the following view in HTML:

17
Make sure that the controls on the forms are of the appropriate type, ie if you enter a date
of birth, the text field should be of the date type, not text.
Also complete the same secondary tasks as in the instructional task.
Forms 2 - instructional task
The goal of the task is to implement the following view in HTML:

Solution

18
Additional exercise
This time the form is sent using the POST method - do the values entered in the form
appear in the browser bar?
Additional exercise
Using the tools available in the browser (usually F12 or F10 enables them, it is about _
development tools_) view the content of the sent request and identify how the entered
values are sent.
Formuls 2 - individual task
The aim of the task is to realize the following view in HTML:

19
Exercise can be realized in many ways, such as one large form for all controls or as a
single form for each set of controls. The second option may be a better solution.
Remember that forms are not only visual, but are used to communicate with the server.
The form and its elements must be prepared in such a way that the server receives
precise information about what the user did: e.g. that he gave +1 a specific statement, not
just any one.
Also complete the same secondary tasks as in the instructional task.
Solutions for individual tasks
Lists - individual task

Content formatting - individual task

20
Tables - individual task

21
Forms 1 - individual work

22
Forms 2 - individual work

23
JavaScript
This document contains a set of tasks for individual work. The tasks are about the basics
of JavaScript.
Quiz and project tasks
The tasks were divided into two groups. First, take a simple quiz that will help you organize
your choices. Think of it as a warm-up before carrying out the right tasks. After completing
the quiz, go to the practical tasks and complete them according to the instructions.
Good luck!
JavaScript basics quiz
Take the quiz below by selecting the correct answer or multiple answers. The solutions are
on the last page of the quiz.
1. Select from the following items only valid items which contain JavaScript code:
a) `<style>`
b) `<javascript>`
c) `<script>`
d) `<js>`
2. From the following options, select those that correctly display the message in the
notification window:
a) `console.log("Message")`
b) `alert.log("Message")`
c) `alert("Message")`
d) `alert="Message"`
e) `console.alert("Message")`
3. Select the correct function definition in JavaScript among the following options:
a) new myFunction() {...}
b) funtion:myFunction() {...}

24
 c) function myFunction() {...}
d) public void myFunction() {...}
4. From the following code fragments, select the one that correctly creates the JavaScript
array:
a) `var countries = ["poland","germany","russia"]`
b) `countries:{"poland", "germany", "russia"}`
c) `var countries = "poland", "germany", "russia"`
5. From the following events, select those that are valid JavaScript events:
a) onchange
b) onsubmit
c) onclick
d) onfocus
e) onmouseclick
f) onmouseover
6. From the following commands, select those that correctly look for the <div
id="main"> element in your HTML document:
a) document.getElementById("main")
b) html.getElementByName("main");
c) document.getElementByName("main")
d) document.getElementsByTag("div")[0]
e) document.getById("main")
Congratulations! You have finished our short quiz. Make sure you answered all the
questions correctly and proceed to the practical tasks.
Solutions
Exercise 1: <script>
Exercise 2: alert (" Message ")
Exercise 3: function myFunction () {...}
Exercise 4: var countries = ["poland","germany","russia"]
Exercise 5: onchange, onsubmit, onclick, onfocus, onmouseover
Exercise 6: document.getElementById ("main"), document.getElementByName ("main")
Practical tasks
As part of the practical tasks, you will first be get familiar with an auxiliary code fragment.
Based on this fragment and your knowledge, you must follow the instructions indicated in
the tasks.

25
JavaScript basics
Below is a JavaScript snippet showing how to use the basic language elements:

Note: You can put the JavaScript fragment on any page in the <script> tag to test its
functionality;
Based on the fragment presented, create:
• 2 numeric variables on which you will perform basic mathematical operations and
display the results of these operations on the console, each on a separate line,
• you will use the if else conditional statement to display information on the console
about the number that is bigger and the one that is smaller,
• you will use a for loop to calculate the sum of all numbers from lower to higher
(inclusive) and display the obtained sum on the console,

26
 • you will write the function showSum, which will take two numbers and based on the
previous algorithm will display the obtained sum in a dialog window (alert),
• you will call the function showSum on a set of 3 different pairs of values.
Search for elements on the page
Below is a fragment of an HTML page:

This fragment contains JavaScript code that displays the text of the item with the
id example in the header of the page. Your tasks are to:
• attach the show function to the id show button so that the header text changes when
pressed,
You can do this by using the onclick attribute of the button element, or from within
JavaScript code by finding the element and using the function addEventListener ('click',
show);
• modify the show function so that it takes a parameter with the name of the identifier
and displays the text of the element with that identifier in the header, not rigidly with
the id example,

27
You will now need to modify the earlier use of the function so that it defaults to example.
• create a new function and combine it with pressing the show-input button - the new
function should load the id value entered in the field with id id-input and use this value
to call the show function.
Ultimately, after completing all the commands, different text should appear in the header of
the page, depending on the identifier value entered in the text field.
Forms validation
Below you can find an HTML page:

28
The script has implemented validation of the field with the id username, which checks if the
given username meets the requirements:
• it is at least 3 characters long,
• it consists of only lowercase letters in the range a-z and symbols-_..
If the validation is not fulfilled, a message should appear next to the control.
Based on this example, validate and display it for the following fields:
• the password must be at least 3 characters long and no more than 12,
• the password must contain at least 1 character from the set !@#$%
The following regex can be used here: ". * [! @ # $%]. *"
• email must be provided and must be a valid email
Find a suitable regex online or try to compose it yourself
• age must be a positive number not greater than 122,
• the date of starting work with the system must be a date not earlier than today and no
later than 7 days from today,
29
We can create a Date value like this: let now = new Date ();.
A value of the Date type can also be obtained from text like this: let activationDate = new
Date (" text ");.
The value of the Date type can be compared based on their representation in the form of
the number of milliseconds: if (now.getTime ()> activationDate.getTime ()) {...}.
If the validation is fully satisfied (all fields are correct), a success message appears (in the
field with id form-result), and if it is not met at at least one of the fields, a message about
errors appears in the form .
Prepare individual validation functions for the appropriate fields, like
the validateUsername function and include their use in the same way as
the validateUsername function is used.
External requests - additional task
Below is an HTML page fragment that makes a request to a given address and updates
the content of the text field with the id preview:

30
Based on the used request code, design a form that will take a CSS selector and using the
value of this selector, you will display the content of the found element on the page. You
can test with popular news portals and displaying news headlines.
Note: you may encounter an error: "has been blocked by CORS policy: Response to
preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
header is present on the requested resource . This means that the site does not handle
the request from JavaScript, then you have to choose a different address or test your own
pages, eg pages from previous tasks.

Congratulations!
You have completed all the tasks related to working with the basics of JavaScript.
You can verify your solutions with the work alone solutions provided. You will find them on
the following pages.
Solutions for work alone
JavaScript basics

31
Search for elements on the page

Form validation

32
33
34
External requests

35