🖥️

HTML and CSS Basics

Jul 22, 2024

View transcript

Lecture Notes: HTML and CSS Basics

Introduction

  • Series covers HTML and CSS basics.
  • Importance of learning HTML:
    • Enhances resumes.
    • Businesses have online presence.
    • Useful even if not a web developer.

HTML Basics

Definitions

  • HTML: HyperText Markup Language; uses tags to structure web content.
  • Tags: Used in pairs, e.g., <p></p>, <h1></h1>.

Common Tags

  • Header tags: <h1>, <h2>, etc. used for headings.
  • Paragraph tag: <p> for paragraphs.
  • Anchor tag: <a> for hyperlinks.
  • Line Break: <br> for line breaks.
  • Horizontal Rule: <hr> for a horizontal line.
  • Format tags: <b>, <i>, <u>, etc.
  • Preformatted Text: <pre> preserves spaces and line breaks.
  • Comments: <!-- comment --> not shown in output.

HTML File Structure

  1. DOCTYPE Declaration: <!DOCTYPE html>, indicates HTML5.
  2. HTML tag: <html>, root element.
  3. Head tag: <head>, contains metadata like title.
  4. Body tag: <body>, contains visible content.

Tools Required

  • Web Browsers: Chrome, Firefox, Edge, Safari.
  • Text Editor: VS Code recommended.

Setting Up VS Code

  1. Download from code.visualstudio.com.
  2. Open and install.
  3. Create a primary folder for the website.
  4. Create index.html inside the folder for the homepage.
  5. Install the Live Server extension in VS Code.

Basic HTML Example

<!DOCTYPE html> <html> <head> <title>My First Website</title> </head> <body> <h1>This is an H1 heading</h1> <p>Some paragraph text.</p> <a href="https://example.com">Link</a> </body> </html>

CSS Basics

Definition

  • CSS: Cascading Style Sheets; used for styling the web pages.

Linking CSS

  1. Inline: Using the style attribute in HTML tags.
  2. Internal: Inside <style> tags in the HTML <head>.
  3. External: Link to a .css file using <link> in the HTML <head>.

Example of CSS

Internal CSS

<head> <style> body { background-color: lightblue; } h1 { color: navy; } p { font-family: verdana; color: green; } </style> </head>

External CSS

  • HTML:
<head> <link rel="stylesheet" type="text/css" href="styles.css"> </head>
  • CSS (styles.css):
body { background-color: lightblue; } h1 { color: navy; } p { font-family: verdana; color: green; }

Basic Styling

  • Colors: Use named colors, hex codes, RGB, HSL values.
  • Text alignment: text-align: center;.
  • Padding and Margin: Defines space around elements.
  • Borders: Style borders using border property.

Advanced CSS Concepts

Selectors

  • Class Selector: .classname {}
  • ID Selector: #idname {}
  • Attribute Selector: a[href='link'] {}

Pseudo-Classes and Pseudo-Elements

  • Pseudo-Classes: :hover, :active, :nth-child(n).
  • Pseudo-Elements: ::before, ::after, ::first-letter.

CSS Layouts

  • Flexbox: Align elements using display: flex;.
  • Grid: Layout systems for arranging elements.

Media Queries

  • Used for responsive design.
  • Example:
@media only screen and (max-width: 600px) { .classname { width: 100%; } }

Project Examples

Image Gallery

<div class="gallery"> <a target="_blank" href="img_1.png"> <img src="img_1.png" alt="Image 1" width="600" height="400"> </a> <div class="desc">Description</div> </div>

Navigation Bar

<nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>

Visual Enhancements

Animations and Transitions

  • Define using @keyframes.
  • Example:
@keyframes slidein { from { margin-left: 100%; } to { margin-left: 0%; } }
  • Apply animation:
#slideelem { animation-duration: 3s; animation-name: slidein; }

Using Font Awesome

  1. Link Font Awesome in <head>.
  2. Use icons:
<i class="fas fa-home"></i>

Conclusion

  • HTML provides structure; CSS provides styling.
  • Practice with real projects to understand both.
  • Utilize tools like VS Code, Live Server, and browser developer tools.

Stay tuned for more advanced topics!

Full transcript