Master Web Development in 10 Days

Learn HTML, CSS, and JavaScript with hands-on challenges and real-world projects

9 Days
30+ Challenges
100% Hands-on
index.html



    My Website


    

Hello World!

Welcome to web development

10-Day Learning Path

01

HTML Fundamentals

Master the building blocks of web development with HTML structure, elements, and semantic markup

Structure Elements Semantic
02

HTML Forms & Media

Create interactive forms and integrate rich media content into your web pages

Forms Inputs Media
03

CSS Basics

Transform your HTML with beautiful styling using CSS selectors, properties, and values

Selectors Properties Typography
04

CSS Layout

Master modern layout techniques with Flexbox and CSS Grid for responsive designs

Flexbox Grid Responsive
05

Box Model & Styling

Master the CSS box model, background styling, hover effects, and responsive design fundamentals

Box Model Backgrounds Hover Effects
06

JavaScript Basics

Learn JavaScript fundamentals: variables, data types, math operations, and output methods

Variables Data Types Math
07

Conditions, Logic & Functions

Master conditional statements, logical operators, and function creation for dynamic applications

Conditions Logic Functions
08

Arrays & Loops

Master data collections and iteration to process multiple items efficiently

Arrays Loops Iteration
Final

Final Project

Apply all your skills to build a complete, production-ready web application

Project Complete Deploy

Learning Resources

Day 1: HTML Fundamentals

Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page semantically and originally included cues for the appearance of the document.

Basic HTML Structure

Basic HTML Template



    Page Title


    

This is a heading

This is a paragraph.

Key Concepts

  • DOCTYPE Declaration: Tells the browser this is an HTML5 document
  • : The root element of an HTML page
  • : Contains meta information about the document
  • :</strong> Specifies a title for the document</li> <li><strong><body>:</strong> Contains the visible page content</li> </ul> <h4>Common HTML Elements</h4> <div class="elements-grid"> <div class="element-card"> <h5>Headings</h5> <p><h1> to <h6></p> <small>Used for titles and subtitles</small> </div> <div class="element-card"> <h5>Paragraphs</h5> <p><p></p> <small>Used for text content</small> </div> <div class="element-card"> <h5>Links</h5> <p><a></p> <small>Creates hyperlinks</small> </div> <div class="element-card"> <h5>Images</h5> <p><img></p> <small>Displays images</small> </div> </div> <div class="lesson-navigation"> <button class="nav-btn" onclick="previousLesson()"> <i class="fas fa-chevron-left"></i> Previous </button> <button class="nav-btn primary" onclick="startChallenge()"> Start Challenge <i class="fas fa-chevron-right"></i> </button> </div> </div> </div> <div id="challenge-content" class="lesson-panel"> <div class="lesson-challenge"> <div class="challenge-header"> <h3 id="challenge-title">HTML Challenge 1: Basic Structure</h3> <div class="challenge-meta"> <span class="difficulty">Beginner</span> <span class="time">5 min</span> </div> </div> <div class="challenge-description"> <p id="challenge-description">Create a basic HTML structure with a title, heading, and paragraph.</p> </div> <div class="code-editor"> <div class="editor-header"> <span>Code Editor</span> <button class="run-button" onclick="runCode()"> <i class="fas fa-play"></i> Run Code </button> </div> <div id="monaco-editor-lesson" class="monaco-editor-container"></div> </div> <div class="output-panel"> <div class="output-header"> <span>Output</span> <button class="reset-button" onclick="resetCode()"> <i class="fas fa-undo"></i> Reset </button> </div> <div id="output-frame"></div> </div> <div class="challenge-navigation"> <button class="nav-button" onclick="previousChallenge()"> <i class="fas fa-chevron-left"></i> Previous </button> <button class="nav-button" onclick="nextChallenge()"> Next <i class="fas fa-chevron-right"></i> </button> </div> </div> </div> </div> </div> </div> </div> <!-- Gaming Section --> <section id="gaming" class="gaming-section"> <div class="container"> <div class="section-header"> <h2 class="section-title"><i class="fas fa-gamepad"></i> Interactive Learning Games</h2> <p class="section-subtitle">Learn web development through fun, interactive games and challenges</p> </div> <div class="games-grid"> <div class="game-card" onclick="window.location.href='html-games.html'"> <div class="game-icon"> <i class="fas fa-code"></i> </div> <div class="game-content"> <h3>HTML Tag Master</h3> <p>Master HTML tags through interactive challenges and tag matching games</p> <div class="game-features"> <span class="feature">Tag Matching</span> <span class="feature">Structure Building</span> <span class="feature">Code Puzzles</span> </div> <div class="game-stats"> <div class="stat"> <i class="fas fa-star"></i> <span>5 Levels</span> </div> <div class="stat"> <i class="fas fa-clock"></i> <span>15 min</span> </div> </div> </div> <div class="game-arrow"> <i class="fas fa-play"></i> </div> </div> <div class="game-card" onclick="window.location.href='css-games.html'"> <div class="game-icon"> <i class="fas fa-palette"></i> </div> <div class="game-content"> <h3>CSS Styling Quest</h3> <p>Learn CSS properties, selectors, and layouts through visual design challenges</p> <div class="game-features"> <span class="feature">Style Matching</span> <span class="feature">Layout Puzzles</span> <span class="feature">Color Challenges</span> </div> <div class="game-stats"> <div class="stat"> <i class="fas fa-star"></i> <span>6 Levels</span> </div> <div class="stat"> <i class="fas fa-clock"></i> <span>20 min</span> </div> </div> </div> <div class="game-arrow"> <i class="fas fa-play"></i> </div> </div> <div class="game-card" onclick="window.location.href='javascript-games.html'"> <div class="game-icon"> <i class="fas fa-gamepad"></i> </div> <div class="game-content"> <h3>JavaScript Code Runner</h3> <p>Solve JavaScript puzzles, debug code, and build mini-games with real coding</p> <div class="game-features"> <span class="feature">Code Debugging</span> <span class="feature">Logic Puzzles</span> <span class="feature">Mini Games</span> </div> <div class="game-stats"> <div class="stat"> <i class="fas fa-star"></i> <span>8 Levels</span> </div> <div class="stat"> <i class="fas fa-clock"></i> <span>25 min</span> </div> </div> </div> <div class="game-arrow"> <i class="fas fa-play"></i> </div> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>WebDev LMS</h3> <p>Master web development in 10 days with hands-on challenges and real-world projects.</p> </div> <div class="footer-section"> <h4>Quick Links</h4> <ul> <li><a href="#home">Home</a></li> <li><a href="#curriculum">Curriculum</a></li> <li><a href="#challenges">Challenges</a></li> <li><a href="#gaming">Games</a></li> <li><a href="#resources">Resources</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 WebDev LMS. All rights reserved.</p> </div> </div> </footer> <script src="script.js"></script> <script> // Initialize Monaco Editor when page loads require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.44.0/min/vs' } }); require(['vs/editor/editor.main'], function() { console.log('Monaco Editor loaded successfully'); // Initialize Monaco Editors after a short delay to ensure DOM is ready setTimeout(() => { initializeMainMonacoEditor(); }, 100); }); </script> </body> </html>