📚 Session Overview & Timeline

0:00 - 0:15

Introduction & Setup

Welcome, objectives, and environment setup

0:15 - 0:45

Typography & Font Management

Google Fonts, font properties, and styling techniques

0:45 - 1:00

Figma Design Tool Introduction

Basic navigation, design-to-code workflow

1:00 - 1:15

Break & Q&A

Rest break and address questions

1:15 - 1:45

HTML Forms & Attributes

Form structure, validation, and accessibility

1:45 - 2:00

Input Types & Wrap-up

Modern input types, homework assignment, and Q&A

📖 Key Definitions & Concepts

HTML Form

A container element that groups interactive controls for submitting data to a server. Forms provide structure and context for user input elements.

Form Attributes

HTML attributes that control form behavior, including action (where to send data), method (how to send data), and validation rules.

Input Types

Different types of form controls that accept specific kinds of user input (text, email, password, number, date, etc.). Each type has unique validation and interface behaviors.

Web Typography

The art and technique of arranging type on web pages, including font selection, sizing, spacing, and hierarchy to enhance readability and user experience.

Google Fonts

A free web font service that provides high-quality fonts optimized for web use, accessible via CSS links or imports.

Figma

A collaborative web-based design tool used for creating user interfaces, prototypes, and design systems. It bridges the gap between design and development.

Form Validation

The process of checking user input against defined criteria to ensure data quality and security before submission.

Accessibility (a11y)

The practice of making web content usable by people with disabilities, including proper labeling, keyboard navigation, and screen reader compatibility.

🎨 Typography & Font Management

Adding Custom Fonts

There are several ways to add custom fonts to your website:

1. Google Fonts (Recommended)

                    <!-- In HTML head -->
                    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap"
                    rel="stylesheet">

                    <!-- Or in CSS -->
                    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
                

2. Local Font Files

                    @font-face {
                    font-family: 'CustomFont';
                    src: url('./fonts/CustomFont.woff2') format('woff2'),
                    url('./fonts/CustomFont.woff') format('woff');
                    font-weight: 400;
                    font-display: swap;
                    }
                

Font Properties & Styling

Live Typography Demo

Main Heading (700 weight)

Sub Heading (600 weight)

Body text with normal weight and optimal line height for readability.

Light weight text for captions and secondary information.

                    /* Font Property Examples */
                    .heading {
                    font-family: 'Inter', sans-serif;
                    font-size: 2.5rem; /* Size */
                    font-weight: 700; /* Weight */
                    line-height: 1.2; /* Line spacing */
                    letter-spacing: -0.02em; /* Character spacing */
                    text-transform: uppercase; /* Case transformation */
                    }

                    .body-text {
                    font-family: 'Inter', sans-serif;
                    font-size: 1rem;
                    font-weight: 400;
                    line-height: 1.6; /* Optimal for reading */
                    color: #2d3748;
                    }

                    /* Responsive Typography */
                    @media (max-width: 768px) {
                    .heading {
                    font-size: 2rem; /* Smaller on mobile */
                    }
                    }
                

Font Loading Best Practices

                    /* Font loading optimization */
                    @font-face {
                    font-family: 'Inter';
                    src: url('./fonts/inter.woff2') format('woff2');
                    font-display: swap; /* Improve loading performance */
                    font-weight: 100 900; /* Variable font weight range */
                    }

                    /* Font fallbacks */
                    body {
                    font-family: 'Inter', system-ui, -apple-system, sans-serif;
                    }
                

🎯 Figma Design Tool Basics

What is Figma?

Figma is a collaborative web-based design tool that allows designers and developers to create, prototype, and share user interfaces. It's essential for modern web development workflows.

Key Figma Features for Developers

Design-to-Code Workflow

Inspect Mode: Click on any element to see CSS properties
Export Assets: Download images, icons, and graphics
Design Tokens: Copy colors, fonts, and spacing values
Responsive Design: View designs at different screen sizes
Component Libraries: Access reusable design elements

Getting CSS from Figma

                    1. Open Figma design file
                    2. Select any element (text, button, container)
                    3. Look at the right panel "Design" tab
                    4. Scroll down to see CSS properties
                    5. Copy values for:
                    - Colors (background, text)
                    - Typography (font-family, font-size, font-weight)
                    - Spacing (padding, margin)
                    - Border radius, shadows, etc.
                

Common Figma-to-CSS Translations

                    /* Figma shows: Fill #667EEA */
                    background-color: #667EEA;

                    /* Figma shows: Corner Radius 12px */
                    border-radius: 12px;

                    /* Figma shows: Drop Shadow */
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

                    /* Figma shows: Font Inter, Weight 600, Size 16px */
                    font-family: 'Inter', sans-serif;
                    font-weight: 600;
                    font-size: 16px;
                

Figma Resources for This Session

Practice Links:

Figma Community: figma.com/community
Free UI Kits for practice
Form design examples and templates
Typography and color palette examples

📝 HTML Forms & Attributes

Basic Form Structure

                    <form action="/submit" method="POST" class="contact-form">
                    <fieldset>
                    <legend>Contact Information</legend>

                    <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" name="name" required>
                    </div>

                    <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" required>
                    </div>

                    <button type="submit">Send Message</button>
                    </fieldset>
                    </form>
                

Essential Form Attributes

Form Element Attributes

                    <form
                    action="/process-form" <!-- Where to send data -->
                    method="POST" <!-- How to send data -->
                    enctype="multipart/form-data" <!-- For file uploads -->
                    autocomplete="on" <!-- Enable autocomplete -->
                    novalidate <!-- Disable HTML5 validation -->
                    >
                

Input Attributes

                    <input
                    type="text"
                    name="username" <!-- Form data key -->
                    id="username" <!-- For label association -->
                    placeholder="Enter username"
                    required <!-- Field is mandatory -->
                    maxlength="50" <!-- Character limit -->
                    pattern="[A-Za-z0-9]+" <!-- Validation pattern -->
                    autocomplete="username" <!-- Autocomplete hint -->
                    aria-describedby="username-help" <!-- Accessibility -->
                    >
                

Live Form Demo

Form Validation

                    /* CSS Validation Styling */
                    .form-input:valid {
                    border-color: #48bb78;
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8
                    8'%3e%3cpath fill='%2348bb78' d='m6.564.75-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8
                    2.193z'/%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 0.75rem center;
                    background-size: 1rem;
                    padding-right: 2.5rem;
                    }

                    .form-input:invalid:not(:placeholder-shown) {
                    border-color: #f56565;
                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12
                    12' width='12' height='12' fill='none' stroke='%23f56565'%3e%3ccircle cx='6' cy='6'
                    r='4.5'/%3e%3cpath d='m5.8 4.6 2.4 2.4m0-2.4L5.8 7'/%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 0.75rem center;
                    background-size: 1rem;
                    padding-right: 2.5rem;
                    }
                

🔧 HTML Input Types

Text-Based Inputs

Text Input

Email Input

Password Input

Search Input

URL Input

Telephone Input

                    <!-- Text-based input types -->
                    <input type="text" placeholder="Any text">
                    <input type="email" placeholder="email@example.com">
                    <input type="password" placeholder="Enter password">
                    <input type="search" placeholder="Search...">
                    <input type="url" placeholder="https://example.com">
                    <input type="tel" placeholder="+1 (555) 123-4567">
                

Number & Date Inputs

Number Input

Range Input: 50

Date Input

Time Input

DateTime-Local Input

Month Input

Week Input

                    <!-- Number and date input types -->
                    <input type="number" min="1" max="100" step="1">
                    <input type="range" min="0" max="100" value="50">
                    <input type="date">
                    <input type="time">
                    <input type="datetime-local">
                    <input type="month">
                    <input type="week">
                

Selection & File Inputs

File Input

Color Input

Checkbox Options

Option 1 Option 2 Option 3

Radio Button Selection

Choice 1 Choice 2 Choice 3

Select Dropdown

                    <!-- Selection and file input types -->
                    <input type="file" accept=".jpg,.png,.pdf">
                    <input type="color" value="#667eea">

                    <!-- Checkbox -->
                    <input type="checkbox" name="options" value="option1">
                    <input type="checkbox" name="options" value="option2">

                    <!-- Radio buttons -->
                    <input type="radio" name="choice" value="choice1">
                    <input type="radio" name="choice" value="choice2">

                    <!-- Select dropdown -->
                    <select name="selection">
                    <option value="option1">Option 1</option>
                    <option value="option2">Option 2</option>
                    </select>
                

Modern HTML5 Input Features

                    <!-- Input with datalist for autocomplete -->
                    <input type="text" list="browsers" placeholder="Choose or type browser">
                    <datalist id="browsers">
                    <option value="Chrome">
                    <option value="Firefox">
                    <option value="Safari">
                    <option value="Edge">
                    </datalist>

                    <!-- Input with pattern validation -->
                    <input type="text"
                    pattern="[A-Za-z]{3,}"
                    title="Must contain at least 3 letters"
                    placeholder="Username (letters only)">

                    <!-- Input with custom validation message -->
                    <input type="email"
                    required
                    oninvalid="this.setCustomValidity('Please enter a valid email address')"
                    oninput="this.setCustomValidity('')">
                

💪 Hands-On Exercises

Exercise 1: Typography Setup (15 minutes)

Task: Create a webpage with custom typography using Google Fonts.

Requirements:

Choose and implement 2 Google Fonts (one for headings, one for body text)
Create a typography scale with at least 4 different sizes
Implement proper line heights and letter spacing
Make it responsive for mobile devices

Deliverable: HTML file with embedded CSS showing your typography system

Exercise 2: Figma Inspection Practice (10 minutes)

Task: Use Figma to extract design specifications.

Steps:

Visit Figma Community and find a form design template
Inspect 3 different elements and note their properties
Extract: colors, fonts, spacing, and border radius values
Create a CSS snippet with the extracted values

Deliverable: CSS code block with commented design tokens

Exercise 3: Contact Form Creation (20 minutes)

Task: Build a complete contact form with validation.

Requirements:

Include: name, email, phone, subject, message fields
Use appropriate input types for each field
Add proper labels and placeholder text
Implement HTML5 validation
Style with CSS (use the provided design system)
Make it accessible (ARIA labels, keyboard navigation)

Bonus: Add custom validation styling for valid/invalid states

Exercise 4: Advanced Input Types (15 minutes)

Task: Create a comprehensive form using modern input types.

Include these input types:

Date picker for appointment scheduling
Range slider for rating (1-10)
Color picker for theme selection
File upload for document attachment
Datalist for autocomplete suggestions
Pattern validation for custom formats

Challenge: Make the form interactive with JavaScript (display selected values)

🏠 Homework Assignment

Project: Build a Multi-Step Registration Form

Deadline: Complete within 1 week

Phase 1: Design Research (Day 1-2)

Find 3 well-designed registration forms online
Analyze their typography, color schemes, and user experience
Create a mood board in Figma or save screenshots
Choose your color palette and font combinations

Phase 2: HTML Structure (Day 3-4)

Create a 3-step registration form:
- Step 1: Personal Info (name, email, phone, birthdate)
- Step 2: Account Details (username, password, confirm password)
- Step 3: Preferences (profile picture, interests checkboxes, newsletter subscription)
Use semantic HTML with proper form structure
Include progress indicator
Add comprehensive validation attributes

Phase 3: CSS Styling (Day 5-6)

Implement your chosen typography system
Create a cohesive color scheme
Design smooth transitions between steps
Add hover and focus states for all interactive elements
Make it fully responsive (mobile-first approach)
Include loading states and success/error messaging

Phase 4: Enhancement & Testing (Day 7)

Test form functionality across different browsers
Verify accessibility with keyboard navigation
Optimize for performance (font loading, image optimization)
Add micro-interactions and polish details

Submission Requirements:

Complete HTML/CSS code files
Screenshots of your design research
Brief documentation explaining your design choices
List of challenges faced and how you solved them

Evaluation Criteria:

Code quality and organization (25%)
Visual design and typography (25%)
User experience and accessibility (25%)
Technical implementation and validation (25%)

Helpful Resources for Homework:

Typography: Google Fonts, Adobe Fonts
Colors: Coolors.co, Adobe Color
Icons: Feather Icons, Heroicons
Inspiration: Dribbble, Behance, UI Movement
Testing: BrowserStack, Can I Use
Accessibility: WAVE Web Accessibility Evaluator

📚 Additional Learning Materials

Next Session Preview

Coming Up: Advanced CSS Layout & Responsive Design

CSS Grid and Flexbox mastery
Responsive design patterns
CSS animations and transitions
Modern CSS features (Container queries, CSS custom properties)

🎯 Session Summary & Key Takeaways

What You've Learned Today:

✅ How to implement custom fonts using Google Fonts and local files
✅ Typography best practices for web design
✅ Figma basics and design-to-code workflow
✅ HTML form structure and essential attributes
✅ Comprehensive overview of HTML5 input types
✅ Form validation techniques and accessibility considerations
✅ CSS styling for modern, user-friendly forms

Next Steps

Continue Your Learning Journey

Complete the homework assignment, practice with real projects, and prepare for our next advanced session on CSS layout techniques.

Great job completing this intensive session! 🚀

Remember: Practice makes perfect. Start building, keep experimenting, and don't hesitate to ask questions!

📚 Session Overview & Timeline

Introduction & Setup

Typography & Font Management

Figma Design Tool Introduction

Break & Q&A

HTML Forms & Attributes

Input Types & Wrap-up

📖 Key Definitions & Concepts

HTML Form

Form Attributes

Input Types

Web Typography

Google Fonts

Figma

Form Validation

Accessibility (a11y)

🎨 Typography & Font Management

Adding Custom Fonts

1. Google Fonts (Recommended)

2. Local Font Files

Font Properties & Styling

Live Typography Demo

Main Heading (700 weight)

Sub Heading (600 weight)

Font Loading Best Practices

🎯 Figma Design Tool Basics

What is Figma?

Key Figma Features for Developers

Design-to-Code Workflow

Getting CSS from Figma

Common Figma-to-CSS Translations

Figma Resources for This Session

📝 HTML Forms & Attributes

Basic Form Structure

Essential Form Attributes

Form Element Attributes

Input Attributes

Live Form Demo

Form Validation

🔧 HTML Input Types

Text-Based Inputs

Number & Date Inputs

Selection & File Inputs

Modern HTML5 Input Features

💪 Hands-On Exercises

Exercise 1: Typography Setup (15 minutes)

Exercise 2: Figma Inspection Practice (10 minutes)

Exercise 3: Contact Form Creation (20 minutes)

Exercise 4: Advanced Input Types (15 minutes)

🏠 Homework Assignment

Project: Build a Multi-Step Registration Form

Phase 1: Design Research (Day 1-2)

Phase 2: HTML Structure (Day 3-4)

Phase 3: CSS Styling (Day 5-6)

Phase 4: Enhancement & Testing (Day 7)

Submission Requirements:

Evaluation Criteria:

Helpful Resources for Homework:

📚 Additional Learning Materials

Recommended Reading

Next Session Preview

Coming Up: Advanced CSS Layout & Responsive Design

🎯 Session Summary & Key Takeaways

What You've Learned Today:

Continue Your Learning Journey