HTML & CSS Full Course - Beginner to Pro

Key Concepts

• HTML (Hypertext Markup Language): A tool for creating the structure and content of websites using elements and tags.
• CSS (Cascading Style Sheets): A language used to style HTML elements, controlling their appearance.
• HTML Elements: Components of a webpage, such as buttons, paragraphs, links, and images.
• HTML Tags: Instructions to the computer, defining the start and end of an HTML element (e.g., <button>, </button>).
• HTML Attributes: Modifiers within HTML tags that change how an element behaves (e.g., href, target, class).
• CSS Selectors: Patterns used to target specific HTML elements for styling (e.g., button, .subscribe-button).
• CSS Properties: Characteristics of an element that can be modified (e.g., background-color, color, border).
• CSS Values: Specific settings for CSS properties (e.g., red, white, none, 50px).
• CSS Pseudo-classes: Keywords that add styles in specific states (e.g., :hover, :active).
• CSS Box Model: A model defining the space an element occupies, including content, padding, border, and margin.
• Display Property: A CSS property that controls how an element is displayed (e.g., block, inline-block, inline, grid, flex).
• CSS Grid: A layout system for creating two-dimensional grids with rows and columns.
• CSS Flexbox: A layout system for creating flexible one-dimensional layouts.
• CSS Position: A property that controls how an element is positioned on a webpage (e.g., static, fixed, absolute, relative).
• Chrome DevTools: A set of tools built into Google Chrome for inspecting and debugging webpages.
• Responsive Design: Designing websites to adapt to different screen sizes and devices.
• Semantic Elements: HTML elements that convey meaning to screen readers and search engines (e.g., <header>, <nav>, <main>, <section>).

Course Overview and Setup

• The course aims to teach website development from beginner to professional, culminating in building a youtube.com clone.
• No prior coding experience is required.
• The course includes over 100 exercises for practice.
• An HTML and CSS reference is provided, eliminating the need for note-taking.
• Software requirements: Google Chrome (web browser) and VS Code (code editor).
• Installation instructions for both are provided, involving searching on Google and following the download and install instructions.

Introduction to HTML

• HTML is a tool used to create websites by giving instructions to the computer.
• Every website uses a combination of HTML and CSS.
• The first instruction is creating a button: <button>Hello</button>.
• The second instruction is creating a paragraph: <p>This is a paragraph of text.</p>.
• HTML code is read from top to bottom.
• Each item displayed on a webpage is called an HTML element.
• Syntax: The rules for how a coding language should be written.
• HTML Tag: Part of the code that tells the computer what to create (e.g., <button>).
• Every element consists of an opening tag and a closing tag.
• The closing tag is the same as the opening tag, except it has a slash in front of the tag name.
• HTML Attribute: Modifies how an element behaves (e.g., href in a link).
• Syntax for an attribute: attribute_name="attribute_value".
• The href attribute determines the destination of a link.
• The target attribute determines whether a link opens in a new tab (_blank) or the current page.
• HTML ignores extra spaces and new lines.
• Indenting and new lines can be used to organize HTML code for readability.
• VS Code's default indent is four spaces, but two spaces are generally used in HTML and CSS. This can be changed in settings.

Introduction to CSS

• CSS is used to style webpages and change the appearance of HTML elements.
• CSS code is written inside a <style> element.
• CSS syntax: selector { property: value; }.
• CSS Selector: Tells the computer which elements to target (e.g., button).
• CSS Property: Tells the computer what to change (e.g., background-color).
• CSS Value: Tells the computer what to change the property to (e.g., red).
• Multiple styles can be added inside the brackets.
• Pixels (px): A common unit of measurement in the digital world.
• RGB: A way of measuring color using a combination of red, green, and blue values (0-255).
• Border Radius: A CSS property for creating rounded corners.
• Cursor: The mouse pointer.
• The cursor property can be used to change the cursor to a pointer (hand icon).
• The class attribute is used to label HTML elements for targeting in CSS.
• To target a class in CSS, start with a dot (.) followed by the class name.

Intermediate CSS Skills

• Hover Effects: Styles that apply when the mouse hovers over an element.
• Pseudo-classes: Add extra styles in certain situations (e.g., :hover, :active).
• Opacity: A CSS property that controls how see-through an element is (values between 0 and 1).
• Transitions: Smoothly change styles over a specified duration.
• The transition property takes two values: the property to transition and the duration.
• Shadows: Add a shadow effect to elements using the box-shadow property.
• The box-shadow property takes four values: horizontal position, vertical position, blur, and color.
• RGBA: A way of measuring color that includes an alpha value for opacity.

Chrome DevTools

• Chrome DevTools allows inspecting the HTML and CSS of any webpage.
• To open DevTools, right-click on a webpage and select "Inspect".
• The pointer icon in DevTools allows selecting elements on the webpage and viewing their styles.
• The "Computed" tab shows the final styles applied to an element.
• DevTools can be used to get perfect colors from existing websites.
• Hex: Another way of measuring color, similar to RGB.

CSS Box Model

• The CSS box model defines the space an element occupies.
• Margin: Spacing on the outside of an element.
• Padding: Spacing on the inside of an element.
• Border: A line around an element.
• The Chrome DevTools can be used to visualize the margin and padding of elements.
• The vertical-align property is used to align elements vertically.

Styling Text

• CSS properties for styling text:
  • font-family: Changes the font.
  • font-size: Changes the text size.
  • font-weight: Makes the text bold.
  • font-style: Makes the text italic.
  • text-align: Centers the text.
  • line-height: Adjusts the spacing between lines.
• HTML Entities: Used to type special characters (e.g., · for a middle dot).
• Text Elements: Elements that are inside a line of text (e.g., <strong>, <u>, <span>).
• The <span> element is a generic text element with no default styles.
• CSS Specificity: A priority system that determines which styles are applied when multiple styles target the same element.

HTML Structure

• Every HTML file should start with <!DOCTYPE html>.
• Every HTML file should have one <html> element, containing a <head> and a <body>.
• The <head> element contains elements that are not visible on the page (e.g., <title>, <style>).
• The <body> element contains all the elements that are visible on the page.
• The <title> element changes the text in the tab.
• Live Server: A VS Code extension that automatically reloads the webpage whenever the code changes.
• CSS code can be moved into a separate file (e.g., styles.css).
• The <link> element is used to load CSS files into the HTML.
• File Paths: Used to locate different files within the HTML code.
• New fonts can be loaded from Google Fonts by copying the provided code into the <head> section.

Final Project Setup

• A new HTML file called YouTube.html is created for the final project.
• The proper HTML structure is set up.
• The Live Server extension is used to automatically reload the page.
• The <img> element is used to load images onto the page.
• The src attribute tells the computer which image to display.
• The width and height properties can be used to resize images.
• The object-fit property determines how the image is displayed within its container.
• The <input> element is used to create a text box.
• The type attribute sets the type of input (e.g., text, checkbox).
• The placeholder attribute sets the placeholder text in the text box.

Display Property

• The display property controls how an element is displayed.
• Block Elements: Take up the entire line (e.g., <p>, <div>).
• Inline Block Elements: Only take up as much space as they need to (e.g., <img>, <input>).
• Inline Elements: Appear within a line of text (e.g., <strong>).
• The display property can be used to switch between block and inline block.

Div Element

• The <div> element is a container that can contain any other element inside.
• Divs are used to group elements together and lay them out on the page.
• Divs are block elements by default.
• The nested layouts technique involves using a combination of vertical and horizontal layouts to create complex designs.

Nested Layouts Technique

• The nested layouts technique involves breaking down a design into a combination of vertical and horizontal layouts.
• Vertical layouts have items on top of each other.
• Horizontal layouts have items beside each other.
• Google Drawings can be used to visualize the nested layouts.

CSS Grid

• CSS Grid is a layout system for creating two-dimensional grids with rows and columns.
• To create a grid, set the display property to grid on the container element.
• The grid-template-columns property defines the number and width of the columns.
• The fr unit represents free space and tells the column to take up the remaining amount of space.
• The column-gap property sets the space between the columns.
• The row-gap property sets the space between the rows.

Flexbox

• Flexbox is a layout system for creating flexible one-dimensional layouts.
• To create a flexbox, set the display property to flex on the container element.
• The flex-direction property sets the direction of the flex items (e.g., row, column).
• The justify-content property aligns the flex items horizontally.
• The align-items property aligns the flex items vertically.
• The flex property tells the flex item to take up the remaining amount of space.
• The flex-shrink property prevents the flex item from shrinking.

CSS Position

• The position property controls how an element is positioned on a webpage.
• Position: static: The default position.
• Position: fixed: Sticks the element to the browser window while scrolling.
• Position: absolute: Positions the element relative to its nearest positioned ancestor.
• Position: relative: Positions the element normally, but allows absolute positioned children to be positioned relative to it.
• The top, left, bottom, and right properties are used to move the element around.
• The z-index property determines which elements appear in front and which elements appear behind.

Finishing the Final Project

• The sidebar is created using a combination of flexbox and CSS position.
• The video time is created using position absolute inside position relative.
• The notification count is created using position absolute inside position relative.
• Responsive design is implemented using media queries.
• CSS shorthand properties are used to simplify the code.
• Inheritance is used to set default styles on the body element.
• Semantic elements are used to give a special meaning and structure to the page.
• Comments are used to document the code.

Additional CSS Concepts

• Responsive Design:
  • Achieved using media queries (@media).
  • Media queries define different styles for different screen sizes.
  • max-width and min-width are used to specify the screen size range.
• CSS Shorthand Properties:
  • padding: Shorthand for padding-top, padding-right, padding-bottom, padding-left.
  • margin: Shorthand for margin-top, margin-right, margin-bottom, margin-left.
  • border: Shorthand for border-width, border-style, border-color.
• Inheritance:
  • Certain CSS properties are inherited from parent elements to child elements (e.g., font-family, color).
  • Not all properties are inherited (e.g., border, padding, margin).
  • CSS Specificity determines which styles are applied when multiple styles target the same element.
• Semantic Elements:
  • HTML elements that convey meaning to screen readers and search engines (e.g., <header>, <nav>, <main>, <section>).
• Comments:
  • Used to add notes to the code without affecting the webpage.
  • HTML comments: <!-- comment -->
  • CSS comments: /* comment */

Next Steps

• Learn JavaScript to make webpages interactive.
• A full JavaScript course for absolute beginners is recommended.