info.kshrd@gmail.com
(+855) 86 244 123
MediaFAQApply Now

Web Development

This course covers the foundational technologies used in web development. You will learn HTML for structuring content, CSS for styling, and JavaScript for creating interactive elements. The course also introduces modern frameworks like React and Next.js for building complex web applications, and it includes hands-on mini-projects to apply what you've learned.

Objective

  • Learn the basics of HTML, CSS, and JavaScript.
  • Understand advanced CSS concepts like Flexbox.
  • Build interactive web applications using React and Next.js.
  • Implement responsive design and modern web development practices.
  • Create mini-projects to solidify web development skills.

Curriculum

HTML Basic

  • Introduction
  • Elements
  • Attributes
  • Headings
  • Paragraphs
  • Formatting
  • Link
  • Head
  • Images
  • Lists
  • Tables
  • Blocks
  • Layout
  • Forms
  • Iframes
  • Colors
  • Entities
  • Charset

CSS Basic

  • Introduction
  • Syntax
  • How to add CSS
  • Id & Class
  • Selector
  • Fonts
  • Links
  • Lists
  • Tables
  • Backgrounds
  • Text
  • Box Model
  • Border
  • Margin
  • Padding

CSS Advanced

  • Display
  • Floating
  • Positioning
  • Align
  • Pseudo-class
  • Pseudo-element
  • Media Types

Flexbox

  • Flexbox Overview
  • Basic & Terminology
  • Container
  • Display
  • Flex-direction
  • Flex-wrap
  • Flex-flow
  • Justify-content
  • Align-items
  • Align-content
  • Items
  • Order
  • Flex-grow
  • Flex-shrink
  • Flex-basis
  • Flex Shorthand
  • Align-self

CSS Framework Concept

  • Tailwind Overview
  • Tailwind Class

Mini-Project 1

  • News
  • E-commerce
  • Booking Service
  • Blog
  • Tourism

JavaScript Basic

  • Introduction
  • How To
  • Statements
  • HTML DOM
  • Comments
  • Variables
  • Data Types
  • Number
  • Boolean
  • BigInt
  • Math
  • Condition
  • Switch
  • Loop and Iteration
  • Errors
  • Function
  • Operators
  • Popup Alert

JavaScript Advanced

  • Object
  • String
  • Date
  • Timing
  • Array
  • RegExp
  • Validation

New Features (ECMAScript 2021)

  • Rest Parameter
  • Spread Operator
  • String Interpolation
  • Object Destructuring
  • Async Keyword
  • Top level await
  • Nullish coalescing operator

JSON

  • Introduction
  • Syntax
  • How to use JSON

Mini-Project 2

  • Topic will be provided

Introduction to React and Overview

  • Overview
  • Environment Setup
  • Editor setup and plugins
  • Hello World project
  • JSX and Components

List and Key

  • List and Keys Usage

React Hooks

  • Introduction to Hooks
  • Using the State Hooks
  • Using useEffect Hooks

Component Life Cycle

  • Mounting
  • Updating
  • Unmounting

State & Props

  • State
  • Props

Introduction to NextJS and Overview

  • Overview
  • Environment Setup

CSS Modules

  • App Router
  • Overview of App Router
  • Basic concept of App Router

App Router (Continued)

  • Advanced concept of App Router

Data Fetching

  • Introduction to Data Fetching in NextJS

Data Fetching (Continued)

  • Practice data fetching
  • What is Revalidating Data?
  • Data Fetching Patterns
  • Client-Side Data Fetching

Data Fetching (Continued Again)

  • Understanding Server Actions
  • Form and Mutations

Next Authentications

  • Overview Next-Auth
  • Login with credentials
  • Login with Google
  • Middleware

Mini-Project 3

  • Topic will be provided