Full Stack Learning Blog — HTML, CSS, JavaScript, Python, Java
Full Stack Learning Blog
A compact, practical roadmap: HTML, CSS, JavaScript, Java, Python — tips, tricks & mini projects.
Kickoff — Tools & Setup
- VS Code + extensions: Prettier, Live Server, Python, Java
- Node.js (LTS)
- Git + GitHub
- JDK 21+
- Python 3.11+
Daily habit: 2 Pomodoro cycles, commit daily.
HTML — The Foundation
<!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><h1>Hello, World!</h1></header>
<main><p>This is my first blog post.</p></main>
</body>
</html>CSS — Layout & Design
:root{--brand:#4f46e5}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}JavaScript — Interaction
<button id="like">👍 Like</button>
<strong id="count">0</strong>
<script type="module">
let c = 0;
const $count = document.getElementById('count');
document.getElementById('like').addEventListener('click', () => {
c++; $count.textContent = c;
});
</script>Python — Backend & APIs
from fastapi import FastAPI
from pydantic import BaseModel
app = FastAPI()
class Post(BaseModel):
title: str
body: str
DB = []
@app.get('/posts')
async def all_posts():
return DB
@app.post('/posts')
async def create_post(p: Post):
DB.append(p.model_dump())
return {'ok': True}Java — Strong Typing & Enterprise
public class Greeter {
private final String name;
public Greeter(String name){ this.name = name; }
public String greet(){ return "Hello " + name + "!"; }
}Projects — Build & Deploy
- Dev Blog — HTML/CSS/JS
- Notes API — Python FastAPI
- Task Manager — Java Spring Boot
- Weather Dashboard — Fetch API + Charts
Comments
Post a Comment