Learn web development with mentorship, hands-on practice, and courses.
Use codedamn to learn by practicing on the go, and take help from people along the way.
The Perfect Practice Environment
Change the way you practice with exercises and building small projects with codedamn's shiny hands-on interface.
Click to experience live demo
Learning Path
Become Frontend Web Developer
Our frontend web developer learning path covers everything you need to know for becoming a great frontend developer in 2021, including industry-specific questions and hands-on practice exercises along with HD video courses from great creators.
Learn moreInternet Fundamentals
7 lectures
HTML/CSS Fundamentals
37 lectures • 19 hands-on exercises • 5 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Introduction00:45 codedamn HTML Playground04:57 First HTML Page03:04 Comments in HTML02:20 HTML Tags03:12 Heading Tags03:19 Exercise lab for heading05:00 Exercise lab for heading05:00 Paragraph (p) tag02:37 Exercise lab for paragraph05:00 Anchor (a) tag06:01 Exercise lab for anchor tag05:00 Button (button) tag04:19 Bold (b) tag01:16 Image (img) tag05:14 Video (video) tag04:30 Audio (audio) tag01:39 Input (input) tag03:47 Exercise lab for input05:00 Exercise lab for input05:00 Select (select) tag04:02 Table (table) tag03:18 HTML basics done!01:54 CSS Introduction03:02 CSS Hello World06:04 CSS Tag Selector05:53 Exercise lab for CSS selector05:00 CSS Properties02:51 CSS Classes04:45 Exercise lab for CSS class05:00 Exercise lab for CSS class05:00 CSS IDs04:27 Exercise lab for CSS IDs05:00 Exercise lab for CSS IDs05:00 Proper HTML document05:08 Exercise lab for creating doctype05:00 Exercise lab for creating head and body05:00 Inline vs Block element05:57 Types of stylesheets04:32 Introduction to Flexbox Layout07:08 flex05:51 Exercise lab for flexbox05:00 flex06:20 Exercise lab for flexbox05:00 justify04:46 Exercise lab for flexbox05:00 Exercise lab for flex-direction05:00 Exercise lab for flex-direction05:00 Exercise lab for flex-direction05:00 CSS Colors08:17 Center a DIV03:33 Positioning in CSS - absolute and relative09:03 Positioning in CSS - fixed05:39 Positioning in CSS - sticky04:00 CSS backgrounds04:29 Simple Google Homepage Project21:45
Advanced HTML5/CSS3 Concepts
26 lectures • 5 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Introduction01:06 What is HTML5?06:23 Meta tags in HTML07:15 Logical v/s Physical tags06:40 Conditional comments03:56 HTML entities04:12 Form inputs11:21 iframes in HTML06:10 CSS Specificity08:02 CSS Box Model07:38 CSS Variables07:18 CSS calc function07:10 CSS Pseudo selectors15:56 Pseudo elements09:44 'attr' property03:12 Advanced CSS Selectors10:37 Attribute Selectors07:14 Introduction00:50 Responsive v/s Non Responsive Websites02:42 Convering non-responsive website to responsive09:45 More on converting website to responsive05:41 More media query rules03:32 Media print02:37 CSS Animation basics08:41 Maintaining final animation state01:25 Sudden animation changes03:35
JavaScript Essentials
40 lectures • 14 hands-on exercises • 3 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
What is JavaScript?01:33 Text Editors01:46 Setting up development environment03:19 How to use JavaScript?02:15 Variables01:59 var/let vs const01:09 Exercise lab for variables05:00 Exercise lab for variables05:00 Exercise lab for variables05:00 Data Types04:32 Functions01:55 console.log and Chrome DevTools01:56 Function Parameters03:08 return statement04:15 Scoping09:33 alert/prompt/confirm04:58 Objects06:27 Exercise lab for objects05:00 Exercise lab for objects05:00 Exercise lab for objects05:00 Exercise lab for objects05:00 Arrays05:38 if-else03:35 Exercise lab for if-else05:00 switch-case05:14 Exercise lab for switch-case05:00 Math operators04:18 Increment Decrement07:08 Exercise lab for increment05:00 Exercise lab for decrement05:00 Logical Operators07:09 Bitwise Operators04:53 for Loop05:53 Exercise lab for loop05:00 while Loop01:48 Exercise lab while loop05:00 do-while Loop01:49 Exercise lab do-while05:00 break vs continue vs return03:41 Arrays.map02:45 Array.filter02:13 Array.forEach02:12 Array.reduce04:24 Array.indexOf, Array.includes, Array.find03:56 == v/S ===07:41 JS DOM03:20 document/window Object05:36 getElementById03:53 More ways to traverse06:03 setTimeout and setInterval03:02 clearTimeout and clearInterval03:17 Event Handlers04:00 Error Handling04:33 Closing Series00:55
Supplementary Courses:
Advanced Practical JavaScript
38 lectures • 10 hands-on exercises • 3 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Welcome to the course00:50 How to get unstuck01:35 Introduction05:43 .then06:33 Exercise for .then05:00 .catch03:41 Exercise lab for .catch05:00 Nesting Promises07:53 Nesting catch06:07 Converting callback to promises08:30 Creating a mini-promise-based calculator API05:00 Async-Await Introduction09:57 Error Handling04:25 Promise.all08:49 Exercise lab for Promise.all05:00 Promise.allSettled04:15 Exercise lab for Promise.allSettled05:00 Introduction08:01 getPrototypeOf03:07 Object.create01:32 setPrototypeOf03:00 Functional prototype chain08:21 Exercise lab for functional prototype05:00 delete and hasOwnProperty06:19 Exercise lab for delete05:00 Introduction00:58 What is DOM really?04:00 innerText vs innerHTML03:49 Exercise lab for innerText and innerHTML05:00 createElement04:09 append and prepend02:37 Removing elements02:44 addEventListener05:24 Exercise lab for addEventListener05:00 Event capturing and bubbling07:51 Third argument boolean01:57 removeEventListener04:58 Exercise lab for removeEventListener05:00 event.preventDefault05:38 Equality check in JS03:35 sameValueZero Algorithm03:25 Iterating objects05:44 Introduction to iterators07:52 Example on iterators07:44 Objects passed by reference04:31 Generator functions06:05 JSON parsing09:02 Strict mode04:07
Supplementary Courses:
Using DevTools
32 lectures
Concepts you'll learn:
Introduction01:20 Setup01:23 Prerequisites for the course00:53 Hello DevTools02:29 Console 10104:02 Trying out different consoles09:18 Sources tab 10103:58 Setting up debugger07:03 One more way to setup debugger02:29 Event based debugger05:11 Stepping in debugger04:38 Breakpoints04:13 Debugger01:28 Call Stack03:35 Patch code on runtime06:05 Snippets05:33 Networks Tab00:41 Networks tab overview03:32 Exploring Networks Tab06:27 Filters04:24 Columns in Network Tab02:09 Throttling04:29 Copy request payload02:29 Elements Tab00:44 Elements tab overview03:14 Inspecting a node03:13 Operations with a node03:05 Special variable02:03 Manipulate styles05:11 Copying CSS Path02:20 Color Picker04:19 Next steps01:38
Version Control System
29 lectures
Concepts you'll learn:
Introducing Git01:34 Using the terminal and installing Git02:48 Preparing Git settings04:10 Making our first project directory04:35 Creating (initializing) a repository03:27 Adding a file to our project03:24 Making our first commit04:36 Working with an existing project05:26 What is a branch03:32 Making a commit on a branch03:54 Making a second branch03:19 Switching branches04:30 Merging a branch04:52 Introducing vi/vim02:28 Doing a three-way merge05:06 Merging with conflicts04:52 Introducing remote repositories01:59 Connecting to Github using SSH06:53 Adding a remote repository03:01 Pushing to a remote repository03:33 Updating a remote repository02:41 Working with others06:06 Fetching changes03:16 Working at the same time as others06:54 Rebasing Part 106:10 Rebasing Part 204:34 Exercise: Working with a local repository and branches04:56 Exercise: Merging04:02 Exercise: Remote repositories and working with others04:31
NPM
27 lectures
Concepts you'll learn:
Introduction to series01:15 What is NPM? How is it related to Node?05:28 NPM vs Yarn04:32 Installing NPM and Node on your system04:37 Why Node versioning is required?04:09 Managing multiple Node versions using `n`06:45 What is an NPM module?04:36 How does NPM install module?04:50 package.json file03:30 Exploring package.json02:17 Installing module01:42 Removing module01:15 Local v/s global modules05:32 Intro to NPM dependencies00:22 Semantic Versioning05:17 All about package-lock.json09:28 Semantic versioning in package.json03:57 dependencies02:20 devDependencies04:25 peerDependencies05:05 NPM scripts intro00:14 What are NPM scripts06:43 All about NPX06:50 Misc intro00:15 Changing global packages installation location02:58 NPM cache and purging02:36 Finishing course00:56
React Fundamentals
29 lectures • 4 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Introduction00:59 First Program04:42 First Program Explained02:26 File structure05:48 Components05:16 JSX Expressions05:51 DOM Events03:58 Stateful Components - useState06:43 How JSX expressions work?03:28 Forms07:25 Conditional Rendering05:29 Props05:34 props.children03:41 Lists06:00 Routing (react-router v5)07:27 Link04:07 Parameterized Routing04:17 useRef Hook03:38 useEffect Hook09:34 Intro to Context API04:47 useContext05:03 Starting a new React project03:35 Material UI with React03:55 Material Header07:57 Integrating Movie API12:33 Adding CSS03:59 Adding Material Loader03:46 Search support for movies09:15 Type Declarations03:16
Supplementary Courses:
CSS and better UI
1 lecture
Concepts you'll learn:
Testing Code
32 lectures
Concepts you'll learn:
Introduction02:05 How it works04:49 Course outcome and pre-reqs03:01 Installing Node02:09 Installing Cypress06:33 Exploring Cypress Runner04:34 Hello World with Cypress06:02 Headless Hello World02:16 Folder Structure Explained04:54 cy.contains07:04 cy.get08:44 cy.should06:34 cy.viewport02:53 Verifying login page UI04:41 Verifying Page URLs04:37 Console logs with Cypress03:54 Keyboard typing with cypress04:54 Loggin in with Cy03:26 beforeEach02:44 Setting localStorage03:42 codedamn Playground Testing01:05 Checking for element existance09:22 Command level timeouts02:43 Testing "New File" feature06:58 Testing "Rename File" feature05:17 Verifying if data is synchronized03:16 Cypress Architecture10:00 Cypress Hooks05:53 Creating Custom Commands07:45 Intercepting requests in Cypress07:21 Aliasing Commands in Cypress02:40 The end | Where to go next01:53
Unlock full access
codedamn membership gives you unlimited access to all content in this learning path, and on the whole site.
- Hands-on-keyboard practice projects
- Certification of completion
- WhatsApp mentorship support
- Unlimited access to full platform
OR
View all plansLearning Path
Become Backend Developer
Our backend developer learning path covers everything you need to know - HTTP, servers, databases, frontends, deployments, and more.
Learn moreInternet Fundamentals
7 lectures
HTML/CSS Fundamentals
37 lectures • 19 hands-on exercises • 3 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Introduction00:45 codedamn HTML Playground04:57 First HTML Page03:04 Comments in HTML02:20 HTML Tags03:12 Heading Tags03:19 Exercise lab for heading05:00 Exercise lab for heading05:00 Paragraph (p) tag02:37 Exercise lab for paragraph05:00 Anchor (a) tag06:01 Exercise lab for anchor tag05:00 Button (button) tag04:19 Bold (b) tag01:16 Image (img) tag05:14 Video (video) tag04:30 Audio (audio) tag01:39 Input (input) tag03:47 Exercise lab for input05:00 Exercise lab for input05:00 Select (select) tag04:02 Table (table) tag03:18 HTML basics done!01:54 CSS Introduction03:02 CSS Hello World06:04 CSS Tag Selector05:53 Exercise lab for CSS selector05:00 CSS Properties02:51 CSS Classes04:45 Exercise lab for CSS class05:00 Exercise lab for CSS class05:00 CSS IDs04:27 Exercise lab for CSS IDs05:00 Exercise lab for CSS IDs05:00 Proper HTML document05:08 Exercise lab for creating doctype05:00 Exercise lab for creating head and body05:00 Inline vs Block element05:57 Types of stylesheets04:32 Introduction to Flexbox Layout07:08 flex05:51 Exercise lab for flexbox05:00 flex06:20 Exercise lab for flexbox05:00 justify04:46 Exercise lab for flexbox05:00 Exercise lab for flex-direction05:00 Exercise lab for flex-direction05:00 Exercise lab for flex-direction05:00 CSS Colors08:17 Center a DIV03:33 Positioning in CSS - absolute and relative09:03 Positioning in CSS - fixed05:39 Positioning in CSS - sticky04:00 CSS backgrounds04:29 Simple Google Homepage Project21:45
Supplementary Courses:
Frontend JavaScript Essentials
40 lectures • 14 hands-on exercises • 3 projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
What is JavaScript?01:33 Text Editors01:46 Setting up development environment03:19 How to use JavaScript?02:15 Variables01:59 var/let vs const01:09 Exercise lab for variables05:00 Exercise lab for variables05:00 Exercise lab for variables05:00 Data Types04:32 Functions01:55 console.log and Chrome DevTools01:56 Function Parameters03:08 return statement04:15 Scoping09:33 alert/prompt/confirm04:58 Objects06:27 Exercise lab for objects05:00 Exercise lab for objects05:00 Exercise lab for objects05:00 Exercise lab for objects05:00 Arrays05:38 if-else03:35 Exercise lab for if-else05:00 switch-case05:14 Exercise lab for switch-case05:00 Math operators04:18 Increment Decrement07:08 Exercise lab for increment05:00 Exercise lab for decrement05:00 Logical Operators07:09 Bitwise Operators04:53 for Loop05:53 Exercise lab for loop05:00 while Loop01:48 Exercise lab while loop05:00 do-while Loop01:49 Exercise lab do-while05:00 break vs continue vs return03:41 Arrays.map02:45 Array.filter02:13 Array.forEach02:12 Array.reduce04:24 Array.indexOf, Array.includes, Array.find03:56 == v/S ===07:41 JS DOM03:20 document/window Object05:36 getElementById03:53 More ways to traverse06:03 setTimeout and setInterval03:02 clearTimeout and clearInterval03:17 Event Handlers04:00 Error Handling04:33 Closing Series00:55
Supplementary Courses:
Using DevTools
32 lectures
Concepts you'll learn:
Introduction01:20 Setup01:23 Prerequisites for the course00:53 Hello DevTools02:29 Console 10104:02 Trying out different consoles09:18 Sources tab 10103:58 Setting up debugger07:03 One more way to setup debugger02:29 Event based debugger05:11 Stepping in debugger04:38 Breakpoints04:13 Debugger01:28 Call Stack03:35 Patch code on runtime06:05 Snippets05:33 Networks Tab00:41 Networks tab overview03:32 Exploring Networks Tab06:27 Filters04:24 Columns in Network Tab02:09 Throttling04:29 Copy request payload02:29 Elements Tab00:44 Elements tab overview03:14 Inspecting a node03:13 Operations with a node03:05 Special variable02:03 Manipulate styles05:11 Copying CSS Path02:20 Color Picker04:19 Next steps01:38
Linux Fundamentals
33 lectures
Concepts you'll learn:
Introduction to course04:35 What is Linux?06:06 Your First Commands05:19 Different Shells in Linux04:15 Navigating directories - cd05:51 List files - ls05:38 Read files - cat02:19 Determine your OS02:19 Read long files - less01:42 Create directory - mkdir04:17 Remove - rm02:53 copy - cp02:58 Move - mv02:29 Find binary path - which03:51 Introduction to nano05:08 Copy Pasting03:48 Search in nano03:49 Shell Scripting Intro02:22 Running simple bash script03:12 Variables in bash02:16 Arguments in Bash02:39 Reading from stdin02:43 Building username-password interface03:37 if-else in bash03:19 Logical operators and exit status06:25 If-else again02:24 For-loop in bash06:26 Functions in bash07:10 Package Managers03:02 .bashrc File03:16 top and htop commands03:08 Kill any process with kill command02:25 Outro01:01
Node.js Fundamentals
16 lectures
Concepts you'll learn:
Introduction to course01:06 Hello World04:12 Deno vs Node.js02:39 Pre-req for Node.js (JavaScript)01:49 CommonJS Introduction08:37 Writing code in CommonJS standard09:41 ECMAScript Modules Introduction03:16 Learning ES Modules - Part 107:49 Learning ES Modules - Part 204:17 Learning ES Modules - Part 307:05 Creating Raw HTTP Server in Node.js05:40 Introduction to Express03:34 HTTP Methods05:43 Sending files to browser02:36 Static assets04:03 Receiving data from frontend06:36
MongoDB + Node.js
12 lectures • 1 project
Concepts you'll learn:
Hands-On-Keyboard Projects:
MongoDB + JWT + Node.js
10 lectures
Version Control System
29 lectures
Concepts you'll learn:
Introducing Git01:34 Using the terminal and installing Git02:48 Preparing Git settings04:10 Making our first project directory04:35 Creating (initializing) a repository03:27 Adding a file to our project03:24 Making our first commit04:36 Working with an existing project05:26 What is a branch03:32 Making a commit on a branch03:54 Making a second branch03:19 Switching branches04:30 Merging a branch04:52 Introducing vi/vim02:28 Doing a three-way merge05:06 Merging with conflicts04:52 Introducing remote repositories01:59 Connecting to Github using SSH06:53 Adding a remote repository03:01 Pushing to a remote repository03:33 Updating a remote repository02:41 Working with others06:06 Fetching changes03:16 Working at the same time as others06:54 Rebasing Part 106:10 Rebasing Part 204:34 Exercise: Working with a local repository and branches04:56 Exercise: Merging04:02 Exercise: Remote repositories and working with others04:31
GraphQL
1 lecture
Concepts you'll learn:
Caching with Redis
22 lectures • 8 hands-on exercises
Concepts you'll learn:
Course Introduction01:26 What is Redis exactly?03:39 Why choose Redis?06:52 Redis Hello World03:22 Ping Pong05:00 Common operations with Redis10:05 Exercise lab for setting keys05:00 Exercise lab for INCR DECR05:00 Exercise lab for FLUSHALL05:00 Exercise lab for deleting keys05:00 Redis key name convention02:38 Expiring keys in Redis04:38 How expiring keys work in Redis03:49 Connecting Redis with Node.js06:41 Exercise lab for connecting node with redis05:00 Introduction to project10:00 Invalidating Cache06:00 Refreshing data in background03:57 API Caching Lab05:00 Introduction to project02:02 Rate limiting by IP Address05:01 Setting TTL on rate limit04:02 Creating Express.js middleware for rate limiting07:34 Rate limiting API lab05:00 Atomicity and Single Threaded07:15 Key patterns03:26 Lists02:08 More on lists06:51 Sets04:12 Transactions06:26
CI/CD
1 lecture
Concepts you'll learn:
Unlock full access
codedamn membership gives you unlimited access to all content in this learning path, and on the whole site.
- Hands-on-keyboard practice projects
- Certification of completion
- WhatsApp mentorship support
- Unlimited access to full platform
OR
View all plans