hello.html

80 concepts and syntax elements introduced in the hello.html file in this repo.

HTML Document Type Declaration
Indicates the HTML version being used.
```
<!DOCTYPE html>
```
This declares the document as HTML5.
HTML Root Element
Contains all HTML elements.
```
<html>
```
All other HTML elements go inside the <html> tag.
Language Attribute
Specifies the language of the document.
```
<html lang="en">
```
Sets the language to English.
HTML Head Element
Contains metadata and links to styles/scripts.
```
<head>...</head>
```
Holds meta information, like title and CSS.
Character Encoding Meta Tag
Defines character encoding.
```
<meta charset="UTF-8">
```
Ensures the document uses UTF-8 encoding.
Viewport Meta Tag
Optimizes the site for mobile devices.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Adjusts the layout based on the device's screen width.
HTML Title Element
Defines the title shown in browser tabs.
```
<title>Simple One-Page Website</title>
```
Displays the page title in the browser tab.
Style Element for CSS
Includes internal CSS styles.
```
<style>...</style>
```
Adds styles directly in the HTML document.
HTML Body Element
Contains the visible content of the page.
```
<body>...</body>
```
All the visible elements go inside <body>.
HTML Navigation Element
Defines a navigation bar.
```
<nav>...</nav>
```
Holds links for navigating within the page.
Navigation Links
Creates clickable links for navigation.
```
<a href="#hello">Hello</a>
```
Links to a section with the id "hello."
HTML Section Elements
Divides content into sections.
```
<section id="hello">...</section>
```
Identifies sections of the page with unique IDs.
Section Headings
Defines headings for sections.
```
<h2>Hello</h2>
```
Displays a heading inside a section.
HTML Closing Tags
Closes HTML elements.
```
</section>
```
Closes an open section element.
CSS Selector for body and html
Applies styles to both body and html.
```
body, html {
    margin: 0;
    padding: 0;
}
```
Removes default margins and paddings.
CSS Property margin: 0;
Removes default margin from elements.
```
margin: 0;
```
Ensures no extra spacing around the body.
CSS Property padding: 0;
Removes default padding from elements.
```
padding: 0;
```
Removes padding inside the body and html.
CSS Property font-family: Arial, sans-serif;
Sets the default font for the page.
```
font-family: Arial, sans-serif;
```
Uses Arial as the primary font, with a fallback.
CSS Property scroll-behavior: smooth;
Enables smooth scrolling behavior.
```
scroll-behavior: smooth;
```
Smoothly scrolls between anchor links.
CSS Selector for nav
Applies styles to the nav element.
```
nav {
    position: fixed;
    top: 0;
    width: 100%;
}
```
Fixes the nav bar to the top.
CSS Property position: fixed;
Fixes an element’s position relative to the viewport.
```
position: fixed;
```
Keeps the navigation bar always visible.
CSS Property top: 0;
Positions the element at the top.
```
top: 0;
```
Anchors the navigation bar to the top.
CSS Property width: 100%;
Sets the element to full width.
```
width: 100%;
```
Ensures the element spans the entire width of the page.
CSS Property background-color: #333;
Sets the background color of an element.
```
background-color: #333;
```
Gives the navigation bar a dark gray background.
CSS Property padding: 15px 0;
Adds vertical padding to the element.
```
padding: 15px 0;
```
Adds space inside the element, top and bottom.
CSS Property text-align: center;
Centers the text horizontally.
```
text-align: center;
```
Ensures the text inside nav is centred.
CSS Selector for nav a
Styles the anchor links inside nav.
```
nav a {
    color: white;
    margin: 0 15px;
}
```
Makes the links white with horizontal spacing.
CSS Property color: white;
Sets the text color to white.
```
color: white;
```
Colors the link text white.
CSS Property text-decoration: none;
Removes underlining from links.
```
text-decoration: none;
```
Removes the default underline from links.
CSS Property margin: 0 15px;
Adds space between elements horizontally.
```
margin: 0 15px;
```
Adds 15px space on either side of the links.
CSS Property font-size: 18px;
Sets the size of the text.
```
font-size: 18px;
```
Makes the link text 18px in size.
CSS Property transition: color 0.3s ease;
Creates a smooth transition effect.
```
transition: color 0.3s ease;
```
Changes the link color smoothly on hover.
CSS Selector for nav a:hover
Applies hover effects to the navigation links.
```
nav a:hover {
    color: #ddd;
}
```
Changes the link color to light gray when hovered.
CSS Property color: #ddd;
Changes the text color to light gray on hover.
```
color: #ddd;
```
Colors the link light gray when hovered.
CSS Selector for section
Styles the section elements.
```
section {
    height: 100vh;
    display: flex;
}
```
Ensures each section is the height of the viewport and uses flexbox.
CSS Property height: 100vh;
Sets the height to the full viewport height.
```
height: 100vh;
```
Makes the section take up the entire height of the screen.
CSS Property display: flex;
Applies the flexbox layout.
```
display: flex;
```
Uses flexbox to align and centre content.
CSS Property justify-content: center;
Centres content horizontally using flexbox.
```
justify-content: center;
```
Aligns content to the centre horizontally.
CSS Property align-items: center;
Centres content vertically using flexbox.
```
align-items: center;
```
Aligns content to the centre vertically.
CSS Property font-size: 2em;
Increases the size of the text.
```
font-size: 2em;
```
Doubles the default font size.
CSS Property transition: background-color 0.5s ease;
Animates background colour changes.
```
transition: background-color 0.5s ease;
```
Smoothly changes the background colour.
CSS Selector for section:target
Styles sections when targeted by a link.
```
section:target {
    background-color: #f8f8f8;
}
```
Changes the section background colour when clicked.
CSS Property background-color: #f8f8f8;
Changes the section background colour.
```
background-color: #f8f8f8;
```
Sets the background colour to light gray when targeted.
CSS Selector for #hello
Styles the section with the id hello.
```
#hello {
    background-color: #f0f0f0;
}
```
Sets the initial background colour for the "Hello" section.
CSS Property background-color: #f0f0f0;
Sets a light gray background for the section.
```
background-color: #f0f0f0;
```
Gives the "Hello" section a light gray background.
CSS Selector for #keep-going
Styles the section with the id keep-going.
```
#keep-going {
    background-color: #e0e0e0;
}
```
Sets the initial background color for the "Keep going" section.
CSS Property background-color: #e0e0e0;
Sets a light gray background for the section.
```
background-color: #e0e0e0;
```
Gives the "Keep going" section a light gray background.
CSS Selector for #goodbye
Styles the section with the id goodbye.
```
#goodbye {
    background-color: #d0d0d0;
}
```
Sets the initial background color for the "Goodbye" section.
CSS Property background-color: #d0d0d0;
Sets a light gray background for the section.
```
background-color: #d0d0d0;
```
Gives the "Goodbye" section a light gray background.
HTML id Attributes
Identifies sections by their unique id.
```
<section id="hello">...</section>
```
Assigns unique IDs to sections for internal navigation.
HTML href Attributes in Links
Links to sections using their IDs.
```
<a href="#hello">Hello</a>
```
Creates a link that jumps to the "Hello" section.
CSS Universal Selector Concepts
Applies styles to multiple elements at once.
```
body, html {
    margin: 0;
}
```
Applies styles to both the body and html elements.
Flexbox Layout
Centres content horizontally and vertically.
```
display: flex;
justify-content: center;
align-items: center;
```
Uses flexbox to centre content within the section.
Fixed Positioning
Keeps an element fixed in one place.
```
position: fixed;
top: 0;
```
Ensures the nav bar remains visible during scrolling.
Viewport Units
Uses viewport height (vh) for responsive design.
```
height: 100vh;
```
Makes the section take up the full height of the screen.
CSS Transitions
Smoothens changes between states.
```
transition: background-color 0.5s ease;
```
Adds smooth transitions when background colours change.
CSS Pseudo-classes
Applies styles based on an element's state.
```
nav a:hover {
    color: #ddd;
}
```
Changes the link colour when hovered.
Anchor Links
Navigates to specific sections on the page.
```
<a href="#hello">Hello</a>
```
Clicking this link jumps to the section with id hello.
Smooth Scrolling
Adds smooth transition when scrolling to sections.
```
scroll-behavior: smooth;
```
Smoothly scrolls between sections when navigating with anchor links.
The Box Model
Defines how elements are sized and spaced.
```
margin: 0;
padding: 0;
```
Resets the default margins and paddings.
Hexadecimal Colours
Defines colours using hex codes.
```
background-color: #333;
```
Sets the background colour to dark gray.
Font Families
Sets a font with fallbacks.
```
font-family: Arial, sans-serif;
```
Uses Arial as the primary font, with sans-serif as a fallback.
Meta Tags
Defines metadata for the HTML document.
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Ensures the page is responsive on different devices.
HTML5 Semantic Elements
Organizes content with semantic elements.
```
<nav>...</nav>
```
Uses <nav> to define a navigation bar.
CSS Selectors
Targets specific elements for styling.
```
nav a {
    color: white;
}
```
Targets the anchor tags inside the navigation element.
CSS Cascading and Specificity
Determines how styles are applied.
```
nav a:hover {
    color: #ddd;
}
```
More specific rules override less specific ones.
HTML Attributes
Defines characteristics for HTML elements.
```
<a href="#hello">Hello</a>
```
The href attribute specifies where the link points.
** Relative Units**
Uses relative sizes for responsive design.
```
font-size: 2em;
```
Sets the font size relative to the parent element's size.
** CSS Reset**
Removes default browser styling.
```
margin: 0;
padding: 0;
```
Resets margin and padding to create a consistent layout.
** Responsive Design**
Ensures the layout adapts to different screen sizes.
```
height: 100vh;
```
Makes sections scale based on viewport size.
** Document Structure**
Organizes HTML elements in a hierarchy.
```
<html>...</html>
```
The root <html> element contains all other elements.
** Web Page Rendering**
How browsers interpret HTML and CSS.
Browsers render elements based on their hierarchy and styling.
** User Interaction**
Hover and click effects enhance user experience.
```
nav a:hover {
    color: #ddd;
}
```
Changes link color when hovered for better interaction.
** Accessibility**
Uses proper tags and attributes for accessibility.
Correct use of IDs and anchor links enhances accessibility for users navigating with assistive technologies.
** Web Standards**
Adheres to best practices in HTML and CSS.
Using HTML5 and proper syntax ensures compatibility across browsers.
** Inline CSS**
Uses CSS inside HTML via the <style> tag.
```
<style>...</style>
```
Embeds CSS directly in the HTML document.
** Cross-browser Compatibility**
Ensures consistent behavior across different browsers.
Proper use of meta tags and CSS ensures the page renders consistently across modern browsers.
** CSS Inheritance**
How styles propagate to child elements.
```
font-family: Arial, sans-serif;
```
The font-family property applies to all child elements unless overridden.
** Pseudo-selectors**
Styles elements based on their state.
```
nav a:target {
    background-color: #f8f8f8;
}
```
Styles a section when it's the target of a link.
** Anchors and Navigation**
Links create navigation within the page.
```
<a href="#goodbye">Goodbye</a>
```
Clicking this link jumps to the section with id goodbye.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

hello.md

hello.md

hello.html

Files

hello.md

Latest commit

History

hello.md

File metadata and controls

hello.html