Skip to content

ArtRabs/html-css-basic

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
lesson-01-html-basic
lesson-01-html-basic
 
 
lesson-02-hyperlinks
lesson-02-hyperlinks
 
 
lesson-03-images
lesson-03-images
 
 
lesson-04-audio
lesson-04-audio
 
 
lesson-05-video
lesson-05-video
 
 
lesson-06-favicons
lesson-06-favicons
 
 
lesson-07-text-formatting
lesson-07-text-formatting
 
 
lesson-08-span-and-div
lesson-08-span-and-div
 
 
lesson-09-lists
lesson-09-lists
 
 
lesson-10-tables
lesson-10-tables
 
 
lesson-11-buttons
lesson-11-buttons
 
 
lesson-12-forms
lesson-12-forms
 
 
lesson-13-header-and-footers
lesson-13-header-and-footers
 
 
lesson-14-css-basic
lesson-14-css-basic
 
 
lesson-15-colors
lesson-15-colors
 
 
lesson-16-fonts
lesson-16-fonts
 
 
lesson-17-borders
lesson-17-borders
 
 
lesson-18-shadows
lesson-18-shadows
 
 
lesson-19-margins
lesson-19-margins
 
 
lesson-20-float
lesson-20-float
 
 
lesson-21-overflow
lesson-21-overflow
 
 
lesson-22-display-property
lesson-22-display-property
 
 
lesson-23-height-and-width
lesson-23-height-and-width
 
 
lesson-24-positions
lesson-24-positions
 
 
lesson-25-background-images
lesson-25-background-images
 
 
lesson-26-combinators
lesson-26-combinators
 
 
lesson-27-pseudo-classes
lesson-27-pseudo-classes
 
 
lesson-28-pseudo-elements
lesson-28-pseudo-elements
 
 
lesson-29-pagination
lesson-29-pagination
 
 
lesson-30-dropdown-menus
lesson-30-dropdown-menus
 
 
lesson-31-navigation-bar
lesson-31-navigation-bar
 
 
lesson-32-website-layout
lesson-32-website-layout
 
 
lesson-33-image-gallery
lesson-33-image-gallery
 
 
lesson-34-icons
lesson-34-icons
 
 
lesson-35-flexbox
lesson-35-flexbox
 
 
lesson-36-transformations
lesson-36-transformations
 
 
lesson-37-animations
lesson-37-animations
 
 
README.md
README.md
 
 

Repository files navigation

HTML and CSS Basics

Another day with Bro Code learning his HTML & CSS Full Course for free 🌎.

I want to be Backend Developer but who knows.

📚 Table of Contents

📝 Lessons

Press the Lesson #: Name to be redirected to the .html of the said lesson.

Lesson 1: HTML Basics

Covers the foundational HTML structure:

  • <!DOCTYPE html> declaration
  • <html>, <head>, <title>, <body> elements
  • Text elements: <p>, <pre>
  • Separators: ---, <br>
  • Comments: <!-- ... -->

Demo Files:

  • lyrics.html — A simple page with a song title and lyrics

Lesson 2: Hyperlinks

Demonstrates different ways to use the <a> tag:

  • External links (href="https://...")
  • Opening links in a new tab (target="_blank")
  • Adding tooltips with the title attribute
  • Relative links to other lessons (../lesson-01-html-basic/lyrics.html)
  • Placeholder/anchor links (href="lyrics.html")
  • Email links (mailto:)

Demo Files:

Lesson 3: Images

Shows how to embed images with the <img> tag:

  • Basic image embedding with src, alt, height, and width attributes
  • Linking an image to an external site using <a> + <img>
  • Displaying animated GIFs
  • Using descriptive alt text for accessibility

Demo Files:

Lesson 4: Audio

Covers different ways to use the <audio> tag:

  • Basic audio embedding with src and type attributes
  • Adding playback controls (controls)
  • Autoplaying audio (autoplay) — note: may require muted due to browser restrictions
  • Looping audio (loop)
  • Providing multiple formats (.mp3, .wav, etc.) for compatibility
  • Labeling audio clips with descriptive text for clarity

Demo Files:

  • audio folder — presents multiple audio files:
    • ultra-instinct-theme-official-version.mp3
    • batida-de-porta-troll.mp3
    • fahhh_KcgAXfs.mp3
    • ping_missing.mp3
    • tuco-get-out.mp3
    • kono-dio-da99.mp3

Lesson 5: Video

Shows how to embed and control video playback with the <video> tag, kinda like the <image> too:

  • Basic video embedding with <video> and <source>
  • Attributes:
    • controls → adds play/pause/volume UI
    • autoplay → starts playback automatically
    • muted → required for autoplay in most browsers
    • height / width → set video dimensions
  • Wrapping a video in a hyperlink (<a>) to redirect when clicked
  • Supporting multiple video files with <source> elements (I do not have any video files here other than .mp4, but .webm, .avi, .ogg will work)

Demo Files:

  • clip_1,764,935,995,030.mp4 — autoplay + muted demo, wrapped in a link to Monster Hunter Rise on Steam
  • Hollow Knight- Silksong - 2025-10-02 6-01-13 PM.mp4 — manual controls demo

Lesson 6: Favicons

Explains how to add a favicon to your website using the <link> tag:

  • Basic favicon setup with <link rel="icon">
  • Supported image formats: .ico, .png, .svg, .jpg
  • Using the type attribute (image/image-type, image/image-name, etc.)
  • Best practice: edit the image itself to the correct size (e.g., 96×96) instead of relying on sizes like width and length, but not restricted of course

Demo Files:

  • index.html — includes: 
    <link 
    rel="icon" 
    type="image/png" 
    href="images/favicon 96x96.png">
    • Uses a favicon.png edited to 96×96 pixels
    • Demonstrates clean setup without sizes attribute

Lesson 7: Text Formatting

Demonstrates various text formatting tags in HTML:

  • <b> and <strong> for bold text
  • <i> and <em> for italic text
  • <u> for underlined text
  • <del> for deleted text
  • <big> for larger text
  • <small> for smaller text
  • <sub> for subscript text
  • <sup> for superscript text
  • <tt> for monospace text
  • <mark> for highlighted text

Demo Files:

  • index.html — showcases all the above formatting tags

Lesson 8: Span and Div

Explains the use of <span> and <div> for grouping and styling content:

  • <span>: inline container for text, useful for styling parts of a sentence
  • <div>: block-level container for larger sections of content
  • Applying inline styles using the style attribute (e.g., background-color)

Demo Files:

  • index.html — includes examples of both <span> and <div> with different background colors

Lesson 9: Lists

Covers the creation of ordered and unordered lists in HTML:

  • <ul> for unordered (bulleted) lists
  • <ol> for ordered (numbered) lists
  • <li> for list items
  • Nesting lists within lists for sub-items
  • <dt>, and <dd> for description lists

Demo Files:

  • index.html — demonstrates both unordered, ordered and description lists with nested items

Lesson 10: Tables

Introduces HTML table elements for displaying tabular data:

  • <table>: defines the table
  • <tr>: defines a table row
  • <th>: defines a header cell
  • <td>: defines a standard data cell
  • width: sets the width of the header cell
  • Using attributes like border, cellpadding, and cellspacing to style tables

Demo Files:

  • index.html — includes a sample table with headers and data cells

Lesson 11: Buttons

Explains how to create and style buttons:

  • <button>: defines a clickable button
  • Adding <a> inside buttons
  • Using inline styles to customize button appearance (e.g., font-size,background-color, color)
  • A sneak peek of JavaScript with onclick attribute to trigger actions when the button is clicked

Demo Files:

Lesson 12: Forms

Introduces HTML form elements for user input:

  • <form>: defines the form, with action, method, and enctype
  • <label>: labels for form elements
  • <input>: various types
    • text with minlength, maxlength, required
    • password with length restrictions
    • email with placeholder
    • tel with pattern for validation
    • date for birthdate
    • number with min and max
    • radio buttons grouped with name
    • checkbox for subscription
    • file with accept filter
    • reset and submit controls
  • <select> and <option>: dropdown menus
  • <textarea>: multi-line text input
  • Attributes like placeholder, pattern, required, min, max, accept

Demo Files:

  • index.html — includes a sample form with different input types, validation attributes, and file upload

Lesson 13: Headers and Footers

Covers the semantic HTML5 elements <header> and <footer>:

  • <header>: defines the header section of a webpage, typically containing the site title, logo, and navigation links.
  • <footer>: defines the footer section, usually containing copyright information, contact links, and additional navigation

Demo Files:

  • index.html — Portrays the use of <header> and <footer> with sample content, including an image (Lloyd OK.png)

Lesson 14: CSS Basics

Introduces the basics of CSS for styling HTML elements:

  • Inline CSS using the style attribute
  • Internal CSS within a <style> tag in the <head>
  • External CSS using a separate .css file linked with <link>
  • Basic CSS properties like color, background-color, and text styling
  • Class selectors for styling multiple elements

Demo Files:

  • index.html — demonstrates inline, internal, and external CSS
  • page2.html — another page styled with CSS classes
  • style.css — external CSS file with class definitions

Lesson 15: Colors

Explores color usage in CSS:

  • Different color formats: named colors, RGB, HEX, and HSL
  • Applying colors to text and backgrounds using CSS properties

Demo Files:

  • index.html — showcases various color formats applied to text and backgrounds
  • style.css — external CSS file defining color styles

Lesson 16: Fonts

Covers the use of custom fonts in web design:

  • Importing fonts from Google Fonts using <link> in the <head>
  • Applying imported fonts to HTML elements using CSS font-family property
  • Using multiple font families for fallback options

Demo Files:

  • index.html — demonstrates importing and applying Google Fonts remotely
  • style.css — external CSS file defining font styles and using local fonts

Lesson 17: Borders

Introduces CSS border properties for styling element borders:

  • border-width: sets the thickness of the border
  • border-style: defines the style of the border (e.g., solid, dashed, dotted)
  • border-color: specifies the color of the border
  • Shorthand border property to set width, style, and color in one line
  • Individual border sides: border-top, border-right, border-bottom, border-left

Demo Files:

  • index.html — showcases various border styles and properties
  • style.css — external CSS file defining border styles

Lesson 18: Shadows

Covers CSS box-shadow for adding shadows to elements:

  • text-shadow: applies a shadow effect to text
  • box-shadow: applies a shadow effect to an element
  • Multiple shadow properties: x-offset, y-offset, blur-radius, color

Demo Files:

  • index.html — showcases box-shadow usage
  • style.css — external CSS file defining shadow styles

Lesson 19: Margins

Explains CSS margin properties for controlling the spacing around elements:

  • margin: applies margin to all sides of an element
  • margin-top, margin-right, margin-bottom, margin-left: applies margin to specific sides
  • margin: auto: centers an element horizontally within its parent container

Demo Files:

  • index.html — showcases margin styles
  • style.css — external CSS file defining margin styles

Lesson 20: Float

Covers CSS float property allows other elements to flow around a floating elements:

  • float: applies floating behavior to an element

Demo Files:

  • index.html — showcases floating elements
  • style.css — external CSS file defining float styles

Lesson 21: Overflow

Explains CSS overflow properties for handling overflowing content:

  • overflow: applies overflow behavior to an element

Demo Files:

  • index.html — showcases overflow styles
  • style.css — external CSS file defining overflow styles

Lesson 22: Display Property

Covers CSS display property for controlling the visibility and layout of elements:

  • display: applies display behavior to an element
  • display: block: creates a block-level element
  • display: inline: creates an inline element
  • display: none: hides an element
  • display: inline-block: creates an inline-block element

Demo Files:

  • index.html — showcases display styles
  • style.css — external CSS file defining display styles

Lesson 23: Height and Width

Covers CSS height and width properties for controlling the size of elements:

  • height: sets the height of an element
  • width: sets the width of an element
  • max and min properties for setting minimum and maximum sizes
  • px, vh, and % units for specifying size values

Demo Files:

  • index.html — showcases height and width styles
  • style.css — external CSS file defining height and width styles

Lesson 24: Positions

Covers CSS position property for controlling the positioning of elements:

  • position: applies positioning behavior to an element
  • static, relative, absolute, and fixed positioning options

Demo Files:

  • index.html — showcases position styles
  • style.css — external CSS file defining position styles

Lesson 25: Background Images

Covers CSS background-image property for adding background images to elements:

  • background-image: applies a background image to an element
  • background-size, background-repeat, background-position, and background-attachment properties for controlling background properties

Demo Files:

  • index.html — showcases background image styles
  • style.css — external CSS file defining background image styles

Lesson 26: Combinators

Covers CSS combinator selectors for targeting specific elements within a document:

  • # for ID selectors
  • . for class selectors
  • > for direct child selectors
  • + for adjacent sibling selectors
  • ~ for general sibling selectors

Demo Files:

  • index.html — showcases combinator selectors
  • style.css — external CSS file defining combinator styles

Lesson 27: Pseudo-Classes

Covers CSS pseudo-classes for applying styles to specific states of elements:

  • :hover: applies styles when an element is hovered over
  • :active: applies styles when an element is active
  • :visited: applies styles when an element has been visited
  • :first-child: applies styles to the first child element of a parent element
  • :last-child: applies styles to the last child element of a parent element
  • :nth-child: applies styles to specific child elements of a parent element

Demo Files:

  • index.html — showcases pseudo-class styles
  • style.css — external CSS file defining pseudo-class styles

Lesson 28: Pseudo-Elements

Covers CSS pseudo-elements for adding styles to specific parts of elements:

  • ::before: applies styles to the content before an element
  • ::after: applies styles to the content after an element
  • ::first-letter: applies styles to the first letter of an element
  • ::first-line: applies styles to the first line of an element
  • ::selection: applies styles to the selected text

Demo Files:

  • index.html — showcases pseudo-element styles
  • style.css — external CSS file defining pseudo-element styles

Lesson 29: Pagination

Covers CSS pagination for creating navigation for multiple pages:

  • pagination: applies styles to the pagination container

Demo Files:

  • index.html — showcases pagination styles
  • style.css — external CSS file defining pagination styles

Lesson 30: Dropdown Menus

Covers CSS dropdown menus for creating interactive navigation:

  • dropdown: applies styles to the dropdown container

Demo Files:

  • index.html — showcases dropdown menu styles
  • style.css — external CSS file defining dropdown menu styles

Lesson 31: Navigation Bar

Covers CSS navigation bar for creating interactive navigation:

  • navbar: applies styles to the navigation bar container

Demo Files:

Lesson 32: Website Layout

Covers the use of semantic tags for structuring a webpage layout to keep the content organized:

  • <header>: defines the header section of a webpage
  • <nav>: defines a navigation section
  • <main>: defines the main content of a webpage
  • <section>: defines a section of content
  • <article>: defines an independent piece of content
  • <aside>: defines content aside from the main content
  • <footer>: defines the footer section of a webpage

Demo Files:

  • index.html — showcases semantic layout structure
  • style.css — external CSS file defining layout styles

Lesson 33: Image Gallery

Covers the creation of an image gallery using HTML and CSS:

  • Structuring the gallery with <div> containers
  • Using <img> tags to display images
  • Using <a> tags to link images to their full-size versions
  • Styling the gallery with CSS for layout

Demo Files:

  • index.html — showcases image gallery layout
  • style.css — external CSS file defining gallery styles
  • images folder — contains images used in the gallery:
    • 01-desktop.png
    • 02-desktop.png
    • 03-desktop.png

Lesson 34: Icons

Covers the use of icons in HTML and CSS:

  • Using icon fonts (e.g., Font Awesome)
  • Embedding icons directly in HTML using <i> tags
  • Styling icons with CSS

Demo Files:

Lesson 35: Flexbox

Covers CSS flexbox for creating flexible layouts:

  • display: flex; to enable flexbox on a container
  • Key flexbox properties:
    • flex-direction
    • justify-content
    • align-items
    • flex-wrap
    • align-content

Demo Files:

Lesson 36: Transformations

Covers CSS transformations for manipulating elements:

  • transform property with functions:
    • translate()
    • rotate()
    • scale()
    • skew()

Demo Files:

  • index.html — showcases transformation styles
  • style.css — external CSS file defining transformation styles

Lesson 37: Animations

Covers CSS animations for creating animated effects:

  • @keyframes rule to define animations
  • animation property with sub-properties:
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction

Demo Files:

  • index.html — showcases animation styles
  • style.css — external CSS file defining animation styles

📜 Reference

Bro Code's HTML & CSS Full Course for free 🌎 and thank you for being such a chad.

Lesson 3:

  • Jujutsu Kaisen Chapter 221 nah id win.jpeg

  • Jujustsu Kaisen Season 2 Episode 4 gojo.gif

  • pc_kv1.png is from official website of Heaven Burns Red.

All audio in Lesson 4 is from Myinstants. (Nah, I ain't one by one it, help)

Videos from lesson 5:

  • clip_1,764,935,995,030.mp4 (My Monster Hunter Rise Sunbreak gameplay clip)
  • Hollow Knight- Silksong - 2025-10-02 6-01-13 PM.mp4 (My Hollow Knight - Silksong gameplay clip)

In Lesson 6, both favicon.png is from Blazblue Entropy Effect, a given wallpaper.

Lesson 13: Lloyd OK.png is from The Greatest Estate Developer, I forgot what chapter is the picture, but you can read the entire thing to see it. (Definitely not baitin- suggesting you to read it)

Lesson 16 from Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Science+Gothic:wght@100..900&display=swap" rel="stylesheet">

Lesson 25:

Official Calendar Image but I can not see the source of the one who cropped the dates, it is supposed to be in my google drive history, or perhaps there is no history nor google drive that happened
Found it

Lesson 33:

Same as Lesson 25: drive.google.com/drive/folders/1KvRyMzN3OFrBQ-TV4H1dOJAd6IpNSr-S?usp=sharing

About

Step-by-step lessons on HTML and CSS basics with examples and practice files

Topics

html

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages