Coding Class Penang

For the past 2 years, we have seeen so much success in our students who took up private classes from Code Genius. Here are some of the common courses in Code Genius (The Best Coding Class in Penang)

What is a front end developer?
What is the backend developer?

Fortunately, at code genius we helps adults and students to transition from what they learn in school into real life application. Our coding class will Front End and Back End Development.

Front End Developer

The software developer that loves front end are those who are creative. These are the people that are able to work with Graphic Developer to make things animate and presentable. He must be a person who is keen in UX UI

How long does it take to master HTML, CSS, Javascript:

It takes around 28 classes to complete the concepts (Eash class is 1 hour)
To be well verse in the usage of UI and UX you need an extra 2 months of hands on project to get used to the command and syntax.
Even with the usage of AI, there will still be learning curve as we will me editting some of the components to fit into our design.

Weekly plan with focus areas, key topics, and a concrete project for each week.
Task	Focus	Key Topics	Project / Practice
1	How the Web Works	Internet & HTTP, DNS, domains & hosting, browsers & rendering	Create a diagram/notes: “What happens when I type a URL and press Enter?”
2	HTML Essentials	Elements, attributes, structure, links, images, lists	Build a simple homepage with navbar, sections, and footer.
3	Semantic HTML & Forms	Semantic tags, forms & validation, accessibility, SEO basics	Make a contact form (labels, required, pattern) and an accessible article page.
4	CSS Fundamentals	Selectors, box model, display/position, typography, colors	Style Week-2/3 pages: consistent spacing, fonts, and color scale.
5	Layouts: Flexbox & Grid	Flexbox, Grid, reusable layout patterns	Recreate 3 common layouts (pricing grid, dashboard cards, blog list).
6	Responsive Design & Utilities	Media queries, mobile-first, Tailwind/utility classes, Sass (optional)	Make your site fully responsive; add a dark/light mode toggle.
7	JavaScript I	Syntax, data types, arrays/objects, functions, control flow, ES modules	Build a calculator and a tip-splitter with input validation.
8	JavaScript II: DOM	DOM selection/manipulation, events, state, localStorage	Interactive to-do list with persistence and filters.
9	Async JS & APIs	Fetch API, JSON, promises, async/await, error handling, CORS (concepts)	Weather/Movies app using a public API; loading & error states.
10	Git & Packages	Git basics/branches, GitHub flow, npm/yarn/pnpm	Put all projects on GitHub; write clear READMEs; open 1–2 PRs.
11	React Basics	Components, props, state, effects, lists/keys, forms	Convert your to-do or weather app to React (Vite + React).
12	Routing & Next.js Intro	React Router, SPA vs. SSR/SSG, Next.js pages/routes, data fetching	Mini blog in Next.js with dynamic routes and markdown/JSON posts.
13	Build Tools & Quality	Vite/Webpack, ESLint, Prettier, env vars, basic CI	Add lint/format scripts; optimise images; split bundles; Lighthouse pass.
14	Testing & Debugging	Jest/Vitest, React Testing Library, Cypress/Playwright (basics), DevTools	Write unit tests for 3 components; 2 happy-path E2E flows.
15	Auth & Web Security	HTTPS, CSP, CORS (concept), JWT vs. sessions, OWASP Top 10 (overview)	Protect a mock “dashboard” route; handle logged-in/out UI states.
16	Portfolio & Deployment	Vercel/Netlify, custom domain, SEO polish, performance metrics (Lighthouse)	Deploy portfolio with 4–5 projects, write case studies, and apply to jobs.
—	Stretch Goals (Optional)	TypeScript, GraphQL, PWAs, Web Components, mobile/desktop apps (RN/Electron/Tauri)	Upgrade one React project to TypeScript; add offline support with a Service Worker.

BackEnd Developer

The software developer that loves to deal with Data and API shoudl work in back end. Most of the time you will be developing tools that connect with 3rd part or update external API. Backend Developer will be the person that does a lot of logic when dealing with data. He will be the person that provides backend security and interact with database such as Create, Read, Edit and Delete operation.

How long does it take to master Back End (PHP and Node):

It takes around 20 classes to complete the concepts (Eash class is 1 hour)
To be well verse in the back end development, you will need to have hands on with 3rd party API or developed own API
To be well verse in the interacting with database. Depending on database whether NoSQl or SQL database
With the usage of AI, backend development can be easier

Weekly focus, key topics, and a concrete project to apply your knowledge.
Task	Focus	Key Topics	Project / Practice
1	Foundations: Internet & HTTP	How the internet works, HTTP, DNS, domains, hosting, browsers	Write notes/diagram: request–response lifecycle; build a static “About API” page.
2	Pick a Language & Runtime	JavaScript (Node.js) or Python/Java/C#/Go/Rust/PHP; package managers	Set up dev environment; create a CLI “hello” + script to parse JSON.
3	Version Control	Git basics, branching, GitHub/GitLab/Bitbucket (repo hosting)	Initialize repo; feature branch workflow; meaningful commits & README.
4	Build REST APIs	REST, JSON APIs, OpenAPI/Swagger, HATEOAS; (alt) GraphQL, gRPC, SOAP	CRUD “Notes API” with validation & OpenAPI docs; Postman collection.
5	Relational Databases	PostgreSQL/MySQL, SQL, normalization, ACID, transactions, ORMs, N+1	Connect API to Postgres; migration script; solve an N+1 with eager loading.
6	Indexes & Scaling DBs	Indexes, profiling, replication, sharding, CAP theorem, failure modes	Add indexes; benchmark slow query; read-replica simulation on dev.
7	NoSQL & Caching	MongoDB/Document DBs, Key-Value (Redis), Memcached; when to use	Add Redis caching layer to Notes API; cache invalidation strategy.
8	Auth & Security	JWT, OAuth2, cookies vs. tokens, HTTPS, SSL/TLS, CORS, CSP, OWASP risks, hashing (bcrypt/scrypt/SHA)	Secure endpoints (JWT); password hashing; CORS policy; basic rate limit.
9	Web Servers & Caching	Nginx/Apache/Caddy, CDN vs server-side caching, reverse proxy	Run behind Nginx reverse proxy; add response caching for list endpoints.
10	Realtime & Messaging	WebSockets, Server-Sent Events, polling; message brokers (RabbitMQ/Kafka)	Add WebSocket notifications to Notes; publish/subscribe with a broker.
11	Architecture Patterns	Monolith, microservices, serverless, SOA, service mesh, 12-Factor	Extract “notifications” into a microservice; document boundaries & contracts.
12	Design & Domain	GoF patterns, DDD, CQRS, Event Sourcing, TDD (intro)	Refactor core entities with DDD; add an event log and replay script.
13	Testing & CI/CD	Unit, integration, functional testing; CI pipelines	Write unit + integration tests; set up CI to run tests on every PR.
14	Containers & Orchestration	Docker, docker-compose, Kubernetes basics; LXC vs VMs	Containerize API + DB + Redis; compose file; optional k8s local deploy.
15	Observability & Resilience	Metrics, logging, tracing, telemetry, instrumentation; throttling, backpressure, load shedding, circuit breaker	Add request metrics & structured logs; implement circuit breaker on an upstream call.
16	Search & Deployment	Elasticsearch/Solr; deploy strategies; migrations	Index notes in Elasticsearch; run zero-downtime deploy; DB migration checklist.
—	Stretch Goals (Optional)	Graph DBs (Neo4j), time-series DBs (Influx/TimeScale), serverless patterns, API security best practices	Prototype one extra backend (e.g., GraphQL gateway) and write a short design doc.