Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
එක පැකේජ් එකයි මාසෙටම Unlimited Internet. තාමත් DATA CARD දාන්න සල්ලි වියදම් කරනවද? අඩුම මිලට අපෙන්.
sayuru bandara
Updated:
Tuesday at 12:30 PM
Ad icon
ඉන්ටර්නෙට් එකෙන් හරියටම සල්ලි හොයන්න සහ Success වෙන්න කැමතිද? 🚀 (E-Money & Success Stories)
siri sumana
Updated:
Saturday at 11:44 PM
Gemini AI PRO 18 months Offer
Hawaka
Updated:
May 27, 2026
Ad icon
koko account
DasunEranga
Updated:
May 27, 2026
Ad icon
koko account
DasunEranga
Updated:
May 27, 2026
Electronics
Vehicles
Property
Search
Reply to thread
Forums
Computers & Internet
Software Development
Web development Bootcamp
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="MihiCherub" data-source="post: 30482665" data-attributes="member: 238676"><p>මේ අවුරුද්දෙවත් මේක කරගන්න ඕනෙ. <img src="/styles/default/xenforo/smilies/default/sorry.gif" class="smilie" loading="lazy" alt=":sorry:" title="Sorry :sorry:" data-shortname=":sorry:" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite24" alt=":unsure:" title="Unsure :unsure:" loading="lazy" data-shortname=":unsure:" /></p><p></p><p>Road Map</p><ul> <li data-xf-list-type="ul"><strong>1. HTML Fundamentals</strong><ul> <li data-xf-list-type="ul"><strong>Basic Structure:</strong><ul> <li data-xf-list-type="ul"><!DOCTYPE html> declaration</li> <li data-xf-list-type="ul"><html>, <head>, <body> tags</li> </ul></li> <li data-xf-list-type="ul"><strong>Core Elements:</strong><ul> <li data-xf-list-type="ul">Headings (<h1> - <h6>)</li> <li data-xf-list-type="ul">Paragraphs (<p>)</li> <li data-xf-list-type="ul">Images (<img>)</li> <li data-xf-list-type="ul">Links (<a>)</li> <li data-xf-list-type="ul">Lists (<ul>, <ol>, <li>)</li> <li data-xf-list-type="ul">Tables (<table>, <tr>, <td>)</li> <li data-xf-list-type="ul">Forms (<form>, <input>, <textarea>, <select>)</li> </ul></li> <li data-xf-list-type="ul"><strong>Semantic HTML:</strong><ul> <li data-xf-list-type="ul">Using appropriate elements for meaning (e.g., <header>, <nav>, <main>, <footer>, <article>)</li> <li data-xf-list-type="ul">Accessibility considerations</li> </ul></li> </ul></li> <li data-xf-list-type="ul"><strong>2. CSS Fundamentals</strong><ul> <li data-xf-list-type="ul"><strong>Basic Syntax:</strong><ul> <li data-xf-list-type="ul">Selectors (element, class, ID)</li> <li data-xf-list-type="ul">Properties and values</li> <li data-xf-list-type="ul">Cascading and specificity</li> </ul></li> <li data-xf-list-type="ul"><strong>Box Model:</strong><ul> <li data-xf-list-type="ul">width, height, padding, border, margin</li> </ul></li> <li data-xf-list-type="ul"><strong>Typography:</strong><ul> <li data-xf-list-type="ul">font-family, font-size, font-weight, color</li> </ul></li> <li data-xf-list-type="ul"><strong>Color:</strong><ul> <li data-xf-list-type="ul">Color names, hex codes, RGB/RGBA</li> </ul></li> <li data-xf-list-type="ul"><strong>Backgrounds:</strong><ul> <li data-xf-list-type="ul">background-color, background-image, background-size, background-position</li> </ul></li> <li data-xf-list-type="ul"><strong>Positioning:</strong><ul> <li data-xf-list-type="ul">position property (static, relative, absolute, fixed)</li> </ul></li> <li data-xf-list-type="ul"><strong>Flexbox:</strong><ul> <li data-xf-list-type="ul">Creating flexible layouts with display: flex</li> </ul></li> <li data-xf-list-type="ul"><strong>Grid Layout:</strong><ul> <li data-xf-list-type="ul">Creating complex grid-based layouts</li> </ul></li> </ul></li> <li data-xf-list-type="ul"><strong>3. Basic JavaScript</strong><ul> <li data-xf-list-type="ul"><strong>Data Types:</strong><ul> <li data-xf-list-type="ul">Numbers, strings, booleans, arrays, objects</li> </ul></li> <li data-xf-list-type="ul"><strong>Variables:</strong><ul> <li data-xf-list-type="ul">Declaration and assignment</li> <li data-xf-list-type="ul">Scope (let, const)</li> </ul></li> <li data-xf-list-type="ul"><strong>Operators:</strong><ul> <li data-xf-list-type="ul">Arithmetic, comparison, logical</li> </ul></li> <li data-xf-list-type="ul"><strong>Control Flow:</strong><ul> <li data-xf-list-type="ul">if/else statements</li> <li data-xf-list-type="ul">switch statements</li> <li data-xf-list-type="ul">Loops (for, while, do...while)</li> </ul></li> <li data-xf-list-type="ul"><strong>Functions:</strong><ul> <li data-xf-list-type="ul">Defining and calling functions</li> <li data-xf-list-type="ul">Function arguments and return values</li> </ul></li> <li data-xf-list-type="ul"><strong>DOM Manipulation:</strong><ul> <li data-xf-list-type="ul">Selecting and manipulating HTML elements</li> <li data-xf-list-type="ul">Adding/removing elements and changing their content</li> <li data-xf-list-type="ul">Handling events (click, hover, etc.)</li> </ul></li> </ul></li> <li data-xf-list-type="ul"><strong>4. Git & GitHub Basics</strong><ul> <li data-xf-list-type="ul"><strong>Version Control Concepts:</strong><ul> <li data-xf-list-type="ul">Tracking changes to files</li> <li data-xf-list-type="ul">Committing changes</li> <li data-xf-list-type="ul">Creating and merging branches</li> </ul></li> <li data-xf-list-type="ul"><strong>GitHub:</strong><ul> <li data-xf-list-type="ul">Creating repositories</li> <li data-xf-list-type="ul">Pushing and pulling code to/from GitHub</li> <li data-xf-list-type="ul">Working with issues and pull requests</li> <li data-xf-list-type="ul">Collaborating with others on projects</li> </ul></li> </ul></li> <li data-xf-list-type="ul"><strong>5. CSS Preprocessors (Sass)</strong><ul> <li data-xf-list-type="ul"><strong>Variables:</strong> Storing and reusing CSS values</li> <li data-xf-list-type="ul"><strong>Nesting:</strong> Writing more organized and maintainable CSS</li> <li data-xf-list-type="ul"><strong>Mixins:</strong> Creating reusable blocks of CSS code</li> <li data-xf-list-type="ul"><strong>Functions:</strong> Defining custom functions for CSS values</li> <li data-xf-list-type="ul"><strong>Partials:</strong> Importing and organizing CSS code</li> </ul></li> <li data-xf-list-type="ul"><strong>6. Package Managers (npm/yarn)</strong><ul> <li data-xf-list-type="ul"><strong>Installation:</strong> Installing npm/yarn</li> <li data-xf-list-type="ul"><strong>Project Setup:</strong> Creating a package.json file</li> <li data-xf-list-type="ul"><strong>Installing Dependencies:</strong> Using install and uninstall commands</li> <li data-xf-list-type="ul"><strong>Managing Dependencies:</strong> Using update and save commands</li> <li data-xf-list-type="ul"><strong>Understanding node_modules</strong></li> </ul></li> <li data-xf-list-type="ul"><strong>7. CSS Frameworks (Tailwind CSS)</strong><ul> <li data-xf-list-type="ul"><strong>Installation and Setup:</strong> Installing Tailwind CSS</li> <li data-xf-list-type="ul"><strong>Utility Classes:</strong> Understanding and using Tailwind's built-in classes (e.g., spacing, typography, colors, layout)</li> <li data-xf-list-type="ul"><strong>Customization:</strong> Configuring and customizing Tailwind for your project</li> <li data-xf-list-type="ul"><strong>Responsive Design:</strong> Using Tailwind's responsive modifiers</li> <li data-xf-list-type="ul"><strong>Building Components:</strong> Creating reusable UI components with Tailwind</li> </ul></li> <li data-xf-list-type="ul"><strong>8. Intermediate JavaScript</strong><ul> <li data-xf-list-type="ul"><strong>Arrays:</strong><ul> <li data-xf-list-type="ul">Methods like map, filter, reduce</li> </ul></li> <li data-xf-list-type="ul"><strong>Objects:</strong><ul> <li data-xf-list-type="ul">Object-oriented programming concepts</li> </ul></li> <li data-xf-list-type="ul"><strong>Asynchronous JavaScript:</strong><ul> <li data-xf-list-type="ul">Promises, async/await</li> </ul></li> <li data-xf-list-type="ul"><strong>Event Handling:</strong><ul> <li data-xf-list-type="ul">Advanced event listeners and event bubbling/capturing</li> </ul></li> </ul></li> <li data-xf-list-type="ul"><strong>9. TypeScript</strong><ul> <li data-xf-list-type="ul"><strong>Type Annotations:</strong> Adding type information to variables and functions</li> <li data-xf-list-type="ul"><strong>Interfaces:</strong> Defining the structure of objects</li> <li data-xf-list-type="ul"><strong>Classes:</strong> Creating reusable objects with methods and properties</li> <li data-xf-list-type="ul"><strong>Generics:</strong> Writing reusable code that can work with different data types</li> </ul></li> <li data-xf-list-type="ul"><strong>10. React</strong><ul> <li data-xf-list-type="ul"><strong>Components:</strong> Creating reusable UI components with JSX</li> <li data-xf-list-type="ul"><strong>Props:</strong> Passing data between components</li> <li data-xf-list-type="ul"><strong>State:</strong> Managing the internal state of components</li> <li data-xf-list-type="ul"><strong>JSX:</strong> Writing HTML-like syntax within JavaScript</li> <li data-xf-list-type="ul"><strong>Rendering Lists and Conditional Logic</strong></li> <li data-xf-list-type="ul"><strong>Handling Events</strong></li> <li data-xf-list-type="ul"><strong>Component Lifecycle</strong></li> </ul></li> <li data-xf-list-type="ul"><strong>11. Automated Testing (Jest)</strong><ul> <li data-xf-list-type="ul"><strong>Writing Unit Tests:</strong> Creating tests for individual components and functions</li> <li data-xf-list-type="ul"><strong>Test-Driven Development (TDD):</strong> Writing tests before writing the actual code</li> <li data-xf-list-type="ul"><strong>Assertions:</strong> Using expect and matchers to verify the behavior of code</li> <li data-xf-list-type="ul"><strong>Running and Debugging Tests</strong></li> </ul></li> <li data-xf-list-type="ul"><strong>12. Meta Frameworks (Next.js)</strong><ul> <li data-xf-list-type="ul"><strong>Server-Side Rendering (SSR):</strong> Rendering pages on the server for better performance and SEO</li> <li data-xf-list-type="ul"><strong>Static Site Generation (SSG):</strong> Pre-rendering pages at build time</li> <li data-xf-list-type="ul"><strong>File System Routing:</strong> Creating routes based on the file system structure</li> <li data-xf-list-type="ul"><strong>API Routes:</strong> Building serverless APIs within your Next.js application</li> </ul></li> </ul></blockquote><p></p>
[QUOTE="MihiCherub, post: 30482665, member: 238676"] මේ අවුරුද්දෙවත් මේක කරගන්න ඕනෙ. :sorry: :unsure: Road Map [LIST] [*][B]1. HTML Fundamentals[/B] [LIST] [*][B]Basic Structure:[/B] [LIST] [*]<!DOCTYPE html> declaration [*]<html>, <head>, <body> tags [/LIST] [*][B]Core Elements:[/B] [LIST] [*]Headings (<h1> - <h6>) [*]Paragraphs (<p>) [*]Images (<img>) [*]Links (<a>) [*]Lists (<ul>, <ol>, <li>) [*]Tables (<table>, <tr>, <td>) [*]Forms (<form>, <input>, <textarea>, <select>) [/LIST] [*][B]Semantic HTML:[/B] [LIST] [*]Using appropriate elements for meaning (e.g., <header>, <nav>, <main>, <footer>, <article>) [*]Accessibility considerations [/LIST] [/LIST] [*][B]2. CSS Fundamentals[/B] [LIST] [*][B]Basic Syntax:[/B] [LIST] [*]Selectors (element, class, ID) [*]Properties and values [*]Cascading and specificity [/LIST] [*][B]Box Model:[/B] [LIST] [*]width, height, padding, border, margin [/LIST] [*][B]Typography:[/B] [LIST] [*]font-family, font-size, font-weight, color [/LIST] [*][B]Color:[/B] [LIST] [*]Color names, hex codes, RGB/RGBA [/LIST] [*][B]Backgrounds:[/B] [LIST] [*]background-color, background-image, background-size, background-position [/LIST] [*][B]Positioning:[/B] [LIST] [*]position property (static, relative, absolute, fixed) [/LIST] [*][B]Flexbox:[/B] [LIST] [*]Creating flexible layouts with display: flex [/LIST] [*][B]Grid Layout:[/B] [LIST] [*]Creating complex grid-based layouts [/LIST] [/LIST] [*][B]3. Basic JavaScript[/B] [LIST] [*][B]Data Types:[/B] [LIST] [*]Numbers, strings, booleans, arrays, objects [/LIST] [*][B]Variables:[/B] [LIST] [*]Declaration and assignment [*]Scope (let, const) [/LIST] [*][B]Operators:[/B] [LIST] [*]Arithmetic, comparison, logical [/LIST] [*][B]Control Flow:[/B] [LIST] [*]if/else statements [*]switch statements [*]Loops (for, while, do...while) [/LIST] [*][B]Functions:[/B] [LIST] [*]Defining and calling functions [*]Function arguments and return values [/LIST] [*][B]DOM Manipulation:[/B] [LIST] [*]Selecting and manipulating HTML elements [*]Adding/removing elements and changing their content [*]Handling events (click, hover, etc.) [/LIST] [/LIST] [*][B]4. Git & GitHub Basics[/B] [LIST] [*][B]Version Control Concepts:[/B] [LIST] [*]Tracking changes to files [*]Committing changes [*]Creating and merging branches [/LIST] [*][B]GitHub:[/B] [LIST] [*]Creating repositories [*]Pushing and pulling code to/from GitHub [*]Working with issues and pull requests [*]Collaborating with others on projects [/LIST] [/LIST] [*][B]5. CSS Preprocessors (Sass)[/B] [LIST] [*][B]Variables:[/B] Storing and reusing CSS values [*][B]Nesting:[/B] Writing more organized and maintainable CSS [*][B]Mixins:[/B] Creating reusable blocks of CSS code [*][B]Functions:[/B] Defining custom functions for CSS values [*][B]Partials:[/B] Importing and organizing CSS code [/LIST] [*][B]6. Package Managers (npm/yarn)[/B] [LIST] [*][B]Installation:[/B] Installing npm/yarn [*][B]Project Setup:[/B] Creating a package.json file [*][B]Installing Dependencies:[/B] Using install and uninstall commands [*][B]Managing Dependencies:[/B] Using update and save commands [*][B]Understanding node_modules[/B] [/LIST] [*][B]7. CSS Frameworks (Tailwind CSS)[/B] [LIST] [*][B]Installation and Setup:[/B] Installing Tailwind CSS [*][B]Utility Classes:[/B] Understanding and using Tailwind's built-in classes (e.g., spacing, typography, colors, layout) [*][B]Customization:[/B] Configuring and customizing Tailwind for your project [*][B]Responsive Design:[/B] Using Tailwind's responsive modifiers [*][B]Building Components:[/B] Creating reusable UI components with Tailwind [/LIST] [*][B]8. Intermediate JavaScript[/B] [LIST] [*][B]Arrays:[/B] [LIST] [*]Methods like map, filter, reduce [/LIST] [*][B]Objects:[/B] [LIST] [*]Object-oriented programming concepts [/LIST] [*][B]Asynchronous JavaScript:[/B] [LIST] [*]Promises, async/await [/LIST] [*][B]Event Handling:[/B] [LIST] [*]Advanced event listeners and event bubbling/capturing [/LIST] [/LIST] [*][B]9. TypeScript[/B] [LIST] [*][B]Type Annotations:[/B] Adding type information to variables and functions [*][B]Interfaces:[/B] Defining the structure of objects [*][B]Classes:[/B] Creating reusable objects with methods and properties [*][B]Generics:[/B] Writing reusable code that can work with different data types [/LIST] [*][B]10. React[/B] [LIST] [*][B]Components:[/B] Creating reusable UI components with JSX [*][B]Props:[/B] Passing data between components [*][B]State:[/B] Managing the internal state of components [*][B]JSX:[/B] Writing HTML-like syntax within JavaScript [*][B]Rendering Lists and Conditional Logic[/B] [*][B]Handling Events[/B] [*][B]Component Lifecycle[/B] [/LIST] [*][B]11. Automated Testing (Jest)[/B] [LIST] [*][B]Writing Unit Tests:[/B] Creating tests for individual components and functions [*][B]Test-Driven Development (TDD):[/B] Writing tests before writing the actual code [*][B]Assertions:[/B] Using expect and matchers to verify the behavior of code [*][B]Running and Debugging Tests[/B] [/LIST] [*][B]12. Meta Frameworks (Next.js)[/B] [LIST] [*][B]Server-Side Rendering (SSR):[/B] Rendering pages on the server for better performance and SEO [*][B]Static Site Generation (SSG):[/B] Pre-rendering pages at build time [*][B]File System Routing:[/B] Creating routes based on the file system structure [*][B]API Routes:[/B] Building serverless APIs within your Next.js application [/LIST] [/LIST] [/QUOTE]
Insert quotes…
Verification
Payakata winadi keeyak tibeda?
Post reply
Top
Bottom
Gemini AI PRO 18 months Offer
