HTML + CSS + JavaScript self assessment

This is assignment should help you practice and self assess the concepts for vanilla HTML + CSS + JS

HTML. Create a webpage with a navbar, some main content with one main header and 4 subheaders and sections, and a footer. Also provide a list of the 10 most useful tags (e.g. div) for you in HTML
HTML. Research about SEO and provide a list of some of the most important header tags that you should add to your pages for SEO
HTML. In the page create a grid of 3x3 like layout without using table, or any css. Just use divs and spans
CSS. Create a gallery that showcases the options for box model using css. For each row change the values of border, margin and padding. For the columns try three different values (e.g. 0px 5px 10px)
CSS. Create an itemized list with the same text and 6 different font sizes, use inline styling. Choose a combination of absolute and relative sizes. Explain on each item when would you use that unit by means of an example
CSS. Add a creative part of the page that uses 4 different positioning options. Try to think and explain when would you use these options. Use that positioning to make sure that your footer stays on the bottom of the screen
I'll be adding more tasks coming soon

This is a non graded assignment. However, it can be used as a part of the participation grade. I'll probably will randomly call some of you to show your submission during class. You will have to peer-review a class mate submission. If you don't submit this grade or the peer review, you could get negative points in the participation grade

10 Most useful HTML Tags

<p> - Paragraph

The <p> tag is used to define paragraphs of text. It is one of the most fundamental tags for structuring content.

<a> - Anchor (Hyperlink)

The <a> tag creates hyperlinks. It's used to link to other web pages, resources, or locations within the same page.

<img> - Image

The <img> tag is used to embed images on web pages. It allows you to display graphics, icons, and photos.

<ul> and <li> - Unordered List and List Item

The <ul> and <li> tags are used to create unordered lists. <ul> defines the list, and <li> defines list items within it.

<ol> and <li> - Ordered List and List Item

Similar to unordered lists, the <ol> and <li> tags create ordered lists. <ol> defines the list, and <li> defines list items with numbers or other markers.

<h1> to <h6> - Headings

Headings are used to define the structure of a document. <h1> is the highest level (main heading), and <h6> is the lowest.

<div> - Division

The <div> tag is a generic container for grouping and styling content. It's commonly used with CSS for layout purposes.

<span> - Inline Container

The <span> tag is an inline container used to apply styles or script to a specific portion of text or content.

<input> - Input

The <input> tag is used to create input fields like text boxes, checkboxes, radio buttons, and more in forms.

<form> - Form

The <form> tag is used to create web forms for user input. It contains various input elements and can be submitted to a server.

HTML: Important Header Tags for SEO

What is SEO?

SEO, or Search Engine Optimization, is the practice of optimizing your website to improve its visibility in search engine results pages (SERPs). The primary goal of SEO is to increase organic (non-paid) traffic to your website by making it more relevant and authoritative to search engines like Google, Bing, and Yahoo.

Why is SEO Important?

SEO is important for several reasons:

Increased Visibility: Higher rankings in search results lead to more clicks and visitors.
Improved Credibility: Websites that rank well are often perceived as more trustworthy and authoritative.
Enhanced User Experience: SEO practices result in a better website user experience.
Competitive Advantage: SEO helps you stay competitive in your industry.

Important HTML Tags for SEO

HTML tags play a crucial role in SEO. Here are some important HTML tags:

<title> - Title Tag: Use to specify the title of the web page, which appears in search results.
<meta name="description" content="..."> - Meta Description Tag: Provides a brief description of the page content in search results.
<meta name="keywords" content="..."> - Meta Keywords Tag (less important today): Lists keywords related to the page content.
<h1> - Main Heading: Use for the primary topic of the page.
<h2> - Subheadings: Use for subsections directly related to the main topic.
<h3>, <h4>, <h5>, <h6> - Subsections: Use for further dividing content hierarchy.

HTML: Grid of 3x3 Layout

1 2 3

4 5 6

7 8 9

This code uses a nested div structure to create the grid. The outer div, grid, has a class of grid to style it. The inner divs, row, have a class of row to style them. The span elements, cell, are used to create the individual cells in the grid. The HTML code above will create a 3x3 grid of cells, with each cell containing the number 1 through 9. You can style the grid using CSS to change its appearance.

CSS

Gallery that showcases the options for the box model using css

border: 0px; margin: 10px; padding: 10px

border: 5px; margin: 10px; padding: 10px

border: 10px; margin: 10px; padding: 10px

border: 2px; margin: 0px; padding: 10px

border: 2px; margin: 5px; padding: 10px

border: 2px; margin: 10px; padding: 10px

border: 2px; margin: 10px; padding: 0px

border: 2px; margin: 10px; padding: 5px

border: 2px; margin: 10px; padding: 10px

Itemized list with the same text and 6 different font sizes

12px (Absolute) - Ideal for fine print or legal disclaimers.
16px (Absolute) - Suitable for regular text for consistency.
1em (Relative) - Scales with the parent element's font size.
1.2em (Relative) - Slightly larger than parent element's font size.
18px (Absolute) - Great for larger text like headings.
2rem (Relative) - Ensures consistent scaling across the entire page.

Creative Section with Positioning Options

Sticky Positioning

Use when you want an element to be initially positioned according to the normal flow, but then "stick" to the viewport when scrolling past a certain point.

Relative Positioning

Use when you want an element to be positioned relative to its normal position in the document flow.

Fixed Positioning

Use when you want an element to be positioned relative to the viewport, and it stays fixed even when scrolling.

Absolute Positioning

Use when you want an element to be positioned relative to its nearest positioned ancestor.