From 705f6a8a2d23edae829c7f08852f1f52b4ea3569 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 11 Nov 2025 15:13:58 +0300 Subject: [PATCH] Added presentation and pingpong.html --- .DS_Store | Bin 0 -> 6148 bytes Advanced HTML.html | 1035 ++++++++++++++++++++++++++++++++++++++++++++ pingpong.html | 97 +++++ 3 files changed, 1132 insertions(+) create mode 100644 .DS_Store create mode 100644 Advanced HTML.html create mode 100644 pingpong.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a6fb36156e7d083404ede7b488ff99dfbb3b9e50 GIT binary patch literal 6148 zcmeHKPfrs;6rX`gyCAZZQV~P4Nv|la1|sobDK!Q)DWSC%`BQhhOWClyv)SEJ5J`IQ zq(?u1AHjI@VoXeoegQq1c=zN7@Zg(26>u@}B*g4XW`1wpy!U3`Z@N1jgb*&Y^c+Gm zLMQ=^Vyqv!V}#Dr7Lp!ei34Jm!$kx+sHwGmH{=}|A_gJ`P8$RC-Ay1Dne@E{{Pq57 z7SUktwdPu;A7rziaZhjTOkX@M#RuYR$_-*4KAJ*4HYpaxPe1YY{g;)!8{a@hhq3#b2|$M zyCTMUfgO%K9ARbvUvR=)`f%6nYeoL1O}Q3RM8}0y`YR0uucZ NU^GNs#K1pg;3rt<^cMgC literal 0 HcmV?d00001 diff --git a/Advanced HTML.html b/Advanced HTML.html new file mode 100644 index 0000000..6b189ac --- /dev/null +++ b/Advanced HTML.html @@ -0,0 +1,1035 @@ + + + + + + Web Development Curriculum + + + +
+
+

Web Development Curriculum

+

Advanced HTML, CSS & Web Accessibility

+
+
+
+
+ +
+
+
1
+
Advanced HTML Structure
+
40 minutes
+

Master semantic HTML, forms, tables, and modern structural elements.

+
+ +
+
2
+
Advanced CSS Layouts
+
45 minutes
+

Explore Flexbox, Grid, and responsive design techniques.

+
+ +
+
3
+
Advanced CSS Effects
+
40 minutes
+

Learn animations, transforms, and modern visual effects.

+
+ +
+
4
+
Web Accessibility Fundamentals
+
45 minutes
+

Make websites usable for everyone with accessibility best practices.

+
+ +
+
5
+
Accessibility Implementation
+
40 minutes
+

Apply accessibility techniques to real projects and test for compliance.

+
+
+ +
+ +
+
+

Lesson 1: Advanced HTML Structure

+
Advanced HTML
+
+ +
+

Learning Objectives

+
    +
  • Understand and use semantic HTML5 elements
    • +
  • Create accessible forms with proper validation
    • +
  • Build complex table structures
    • +
  • Implement microdata for SEO
    • +
+
+ +
+ Semantic HTML provides meaning to web content, making it more accessible and improving SEO. +
+ +

Semantic HTML5 Elements

+

Modern HTML5 introduces elements that describe their meaning to browsers and developers:

+ +
+<header><!-- Site or section header -->
+<nav><!-- Navigation menu -->
+<main><!-- Primary content -->
+<article><!-- Self-contained content -->
+<section><!-- Thematic grouping -->
+<aside><!-- Side content -->
+<footer><!-- Site or section footer --> +
+ +
+
+
Header
+ +
+
+

Article Title

+

This is the main content area.

+
+ +
+
Footer
+
+
+ +

Advanced Forms

+

HTML5 introduced new input types and attributes for better user experience and validation:

+ +
+<form id="user-form">
+  <label for="email">Email:</label>
+  <input type="email" id="email" required>

+  <label for="birthdate">Birthdate:</label>
+  <input type="date" id="birthdate">

+  <label for="range">Volume:</label>
+  <input type="range" id="range" min="0" max="100">

+  <button type="submit">Submit</button>
+</form> +
+ +
+
+ + + + + + + + Hands-On Activity +
+

Create a Semantic Webpage

+

Build a simple webpage using at least 5 different semantic HTML5 elements. Include a header, navigation, main content area with articles, and a footer.

+
+ +
+ Pro Tip: Always use the most specific semantic element available. This improves accessibility and helps search engines understand your content. +
+
+ + +
+
+

Lesson 2: Advanced CSS Layouts

+
Advanced CSS
+
+ +
+

Learning Objectives

+
    +
  • Master CSS Flexbox for 1D layouts
    • +
  • Implement CSS Grid for 2D layouts
    • +
  • Create responsive designs with media queries
    • +
  • Use modern layout techniques effectively
    • +
+
+ +
+ CSS Flexbox is designed for one-dimensional layouts, while CSS Grid excels at two-dimensional layouts. +
+ +
+
+

Flexbox Fundamentals

+

Flexbox makes it easy to design flexible responsive layout structures.

+ +
+/* Container properties */
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}

+/* Item properties */
+.item {
+  flex: 1;
+  align-self: flex-start;
+} +
+
+ +
+

CSS Grid Basics

+

Grid is the most powerful layout system available in CSS.

+ +
+/* Container properties */
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header header header"
+    "main main sidebar"
+    "footer footer footer";
+} +
+
+
+ +
+
+
+
Grid Item 1
+
Grid Item 2
+
Grid Item 3
+
+ +
+
Flex Item 1
+
Flex Item 2
+
+
+
+ +

Responsive Design with Media Queries

+

Media queries allow you to apply CSS rules based on device characteristics.

+ +
+/* Mobile-first approach */
+.container {
+  padding: 10px;
+}

+/* Tablet */
+@media (min-width: 768px) {
+  .container {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+}

+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+} +
+ +
+
+ + + + + + + + Hands-On Activity +
+

Build a Responsive Layout

+

Create a webpage that uses Flexbox for a navigation bar and CSS Grid for the main content area. Make it responsive with media queries for mobile, tablet, and desktop views.

+
+ +
+ Pro Tip: Start with mobile styles first, then use min-width media queries to progressively enhance the layout for larger screens (mobile-first approach). +
+
+ + + + + +
+
+

Lesson 3: Advanced CSS Effects

+
Advanced CSS 2
+
+ +
+

Learning Objectives

+
    +
  • Create smooth CSS animations and transitions
    • +
  • Apply 2D and 3D transforms to elements
    • +
  • Use advanced visual effects like gradients and shadows
    • +
  • Implement modern CSS features like custom properties
    • +
+
+ +
+ CSS Transforms and Animations can create engaging user experiences without JavaScript. +
+ +

CSS Transitions and Animations

+

Transitions allow property changes to occur smoothly over time, while animations provide more control over intermediate steps.

+ +
+/* Transition example */
+.button {
+  background: #3498db;
+  transition: background 0.3s ease, transform 0.2s;
+}

+.button:hover {
+  background: #2980b9;
+  transform: scale(1.05);
+}

+/* Animation example */
+@keyframes slideIn {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}

+.slide-element {
+  animation: slideIn 0.5s ease-out;
+} +
+ +

CSS Custom Properties (Variables)

+

Custom properties allow you to store and reuse values throughout your CSS.

+ +
+/* Define custom properties */
+:root {
+  --primary-color: #3498db;
+  --spacing-unit: 1rem;
+  --border-radius: 8px;
+}

+/* Use custom properties */
+.card {
+  background: white;
+  padding: var(--spacing-unit);
+  border-radius: var(--border-radius);
+  border: 2px solid var(--primary-color);
+} +
+ +
+
+ + + + + + + + Hands-On Activity +
+

Create an Animated Interface

+

Build a card component that uses CSS transitions for hover effects and a simple animation when the page loads. Use CSS custom properties to make the design easily customizable.

+
+
+ + +
+
+

Lesson 4: Web Accessibility Fundamentals

+
Web Accessibility
+
+ +
+

Learning Objectives

+
    +
  • Understand the importance of web accessibility
    • +
  • Learn WCAG guidelines and principles
    • +
  • Implement proper semantic structure for screen readers
    • +
  • Create keyboard-navigable interfaces
    • +
+
+ +
+ Web Accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with the web. +
+ +

WCAG Principles (POUR)

+

The Web Content Accessibility Guidelines are built on four principles:

+ +
+
+

Perceivable

+

Information and UI components must be presentable to users in ways they can perceive.

+
    +
  • Text alternatives for non-text content
    • +
  • Captions and other alternatives for multimedia
    • +
  • Content that can be presented in different ways
    • +
  • Easy-to-see and -hear content
    • +
+
+ +
+

Operable

+

UI components and navigation must be operable by all users.

+
    +
  • Keyboard accessibility
    • +
  • Enough time to read and use content
    • +
  • Content that does not cause seizures
    • +
  • Easy navigation
    • +
+
+
+ +
+
+

Understandable

+

Information and operation of UI must be understandable.

+
    +
  • Readable and predictable text
    • +
  • Input assistance for forms
    • +
  • Consistent navigation
    • +
+
+ +
+

Robust

+

Content must be robust enough to work with current and future user tools.

+
    +
  • Compatible with assistive technologies
    • +
  • Valid and well-structured HTML
    • +
+
+
+ +

Accessible HTML Practices

+

Proper HTML structure is the foundation of accessibility:

+ +
+<!-- Use semantic elements -->
+<nav aria-label="Main navigation">
+  <ul>
+    <li><a href="#">Home</a></li>
+    <li><a href="#">About</a></li>
+  </ul>
+</nav>

+<!-- Provide text alternatives -->
+<img src="chart.jpg" alt="Bar chart showing sales growth from 2018 to 2022">

+<!-- Use proper form labels -->
+<label for="username">Username:</label>
+<input type="text" id="username" name="username"> +
+ +
+
+ + + + + + + + Hands-On Activity +
+

Audit and Improve Accessibility

+

Take an existing webpage (or create a simple one) and identify at least 5 accessibility issues. Then fix those issues using proper semantic HTML, ARIA attributes, and accessibility best practices.

+
+
+ + +
+
+

Lesson 5: Accessibility Implementation

+
Web Accessibility
+
+ +
+

Learning Objectives

+
    +
  • Use ARIA attributes to enhance accessibility
    • +
  • Implement keyboard navigation and focus management
    • +
  • Test websites for accessibility compliance
    • +
  • Apply accessibility techniques to complex components
    • +
+
+ +
+ ARIA (Accessible Rich Internet Applications) provides attributes to make web content more accessible when native HTML isn't sufficient. +
+ +

ARIA Attributes and Roles

+

ARIA helps communicate information about elements to assistive technologies:

+ +
+<!-- ARIA roles -->
+<div role="navigation" aria-label="Main menu">
+  <!-- navigation content -->
+</div>

+<!-- ARIA states and properties -->
+<button aria-expanded="false" aria-controls="dropdown1">
+  Menu
+</button>
+<ul id="dropdown1" aria-hidden="true">
+  <li><a href="#">Item 1</a></li>
+  <li><a href="#">Item 2</a></li>
+</ul>

+<!-- ARIA live regions -->
+<div aria-live="polite" aria-atomic="true">
+  <!-- Dynamic content will be announced -->
+</div> +
+ +

Keyboard Accessibility

+

Ensure all interactive elements can be operated with a keyboard:

+ +
+/* Focus styles */
+button:focus,
+a:focus,
+input:focus {
+  outline: 2px solid #3498db;
+  outline-offset: 2px;
+}

+/* Skip link for keyboard users */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  background: #e74c3c;
+  color: white;
+  padding: 8px;
+  z-index: 100;
+  text-decoration: none;
+}

+.skip-link:focus {
+  top: 6px;
+} +
+ +

Accessibility Testing

+

Several tools can help you test and improve accessibility:

+ +
    +
  • Automated tools: axe, WAVE, Lighthouse
    • +
  • Screen readers: NVDA (Windows), VoiceOver (Mac)
    • +
  • Manual testing: Keyboard navigation, color contrast checkers
    • +
+ +
+
+ + + + + + + + Hands-On Activity +
+

Build an Accessible Component

+

Create an accessible modal dialog or tab component that includes proper ARIA attributes, keyboard navigation, and focus management. Test it with a screen reader and keyboard-only navigation.

+
+ +
+ Pro Tip: Remember the first rule of ARIA - don't use ARIA if you can use native HTML elements with the required semantics and behavior. +
+
+
+ +
+ + +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/pingpong.html b/pingpong.html new file mode 100644 index 0000000..4c3774c --- /dev/null +++ b/pingpong.html @@ -0,0 +1,97 @@ + + + + + Simple Paddle Game + + + + +
+
+
+
+ + + + + \ No newline at end of file