1.
Indicate whether each of these filenames is an acceptable name for a web document by circling “Yes” or
“No.” If it is not acceptable, provide the reason why.
a. [Link] Yes No
b. [Link] Yes No
c. cooking home [Link] Yes No
d. Song_Lyrics.htm Yes No
e. games/[Link] Yes No
f. %[Link] Yes No
2. To refer to an external CSS file within an HTML document, use:
a.<CSS ...> ... </CSS>
b. <SCRIPT ... >... </SCRIPT>
c. <LINK ... >... </LINK>
d. <STYLE ... >... </STYLE>
e. None of these
3. HTML is primarily concerned with _____ rather than style
a. Output Structure
b. Content
c. Presentation
d. None of these
4. In order to write HTML code we need to have active internet connection, Are you agree with this statement.
a. No
b. Yes
5. What is the use of iframe in HTML?
a. to display a web page within a web page.
b. to display a web page with animation effect.
c. to display a web page without browser.
d. All of the Above.
6. How to set a picture as a background web page?
a. <body background= “[Link]”>
b. <body background image= “[Link]”>
c. <background= “[Link]”>
d. <background image= “[Link]”>
7. How to insert a copyright symbol on a browser page?
8. Which HTML attribute is used to define inline styles?
9. The following HTML markup contains syntax errors. Identify and correct them:
<p>The foundation of web programming is <em>Hypertext Markup
Language <p> also known as <b>HTML</em></b>
<a href=”[Link]”>Click here for more information
10. Create an HTML page displaying three paragraphs.
Using internal CSS, apply the following styling to the page:
Make each paragraph have a visible border around it.
Give each paragraph a different background color and a different font color
11. Create a link back to the home page ([Link]) from [Link]
12. What do you think <OL TYPE="A" START="4"> will do to the list?
13. Write the HTML markup to embed an external style sheet located at styles/[Link] into a web page.
14. What is the main purpose of Flexbox in CSS?
a) To create 3D effects on web elements.
b) To create responsive and flexible page layouts.
c) To apply animations and transitions to web elements.
d) To style text and fonts on web pages.
15. In a Flexbox layout, what is the primary axis for alignment?
a) Vertical axis
b) Diagonal axis
c) Main axis
d) Secondary axis
16. Which Flexbox property is used to align flex items along the main axis?
a) align-items
b) justify-content
c) align-content
d) align-self
17. What is the default value of the flex-direction property in Flexbox?
a) row
b) column
c) column-reverse
d) row-reverse
18. How can you make a flex item take up twice as much space as another item in a Flexbox container?
a) Set flex: 2; on the larger item.
b) Apply flex-grow: 2; to the larger item.
c) Use flex-shrink: 2; on the larger item.
d) Apply flex-basis: 2; to the larger item.
19. What is the primary purpose of the CSS `float` property in web design?
a) To create drop-down menus.
b) To control the transparency of elements.
c) To move an element to the left or right within its containing element.
d) To apply text formatting styles.
20. When you apply `float: left;` to an element, how does it affect the element's position?
a) The element floats to the left and aligns with the left edge of the containing element.
b) The element aligns to the center of the containing element.
c) The element moves to the right side of the containing element.
d) The element disappears from the layout.
21. In a two-column layout, what issue does the CSS `float` property often introduce, and how is it typically
resolved?
a) Elements become invisible; resolve with `visibility: visible;`.
b) Elements lose their background colors; resolve with `background-color`.
c) Elements don't expand the container's height; resolve with a clearfix.
d) Elements overlap with each other; resolve with `z-index`.
22. How can you create a three-column layout with two floated columns on the left and one non-floated
column on the right?
a) Float the first two columns to the left and set the last column's width to 100%.
b) Apply `float: left;` to the first two columns, and use `float: right;` for the last column.
c) Float the first two columns to the left and give the last column a `clear: both;` property.
d) Float the first column to the left, and use `margin-left` to adjust the positioning of the last column.
23. When designing a responsive layout using CSS float, what might you need to consider to ensure the design
adapts well to different screen sizes?
a) Implementing media queries to change the float properties at specific breakpoints.
b) Setting a fixed width for all elements to ensure consistency.
c) Avoiding the use of floats altogether in responsive designs.
d) Using JavaScript to adjust the layout dynamically.
24. 6. Which of the following is a common use case for CSS float layouts?
a) Creating complex grid layouts with equal column widths.
b) Achieving pixel-perfect, fixed-width designs.
c) Building layouts with automatic content alignment.
d) Implementing animations and transitions.
25. In a float-based layout, what does the CSS `clear` property do?
a) It makes an element's text clear and easy to read.
b) It clears any preceding floats, ensuring that an element doesn't wrap around them.
c) It makes an element's background color transparent.
d) It clears the browser's cache.
26. The following are basic terms used in Web Programming. Match the term with its correct meaning in the
right side.
1. HTML ______ a) The markup language used to describe web content
2. W3C ______ b) The location of a web document or resource
3. CSS ______ c) Matches domain names with numeric IP addresses
4. HTTP _____ d) A protocol for file transfer
5. IP _____ e) Protocol for transferring web documents on the Internet
6. URL ______ f) The language used to instruct how web content looks
7. DNS ______ g) Internet Protocol
8. FTP _____ h) The organization that monitors web technologies
27. What is the difference between frontend and backend web development?
28. Explain how the CSS box model works. Draw a box and then explain what the border is, what the margin
is, what the padding is, etc.? If you assign a width: or height: to something, what specifically does that refer
to?
29. What is the correct HTML for referring to an external style sheet named “[Link]” located in the same
folder as the html file?
30. How do you add a background color for all <h1> elements using CSS?
31. Which CSS property is used to change the text color of an element?
32. Explain three ways of inserting a style sheet
33. Write a CSS style specification rule that would make all unordered lists (<ul> tags) have square bullets and a purple
background.
34. Write three style rules for the following HTML snippet, as described below.
<p class=”city” id=”Kigali”>
Rwanda, officially the Republic of Rwanda, is a landlocked country in the Great Rift Valley of Central Africa, where the
African Great Lakes region and Southeast Africa converge. Located a few degrees south of the Equator, Rwanda is
bordered by Uganda, Tanzania, Burundi, and the Democratic Republic of the Congo</p>
A. Write a rule that would make this and all other paragraphs appear in 12-point font.
B. Write a rule that would make this and other paragraphs in the same class as this example appear in italic type.
C. Write a rule that would make this particular paragraph only appear in bold type.
35. Which of these tags would display the largest text? Answer choices
A. <p> B. <h6> C. <h2> D. <h4>
36. What is the purpose of <!DOCTYPE html>? answer choice /6marks
A. Provides the web browser with security C. Allows programmers to link to files in-line
information
D. Tells the web browser what language to
B. Instructs the browser where to look for expect
your CSS files
37. What is the difference between HTML and CSS?
A. CSS is one type of HTML C. CSS structures a webpage. HTML strictly
provides styling.
B. HTML gives a webpage structure. CSS
provides styling. D. There is no difference.
38. Where in your HTML document should you include the code <!DOCTYPE html>?
A. Body section C. Last line
B. Doesn't matter D. First line
39. What is the function of a title tag? Answer choices
A. stores webpage title for browser and C. shows meta information about the title
search engine results
D. shows server how to title the website
B. show server how to index the website
40. How can you make a numbered list? Answer choices
A. <list> B. <ol> C. <dl> D. <ul>
41. 9. How can you make a bulleted list? answer choices /4marks
A. <ol> B. <ul> C. <list> D. <dl>
42. You should save HTML files with which file extension? Answer choices /4marks
A. .htm B. .index C. .webpa D. .html
ge
43. What does CSS stand for? Answer choices /4marks
A. Creative Style Sheets C. Colorful Style Spread
B. Cascading Style Sheets D. Computer Style Spread
44. Within which tag does the information for a web page appear? Answer choices
A. <head> B. <title> C. <body> D. <html>
45. Which shows the correct structure for a basic Web page? Answer choices
46. What is used to signify a closing tag? Answer choices
A. : B. / C. * D. $
47. Which tag makes bold text? Answer choices
A. <bold> B. <strong> C. <bigtext> D. <big>
48. Define the following terms:
A. Website
B. Domain Name
C. Website layout
49. A. The keys on your keyboard can be divided into several groups based on function. What are the parts of
keyboard and its function
B. In the world of today, ICT is more powerful in many businesses to advertise, marketing and online selling
product and services, to design website, you need some tools. Write in full word:
A. W.W.W B. DNS C. HTTP
50. A. To access websites you need a application software called browser and internet. Write down at least five (5)
browsers you know?
B. Business / commercial enterprises make good use of the Web to promote their business. They publish their
products /services to millions of potential customers globally and at no extra cost for the additional target
audience that emerge from time to time. It is done 24 hours a day, seven days a week in various languages as
they choose. Differentiate Static and from Dynamic Web Sites
51. A. Software used to write code in web design is called web editor. Give five web editors
B. Explain the following css code:
A. Border-radius of 50% B. <a href=””></a>
C. Text-decoration E. Float
D. Line-height
52. A. By locating, explain three types of CSS
B. Give four (4) examples of web content.
C. Give four (4) most important pages that your website should have.
Question 1: Mark and John are trying to compare their BMI (Body Mass Index), which is calculated
using the formula:
BMI = mass / height ** 2 = mass / (height * height) (mass in kg and height in meter).
Your tasks:
1. Store Mark's and John's mass and height in variables
2. Calculate both their BMIs using the formula (you can even implement both versions)
3. Create a Boolean variable 'markHigherBMI' containing information about whether Mark has a
higher BMI than John.
Test data:
Data 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95m tall.
Data 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76m tall.
Question 2: Use the BMI example from Question #1, and the code you already wrote, and improve it.
Your tasks:
1. Print a nice output to the console, saying who has the higher BMI. The message is either "Mark's
BMI is higher than John's!" or "John's BMI is higher than Mark's!"
2. Use a template literal to include the BMI values in the outputs. Example: "Mark's BMI (28.3) is
higher than John's (23.9)!"
Hint: Use an if/else statement
There are two gymnastics teams, Dolphins and Koalas. They compete against each other 3 times. The
winner with the highest average score wins a trophy!
Your tasks:
1. Calculate the average score for each team, using the test data below
2. Compare the team's average scores to determine the winner of the competition, and print it to the
console. Don't forget that there can be a draw, so test for that as well (draw means they have the
same average score)
3. Bonus 1: Include a requirement for a minimum score of 100. With this rule, a team only wins if it
has a higher score than the other team, and the same time a score of at least 100 points. Hint: Use
a logical operator to test for minimum score, as well as multiple else-if blocks �
4. Bonus 2: Minimum score also applies to a draw! So a draw only happens when both teams have
the same score and both have a score greater or equal 100 points. Otherwise, no team wins the
trophy
Test data:
Data 1: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110
Data Bonus 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123
Data Bonus 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106
Question 3: Steven wants to build a very simple tip calculator for whenever he goes eating in a
restaurant. In his country, it's usual to tip 15% if the bill value is between 50 and 300. If the value is
different, the tip is 20%.
Your tasks:
1. Calculate the tip, depending on the bill value. Create a variable called 'tip' for this. It's not allowed
to use an if/else statement � (If it's easier for you, you can start with an if/else statement, and
then try to convert it to a ternary operator!)
2. Print a string to the console containing the bill value, the tip, and the final value (bill + tip).
Example: “The bill was 275, the tip was 41.25, and the total value 316.25”
Test data:
Data 1: Test for bill values 275, 40 and 430
Hints:
To calculate 20% of a value, simply multiply it by 20/100 = 0.2
Value X is between 50 and 300, if it's >= 50 && <= 300
Question 4: Back to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics
discipline, which works differently.
Each team competes 3 times, and then the average of the 3 scores is calculated (so one average score per
team).
A team only wins if it has at least double the average score of the other team. Otherwise, no team wins!
Your tasks:
1. Create an arrow function 'calcAverage' to calculate the average of 3 scores
2. Use the function to calculate the average for both teams
3. Create a function 'checkWinner' that takes the average score of each team as parameters
('avgDolhins' and 'avgKoalas'), and then logs the winner to the console, together with the victory
points, according to the rule above.
Example: "Koalas win (30 vs. 13)"
4. Use the 'checkWinner' function to determine the winner for both Data 1 and
Data 2
5. Ignore draws this time
Test data:
Data 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49
Data 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27
Hints:
To calculate average of 3 values, add them all together and divide by 3
To check if number A is at least double number B, check for A >= 2 * B.
Apply this to the team's average scores
Question 5: Steven is still building his tip calculator, using the same rules as before: Tip 15% of the bill
if the bill value is between 50 and 300, and if the value is different, the tip is 20%.
Your tasks:
1. Write a function 'calcTip' that takes any bill value as an input and returns the corresponding tip,
calculated based on the rules above (you can check out the code from first tip calculator challenge
if you need to). Use the function type you like the most. Test the function using a bill value of
100
2. And now let's use arrays! So create an array 'bills' containing the test data below
3. Create an array 'tips' containing the tip value for each bill, calculated from the function you
created before
4. Bonus: Create an array 'total' containing the total values, so the bill + tip
Test data: 125, 555 and 44
Hint: Remember that an array needs a value in each position, and that value can actually be the returned
value of a function! So you can just call a function as array values (so don't store the tip values in separate
variables first, but right in the new array)
Question 6: Let's go back to Mark and John comparing their BMIs! This time, let's use objects to
implement the calculations! Remember: BMI = mass / height ** 2 = mass/ (height * height) (mass in kg
and height in meter)
Your tasks:
1. For each of them, create an object with properties for their full name, mass, and height (Mark
Miller and John Smith)
2. Create a 'calcBMI' method on each object to calculate the BMI (the same method on both
objects). Store the BMI value to a property, and also return it from the method
3. Log to the console who has the higher BMI, together with the full name and the respective BMI.
Example: "John's BMI (28.3) is higher than Mark's (23.9)!"
Test data: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.
Question 7: Let's improve Steven's tip calculator even more, this time using loops!
Your tasks:
1. Create an array 'bills' containing all 10 test bill values
2. Create empty arrays for the tips and the totals ('tips' and 'totals')
3. Use the 'calcTip' function we wrote before (no need to repeat) to calculate tips and total values
(bill + tip) for every bill value in the bills array. Use a for loop to perform the 10 calculations!
Test data: 22, 295, 176, 440, 37, 105, 10, 1100, 86 and 52
Hints: Call „calcTip „in the loop and use the push method to add values to the tips and totals arrays