HTML — Intermediate

Advanced Forms & Validation

• Use semantic form elements: <label>, <fieldset>, <legend>
• Built-in validation with attributes: required, type="email", minlength
• Custom validation with JavaScript to enhance UX.

<form>
  <label>Email<input type="email" required></label>
  <input type="submit" value="Send">
</form>

/* JS: custom validation example */
const form = document.querySelector('form');
form.addEventListener('submit', function(e){
  if(!form.checkValidity()){
    e.preventDefault();
    alert('Please fill the form correctly.');
  }
});

Media Elements

Use audio, video and iframes responsibly with fallback and controls.

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Semantic HTML in Depth

• Choose elements that describe meaning: <article>, <aside>, <nav>.
• Semantic markup improves accessibility and SEO.

Accessibility Basics (ARIA intro)

ARIA attributes help when semantic HTML is not enough. Use roles and labels sparingly.

<button aria-expanded="false" aria-controls="panel1">Toggle</button>
<div id="panel1" role="region" aria-hidden="true">Hidden content</div>

CSS — Intermediate

Flexbox — Complete Guide

Flexbox simplifies 1D layouts. Key properties:

• display:flex on container
• flex-direction, justify-content, align-items
• Flexible items with flex

.row{display:flex;gap:12px}
.item{flex:1}
/* center */
.center{display:flex;justify-content:center;align-items:center}

CSS Grid — Complete Guide

Grid is for 2D layouts. Define rows and columns, place items.

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hero{grid-column:1/-1}

Responsive Design (Media Queries)

Use mobile-first approach and breakpoints.

@media (min-width: 720px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
}

Transitions & Animations

Smooth UI with CSS transitions and keyframes.

.btn{transition:transform .2s ease, box-shadow .2s ease}
@keyframes glow{from{box-shadow:0 0 0 rgba(0,240,255,0)}to{box-shadow:0 0 24px rgba(0,240,255,0.12)}}

Modern Layout Patterns

• Hero + feature grid
• Sidebar + content
• Card-based listings

JavaScript — Basics (Intermediate)

Variables: var, let, const

// var: function-scoped (avoid)
var x = 1;
// let: block-scoped mutable
let y = 2;
// const: block-scoped constant
const z = 3;

Data Types

• Number, String, Boolean
• Object, Array, null, undefined

typeof 42 // 'number'
Array.isArray([]) // true

Functions

function sum(a,b){return a+b}
const multiply = (a,b) => a*b

Events

document.querySelector('.btn').addEventListener('click', function(e){
  console.log('clicked');
});

DOM Manipulation

const el = document.createElement('div');
el.textContent = 'Hello';
document.body.appendChild(el);
// query and update
document.querySelector('.title').textContent = 'Updated';

Intermediate Projects

Responsive Website

Combine layout, responsive images and navigation to build a multi-section site.

Product Landing Page

Hero, features, pricing cards and CTA. Focus on clear hierarchy and responsive design.

Advanced JavaScript

ES6+ Features

• Block scoping with let and const
• Template literals, default parameters
• Destructuring and spread syntax

// template literal
const name = 'Krishna';
console.log(`Hello ${name}`);

// destructuring
const obj = {a:1,b:2};
const {a,b} = obj;

Arrow Functions

const add = (x, y) => x + y;
// concise and lexical this
const obj2 = {value: 10, getValue(){return this.value}};

Destructuring

const [first, ...rest] = [1,2,3];
const {name:username} = {name:'Krishna'};

Modules (Concept)

Organize code with ES modules using export and import. In static sites, use type="module" in script tag.

// util.js
export function sum(a,b){return a+b}

// main.js
import {sum} from './util.js';

Async / Await & Promises

// Promise
fetch('/data.json').then(r => r.json()).then(data => console.log(data));

// async/await
async function load(){
  try{
    const res = await fetch('/data.json');
    const data = await res.json();
    return data;
  } catch(err){
    console.error('Failed', err);
  }
}

Error Handling

Use try/catch for async code and validate user input to avoid runtime errors.

try{
  riskyOperation();
} catch(err){
  console.error(err);
}

Advanced Topics

API Concepts (fetch, JSON)

Interact with remote data using fetch() and JSON serialization.

const response = await fetch('https://api.example.com/data');
const json = await response.json();

Website Performance Optimization

• Minimize render-blocking resources
• Use image optimization and lazy loading
• Cache assets and use efficient CSS selectors

Basic Web Security Concepts

• Use HTTPS
• Sanitize user input to avoid XSS
• Understand CORS and same-origin policy

SEO Fundamentals

Use semantic HTML, meta tags, descriptive titles and accessible content to improve search visibility.

Deployment (GitHub Pages / Netlify)

Publish static sites using GitHub Pages or Netlify in a few steps: push to repo and configure site settings.

Advanced Projects

Portfolio Website

Showcase projects, use optimized images, good typography and clear navigation.

Multi-page Website

Use consistent layout, navigation and shared components across pages.

Real-world Project Guide

1. Plan features and architecture
2. Implement core functionality iteratively
3. Test, optimize and deploy