Learning objectives
- Create a fully functional website using HTML and CSS
- Understand and apply fundamental web design principles
- Add interactive elements with basic JavaScript
- Publish your website to a live server
- Ensure mobile responsiveness and accessibility
Outcomes
- Create a professional-looking website tailored to your goals
- Publish your site online and share it with the world
- Customize designs using HTML and CSS effectively
- Implement basic interactivity and ensure mobile compatibility
Course outline
Module 1
Module 1: Topic 1
Topic 1
Knowledge check
Q1. What does HTML stand for?
- A. Hypertext Markup Language ✓
- B. High Tech Modern Language
- C. Home Tool Markup Language
- D. Hyperlink and Text Markup Language
Why: HTML stands for Hypertext Markup Language, which is the standard markup language used to create web pages.
Q2. Which HTML tag is used to create the largest heading?
- A. <h6>
- B. <h3>
- C. <h1> ✓
- D. <header>
Why: The <h1> tag creates the largest heading in HTML, with headings decreasing in size from h1 to h6.
Q3. What is the correct HTML tag for creating a paragraph?
- A. <paragraph>
- B. <p> ✓
- C. <par>
- D. <pg>
Why: The <p> tag is the correct HTML element used to define and create paragraphs of text.
Q4. Which file extension is typically used for HTML files?
- A. .txt
- B. .doc
- C. .html ✓
- D. .web
Why: HTML files typically use the .html extension (or sometimes .htm) to indicate they contain HTML markup code.
Q5. What is the purpose of the <title> tag in HTML?
- A. To create a heading on the webpage
- B. To set the title that appears in the browser tab ✓
- C. To make text bold
- D. To create a navigation menu
Why: The <title> tag defines the title of the HTML document that appears in the browser's title bar or tab, not on the actual webpage content.
Module 2
Module 2: Topic 2
Topic 2
Knowledge check
Q1. What does CSS stand for?
- A. Computer Style Sheets
- B. Cascading Style Sheets ✓
- C. Creative Style Sheets
- D. Colorful Style Sheets
Why: CSS stands for Cascading Style Sheets, which is used to style and format HTML elements on web pages.
Q2. Which CSS property is used to change the text color of an element?
- A. background-color
- B. font-size
- C. color ✓
- D. text-align
Why: The 'color' property in CSS is specifically used to change the text color of HTML elements.
Q3. How do you apply CSS styles to an HTML document?
- A. Only inline styles
- B. Only external stylesheets
- C. Inline, internal, or external ✓
- D. Only internal styles
Why: CSS can be applied in three ways: inline styles using the style attribute, internal styles using <style> tags, or external stylesheets using <link> tags.
Q4. Which CSS property is used to change the background color of an element?
- A. color
- B. background-color ✓
- C. bg-color
- D. background
Why: The 'background-color' property is specifically used to set the background color of HTML elements.
Q5. What is the correct CSS syntax to make all paragraph text bold?
- A. p {text-weight: bold;}
- B. p {font-weight: bold;} ✓
- C. p {font-style: bold;}
- D. p {text-style: bold;}
Why: The correct CSS property to make text bold is 'font-weight: bold;' applied to the paragraph selector 'p'.
Module 3
Module 3: Topic 3
Topic 3
Knowledge check
Q1. What is the correct HTML syntax to create a hyperlink?
- A. <link href="page.html">Click here</link>
- B. <a href="page.html">Click here</a> ✓
- C. <hyperlink src="page.html">Click here</hyperlink>
- D. <url link="page.html">Click here</url>
Why: The <a> tag with the href attribute is the standard HTML element for creating hyperlinks
Q2. Which attribute is used to specify the destination URL in an HTML link?
- A. src
- B. href ✓
- C. link
- D. url
Why: The href (hypertext reference) attribute specifies the URL or path that the link points to
Q3. How do you create a link that opens in a new tab or window?
- A. <a href="page.html" new="tab">Link</a>
- B. <a href="page.html" target="_blank">Link</a> ✓
- C. <a href="page.html" open="new">Link</a>
- D. <a href="page.html" window="new">Link</a>
Why: The target="_blank" attribute tells the browser to open the link in a new tab or window
Q4. What is the correct way to link to an email address?
- A. <a href="email:user@example.com">Send Email</a>
- B. <a href="mailto:user@example.com">Send Email</a> ✓
- C. <a href="mail:user@example.com">Send Email</a>
- D. <a href="@user@example.com">Send Email</a>
Why: The mailto: protocol is used to create links that open the user's default email client with the specified email address
Q5. How do you create a link to another section on the same page?
- A. <a href="section1">Go to Section 1</a>
- B. <a href="#section1">Go to Section 1</a> ✓
- C. <a href="/section1">Go to Section 1</a>
- D. <a href=".section1">Go to Section 1</a>
Why: The # symbol followed by an element's id creates an anchor link that jumps to that section on the same page
Module 4
Module 4: Topic 4
Topic 4
Knowledge check
Q1. What is the primary purpose of CSS in web development?
- A. To add interactivity to web pages
- B. To style and format HTML elements ✓
- C. To store data in databases
- D. To create server-side functionality
Why: CSS (Cascading Style Sheets) is specifically designed to control the visual presentation and formatting of HTML elements, including colors, fonts, layouts, and spacing.
Q2. Which CSS property is used to change the text color of an element?
- A. background-color
- B. font-size
- C. color ✓
- D. text-decoration
Why: The 'color' property in CSS is specifically used to set the foreground color of text content within an element.
Q3. What does the CSS property 'margin' control?
- A. The space inside an element's border
- B. The space outside an element's border ✓
- C. The thickness of an element's border
- D. The background color of an element
Why: Margin controls the space outside an element's border, creating distance between the element and other elements around it.
Q4. Which CSS selector targets elements by their class attribute?
- A. #classname
- B. .classname ✓
- C. classname
- D. *classname
Why: The dot (.) prefix is used in CSS to select elements by their class attribute. For example, '.header' selects all elements with class='header'.
Q5. What is the correct way to link an external CSS file to an HTML document?
- A. <css src='styles.css'>
- B. <style href='styles.css'>
- C. <link rel='stylesheet' href='styles.css'> ✓
- D. <import css='styles.css'>
Why: The <link> element with rel='stylesheet' and href attributes is the standard way to link external CSS files to HTML documents, and it should be placed in the <head> section.
Module 5
Module 5: Topic 5
Topic 5
Knowledge check
Q1. What is the primary purpose of CSS in web development?
- A. To add interactivity to web pages
- B. To style and format HTML elements ✓
- C. To store data in databases
- D. To create server-side functionality
Why: CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements, including colors, fonts, layouts, and spacing.
Q2. Which CSS property is used to change the text color of an element?
- A. background-color
- B. font-size
- C. color ✓
- D. text-decoration
Why: The 'color' property in CSS is specifically used to set the foreground color of text content within an element.
Q3. What does the CSS property 'margin' control?
- A. The space inside an element's border
- B. The space outside an element's border ✓
- C. The thickness of an element's border
- D. The background color of an element
Why: Margin creates space outside an element's border, pushing other elements away. Padding creates space inside the border.
Q4. Which CSS selector targets an element with a specific ID?
- A. .classname
- B. #idname ✓
- C. elementname
- D. *
Why: The hash symbol (#) followed by the ID name is used to select elements with a specific ID attribute in CSS.
Q5. What is the correct CSS syntax to make text bold?
- A. font-weight: bold; ✓
- B. text-style: bold;
- C. font-style: bold;
- D. text-weight: bold;
Why: The font-weight property with the value 'bold' is the correct CSS syntax to make text appear bold.
Module 6
Module 6: Topic 6
Topic 6
Knowledge check
Q1. What does CSS stand for?
- A. Computer Style Sheets
- B. Cascading Style Sheets ✓
- C. Creative Style Sheets
- D. Colorful Style Sheets
Why: CSS stands for Cascading Style Sheets, which is used to describe the presentation of a document written in HTML or XML.
Q2. Which HTML tag is used to link an external CSS file?
- A. <style>
- B. <css>
- C. <link> ✓
- D. <stylesheet>
Why: The <link> tag is used to link external resources like CSS files to an HTML document, typically placed in the <head> section.
Q3. What is the correct CSS syntax to change the text color to blue?
- A. color: blue; ✓
- B. text-color: blue;
- C. font-color: blue;
- D. blue: color;
Why: The correct CSS property to change text color is 'color' followed by a colon and the color value, then a semicolon.
Q4. Which CSS property is used to change the background color of an element?
- A. bgcolor
- B. background-color ✓
- C. color-background
- D. back-color
Why: The 'background-color' property is used to set the background color of an HTML element in CSS.
Q5. How do you select an element with id 'header' in CSS?
- A. .header
- B. *header
- C. #header ✓
- D. header
Why: In CSS, the hash symbol (#) is used to select elements by their ID attribute, so #header selects the element with id='header'.
Module 7
Module 7: Topic 7
Topic 7
Knowledge check
Q1. What is the primary purpose of website testing?
- A. To make the website look more attractive
- B. To ensure the website functions correctly and provides a good user experience ✓
- C. To increase the website's loading speed only
- D. To add more content to the website
Why: Website testing is essential to identify and fix bugs, ensure cross-browser compatibility, and verify that all features work as intended for users.
Q2. Which type of testing involves checking how your website appears on different web browsers?
- A. Performance testing
- B. Cross-browser testing ✓
- C. Security testing
- D. Content testing
Why: Cross-browser testing ensures your website displays and functions correctly across different browsers like Chrome, Firefox, Safari, and Edge.
Q3. What should you test when checking your website's responsiveness?
- A. Only desktop screen sizes
- B. Only mobile phone screens
- C. Different screen sizes and devices including desktop, tablet, and mobile ✓
- D. Only the homepage layout
Why: Responsive testing requires checking how your website adapts to various screen sizes and devices to ensure optimal user experience across all platforms.
Q4. Which tool can help you test your website's loading speed?
- A. Google PageSpeed Insights ✓
- B. Microsoft Word
- C. Adobe Photoshop
- D. Windows Media Player
Why: Google PageSpeed Insights is a free tool that analyzes your website's performance and provides suggestions for improving loading speed and user experience.
Q5. What is the most important aspect to check during link testing?
- A. The color of the links
- B. Whether all internal and external links work correctly ✓
- C. The font size of the link text
- D. The number of links on each page
Why: Link testing ensures that all links function properly, directing users to the correct pages without encountering broken links or 404 errors, which improves user experience and SEO.