Web Development Lab Exercises

A comprehensive collection of web development examples

Lab 1: HTML Basics

Aspiring web developer

Welcome to my website! This is a simple paragraph created to test HTML formatting. You can use it to check text alignment, font styles , or paragraph spacing. Feel free to edit this text and experiment with different HTML tags!

Google Logo

Google Logo

Find Online Resources

Ordered List

  1. First item
  2. Second item
  3. Third item
    • Subitem 1
    • Subitem 2

Definition List

HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JS
JavaScript

Lab 2: Tables, Forms & Media

Students Summary Table

Students Summary
Name ID Courses Status
Moustafa 1519 web cyber Active
Adham 2076 networking database
Tarke 7036 Python Disable
End of Table

Sample Form

Scientific Notation Examples

Test for chemical equation: H2 + O2 → H2O

Test for geometric sequence: area of square is X2

Text Formatting Examples

What is the HTML?

NEVER GIVE UP
"NEVER GIVE UP AGAIN"

Code Example

name = input("Enter your name: ")
print("Hello", name)

Lab 6: CSS Box Model & Flexbox

Box Model Example

Scrollable Content Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate turpis non arcu venenatis, a blandit nibh dapibus. Phasellus at urna nec elit fringilla vestibulum. Integer in massa eget nunc pharetra condimentum. Suspendisse potenti. Morbi mattis, mauris non tempor faucibus, lectus lorem fermentum lectus, id gravida nibh nunc nec odio. Sed eget sem id felis consectetur varius. Vivamus id consequat massa. Curabitur ac mauris vitae mauris porttitor ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac odio id augue lacinia sodales. Sed vel mi nec lorem facilisis gravida.

Additional content to demonstrate scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.

Flexbox Example

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Lab 8 & 9: JavaScript Fundamentals

JavaScript Output

Interactive JavaScript

Temperature Checker

Day of the Week

HTML Entities Examples

Copyright: ©

Less than: <

Greater than: >

Ampersand: &

Registered trademark: ®