Frontend Web Developer
As a 1337 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!
18 hours+ of core lectures
6+ supplementary courses to make you an expert
12+ hands-on-keyboard practice modules consisting of hundreds of hours of practice
Hands-on follow the video courses through codedamn playgrounds
HTML/CSS Fundamentals
38 lectures• 5 classroom projects
Concepts you'll learn:
Hands-On-Keyboard Projects:
Kickstart02:33 Introduction00:45 codedamn HTML Playground04:57 First HTML Page03:04 Comments in HTML02:20 HTML Tags03:12 Heading Tags03:19 Paragraph (p) tag02:37 Anchor (a) tag06:01 Button (button) tag04:19 Bold (b) tag01:16 Image (img) tag05:14 Video (video) tag04:30 Audio (audio) tag01:39 Input (input) tag03:47 Select (select) tag04:02 Table (table) tag03:18 HTML basics done!01:54 CSS Introduction03:02 CSS Hello World06:04 CSS Tag Selector05:53 CSS Properties02:51 CSS Classes04:45 CSS IDs04:27 Proper HTML document05:08 Inline vs Block element05:57 Types of stylesheets04:32 Introduction to Flexbox Layout07:08 flex05:51 flex06:20 justify04:46 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:
JavaScript Essentials
40 lectures• 3 classroom 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 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 Arrays05:38 if-else03:35 switch-case05:14 Math operators04:18 Increment Decrement07:08 Logical Operators07:09 Bitwise Operators04:53 for Loop05:53 while Loop01:48 do-while Loop01:49 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
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 classroom 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