Frontend Web Developer
As a Pro member of codedamn, you will be able to follow along this timeline, complete tasks, and monitor your developer journey through this learning path. We're continuously updating and adding content to this learning path, so you never get behind!
27 hours+ of core lectures
6+ supplementary courses to make you an expert
20+ hands-on-keyboard practice modules consisting of hundreds of hours of practice
Hands-on follow the video courses through codedamn playgrounds
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 plans