Inside Uncodemy's Web Development Course: What You Learn

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header><h1>Asha's Portfolio</h1></header>
  <main>
    <section aria-labelledby="projects">
      <h2 id="projects">Projects</h2>
      <ul class="cards">
        <li class="card"><h3>Weather app</h3><p>JavaScript and an API.</p></li>
        <li class="card"><h3>Task manager</h3><p>React with local storage.</p></li>
      </ul>
    </section>
  </main>
</body>
</html>

/* styles.css */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
header, main { padding: 1rem; }
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.card { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; }
@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

// Fetch posts from a public practice API and show titles
async function showPosts() {
  const list = document.querySelector('#posts');
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const posts = await res.json();
    list.innerHTML = '';
    posts.forEach(p => {
      const li = document.createElement('li');
      li.textContent = p.title;
      list.appendChild(li);
    });
  } catch (err) {
    list.textContent = 'Could not load posts: ' + err.message;
  }
}
document.addEventListener('DOMContentLoaded', showPosts);

// React 18: a task list with state
import { useState } from 'react';

export default function Tasks() {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState('');

  function addTask(e) {
    e.preventDefault();
    if (!text.trim()) return;
    setTasks(t => [...t, { id: Date.now(), title: text.trim(), done: false }]);
    setText('');
  }

  return (
    <form onSubmit={addTask}>
      <label>New task <input value={text} onChange={e => setText(e.target.value)} /></label>
      <button>Add</button>
      <ul>{tasks.map(t => <li key={t.id}>{t.title}</li>)}</ul>
    </form>
  );
}

// npm install express   Run: node server.js
const express = require('express');
const app = express();
app.use(express.json());

const notes = [];

app.get('/api/notes', (req, res) => res.json(notes));

app.post('/api/notes', (req, res) => {
  const text = String(req.body.text || '').trim();
  if (!text) return res.status(400).json({ error: 'text is required' });
  const note = { id: notes.length + 1, text };
  notes.push(note);
  res.status(201).json(note);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`listening on ${PORT}`));

Before deploying a project:

[ ] Secrets in environment variables, not in code
[ ] .env listed in .gitignore
[ ] Build and start commands documented
[ ] Database connection uses an env variable
[ ] Error responses do not leak stack traces
[ ] README with live link, screenshots and setup steps
[ ] Test the live site on a phone

1. Is there a current web development course, and can I see the official syllabus?
2. Which front-end framework is taught (e.g., React)?
3. Which back-end language and database are used?
4. How many projects are included, and are they deployed?
5. Is code reviewed by trainers?
6. What are the duration and batch timings?
7. What are the current fees and payment terms?

Project 1  Responsive portfolio site (HTML, CSS)
Project 2  Weather or news app using a public API (JavaScript)
Project 3  React task manager with filters
Project 4  Full stack notes app with login and database

Each: Git history, README, live link, mobile check

Module               Learned   Practised   Project
HTML                 [ ]       [ ]         [ ]
CSS and layout       [ ]       [ ]         [ ]
Responsive design    [ ]       [ ]         [ ]
JavaScript basics    [ ]       [ ]         [ ]
DOM, events, fetch   [ ]       [ ]         [ ]
React                [ ]       [ ]         [ ]
APIs and databases   [ ]       [ ]         [ ]
Auth and deployment  [ ]       [ ]         [ ]