EDUCOMMEX— Learn to Code from Beginner to Pro

Your Beginner → Pro Roadmap

Follow this sequence. Each topic includes short theory, an example, and a “Try it” button that loads into the Playground.

Foundations

1) Web Basics

What browsers do, how HTML structures content, CSS styles it, and JavaScript adds behavior.

HTML

2) Semantic HTML

Headings, lists, links, images, forms, accessibility, structure.

CSS

3) Modern CSS

Selectors, cascade, Flexbox, Grid, responsive design, variables, transitions.

4) JavaScript

Syntax, functions, arrays/objects, DOM, events, fetch API, modules.

Algorithms

5) Problem Solving

Loops, recursion, Big‑O intuition, common coding interview tasks.

Projects

6) Portfolio Projects

Build real apps: a Todo app, Quiz app, Weather app, and a Landing page.

HTML — Structure the page

HTML gives meaning to content. Use <header>, <main>, <section>, and friends to help both users and search engines.

Example: Basic Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Page</title>
</head>
<body>
  <header>Welcome!</header>
  <main>
    <h1>Hello World</h1>
    <p>This is my first web page.</p>
  </main>
</body>
</html>

Forms: Collect input

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

`, "", "")'>Try it

CSS — Make it look great

Use Flexbox and Grid to build responsive layouts. Add transitions for polish.

Example: Card layout (Flexbox)

.cards { display:flex; gap:12px; flex-wrap:wrap; }
.card { flex: 1 1 220px; padding:14px; border-radius:10px; background:#fff; }

Transitions

button { transition: transform .15s ease; }
button:hover { transform: translateY(-2px); }

JavaScript — Make it work

Learn the language of the browser. Practice with functions, arrays, DOM, and APIs.

Example: Sum an array

function sum(arr){
  return arr.reduce((a,b)=>a+b,0);
}
console.log(sum([2,3,4])); // 9

DOM: Toggle theme

document.querySelector('#toggle')
  .addEventListener('click', ()=>{
    document.documentElement.classList.toggle('dark');
  })

Mini Projects (build your portfolio)

Clone these in the Playground, then customize and save.

Todo App

LocalStorage‑backed todos with add/remove/complete.

Quiz App

Multiple choice with score and review screen.

Weather (mock)

Fetch sample JSON and render a forecast.

Practice Challenges (auto‑graded)

Write a function in the editor and click Test. Results are shown below. (All challenges are pure JavaScript.)

1) reverseString(str)

Return the reversed string. Example: "abc" → "cba"

function reverseString(str){
  // your code here
}

2) isPrime(n)

Return true if n is prime; otherwise false.

function isPrime(n){
  // your code here
}

3) sumArray(arr)

Return the sum of a number array. Example: [1,2,3] → 6

function sumArray(arr){
  // your code here
}

Cheat‑Sheet

HTML

<a href="/">Link</a>
<img src="x.jpg" alt="desc">
<input type="text" placeholder="Your name">

CSS

display: flex; gap: 12px;
@media (max-width: 600px) { ... }
transition: transform .15s ease;

JS

const el = document.querySelector('#id')
arr.map(x => x*2)
fetch('/data.json').then(r => r.json())

CodePro Academy

Your Beginner → Pro Roadmap

1) Web Basics

2) Semantic HTML

3) Modern CSS

4) JavaScript

5) Problem Solving

6) Portfolio Projects

HTML — Structure the page

Example: Basic Page

Forms: Collect input

CSS — Make it look great

Example: Card layout (Flexbox)

Transitions

JavaScript — Make it work

Example: Sum an array

DOM: Toggle theme

Mini Projects (build your portfolio)

Todo App

Quiz App

Weather (mock)

Live Playground

Practice Challenges (auto‑graded)

1) reverseString(str)

2) isPrime(n)

3) sumArray(arr)

Cheat‑Sheet

HTML

CSS

JS

Contact & Community

Quiz

Weather (Mock)