
Master full stack development from basics to advanced JavaScript, exploring React, Next.js, Node.js, REST APIs, GraphQL, socket.io, databases, and Docker deployment.
Explore how websites work by showing how HTML, CSS, and JavaScript fetch data from a server to populate pages, and differentiate static versus dynamic websites with YouTube and Instagram.
Install Visual Studio Code on Windows 11, configure font size 14 and Cascadia Code, install extensions and snippets, and enable features like word wrap, multiple cursors, and basic keyboard shortcuts.
Learn to set up and use vscode extensions for full-stack development, featuring themes like atom one dark, rename tag, beautify, live server, live share, material icons, and JavaScript ES6 snippets.
Learn HTML basics as a markup language for structuring web pages, including tags, the head and body, and the title, and explore how CSS and JavaScript integrate with HTML.
Learn how browsers serve index.html by default, create clean urls with folders, and understand routing concepts used by React Router and Next.js.
Explore how to use bold and italic text in HTML with b and strong, i and em, and how to present code and quotes using code, pre, and q tags.
Explore HTML attributes, including style, hidden, class, and id, to add properties, control visibility, and apply CSS styling to elements.
Apply inline css with the HTML style attribute to color text, set background color, and align content. Learn font size and font-family to style tags like p and h1.
Explore the span tag in HTML, an inline element for styling text with CSS via the style attribute, enabling color, font weight, and font size changes without affecting layout.
Practice basic HTML by printing hello world, aligning text to left, right, and center, and styling with spans and divs using colors to build a simple personal info layout.
Learn to use inline, internal, and external CSS in HTML to style text, margins, and layout, and link external styles with the head's link tag.
Understand how links in HTML work using the anchor tag and the URL value, including internal and external links, and how target and CSS shape color and behavior.
Learn to insert images in HTML with the img tag, using src and alt, set width and height, add links with a tags, and use title text for hover hints.
Learn to add images with HTML and CSS, set background-image on elements, control repeat with no-repeat, and choose cover or contain with fixed attachment for responsive backgrounds.
Learn to use the picture tag with multiple source elements and media queries to serve different images for mobile, tablet, and desktop, with minimum width thresholds and a default image.
Learn to build an interactive HTML exercise by applying hover effects, responsive image behavior with media queries, and accessible links that open in a new tab.
Learn how to create and integrate favicons in html by generating 48x48 icons with a favicon generator, placing them in an image folder, and linking with the proper icon relationship.
Learn how to create and style HTML tables using table, tr, td, and th, apply borders and collapse borders with CSS, and experiment with borders, backgrounds, and border radius.
Explore how to style and structure HTML tables, from setting width and height to center alignment, cell padding, border spacing, colspan/rowspan, and even/odd row styling.
Explore colgroups in tables to organize and style columns, using span attributes to resize and color specific column sets, and apply group styling to enhance table design.
Master HTML lists by learning ordered, unordered, and description lists, using ol with type attributes and ul with CSS list-style-type to control bullets, and describe terms with dl.
Learn how HTML classes connect to CSS to style multiple elements with a single class. Use the dot selector, define class names, and avoid inline CSS.
Learn how the id attribute differs from the class attribute in HTML, how to target an element with an id using a hash, and how ids enable linking to sections.
I'm using font-family:inter
here is the cdn link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css" integrity="sha512-3kSeajrEqMrItwRkYz09bOsHsl4/wpoT6mgw5Aw+eSLweQtX7kZp2P/Dm7hnUg/TrbTGesAgCPwvZpllhuROTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
for table even color: beige
for table background color: cadetblue
Explore building a table-based page with a skills section, navigation anchors, and css styling using the Inter font and smooth scrolling.
Learn to build html forms with inputs, labels, placeholders, and id and for associations, and understand how name attributes define submission keys and default form behavior.
Learn how to implement checkbox inputs in HTML with labels, IDs, and values, and understand grouping multiple skills like JavaScript and Node.js for forms.
Learn how to implement radio buttons in HTML with input type radio, assign the same name for exclusive selection, pair with labels, and create options like male, female, and other.
Explore every HTML form input type, from checkbox and color to date, file, hidden, and password, with live demonstrations of validation, submission, and URL encoding.
Explore advanced input attributes, including data list for options, autofocus and autocomplete, spellcheck, and using an image as a submit button, with examples like BMW, Audi, Ferrari.
Explore form elements for full stack website development, including select menus, options, text areas, labels, fieldsets with legends, optgroups, and buttons, plus interactive input handling.
Learn how to embed other sites using iframes in HTML, customize size with width, height and viewport height, and display content from YouTube or StackOverflow while noting login limitations.
Learn how to set up a clean, valid html document—from doctype and head title for seo to proper tag case, closing tags, alt text, utf-8 encoding, and viewport-based responsiveness.
Explore how html layouts place a header with a navigation bar and logo, a content area with a sidebar, and a footer with links and copyright notes.
Explore the HTML audio tag, how to use source elements for mp3 and ogg, and how browsers pick the first playable format, while noting autoplay and muted requirements.
Learn how to embed and customize YouTube videos using iframes, including height adjustments, removing controls, enabling autoplay, and looping for seamless playback in full stack website development.
Learn how css styles a web page with selectors like h1, declare color properties with values red or yellow, understand the cascade and semicolon syntax, and link style.css to index.html.
Explore the three css approaches—inline styles, internal style tags, and external css linked via a .css file—and learn how padding and margin affect the box.
Discover CSS comments using the /* ... */ syntax to place invisible notes anywhere in your code, including multiple lines, and compare with HTML's single-line comments.
Learn how to apply colors in CSS for text, borders, and backgrounds using RGB and hex. See a button styled with red text, black background, and aqua borders.
https://getbootstrap.com/
the official Bootstrap website
Bootstrap components from the container class to form controls, labels, inputs, and grid layouts; learn spacing with margins and padding, and style buttons with btn-primary and btn-outline.
Discover how to use Bootstrap components from forms and cards to modals, toasts, spinners, badges, breadcrumbs, dropdowns, and offcanvas, with flex layouts, spacing utilities, and responsive sizing.
Contrast bootstrap and tailwind, learn how tailwind generates css on demand for used class names, and apply classes for background, text, spacing, and hover effects.
Explore Tailwind CSS extras, a rich library of ready-to-use, mobile-responsive components for blog, pricing, nav bars, and e-commerce pages, with free and paid options.
Explore JavaScript concepts from scratch, including variables, prototypes, arrays, conditional statements, loops, and functions, then dive into DOM selectors, event listeners, asynchronous requests with async/await, and security considerations.
You can put _ or $ in starting of your variables, as they are allowed to be used only
Explore JavaScript datatypes, including strings with quotes, numbers, booleans, null, undefined, and objects, and learn how arrays index from zero and how to access object properties with dot notation.
Explore let and const variables, compare them with var, and learn how block scope matters. See how let prevents redeclaration and how const fixes values, forbidding reassignment, with hoisting nuances.
Explore JavaScript mathematical operators, including addition, subtraction, multiplication, division, and modulus, and apply increment/decrement, exponent, and math object functions such as abs, round, floor, ceil, min, max, random, and eval.
Explore how to use constants and variables, apply compound assignment operators like *= and +=, compute remainders and powers, and concatenate strings in JavaScript.
Why arrays start from 0?
https://albertkoz.com/why-does-array-start-with-index-0-65ffc07cbce8
Explore object methods in JavaScript: access properties with dot or bracket notation, read keys and values, check properties with hasOwnProperty or in, and stringify and parse JSON.
Learn how deep copying in JavaScript prevents shared references by using JSON.stringify and JSON.parse, creating independent copies rather than linked objects.
Learn destructuring in JavaScript to extract object properties with bracket notation, rename variables, and apply array destructuring with the spread operator to collect remaining values, including optional chaining.
Explore string templates and template literals to build dynamic strings, embed variables and expressions, and format multi-line output using backticks.
Make a object with 6 property names as follow
prefix, fname, num1, num2, expression, solution
I want you to alert the user with his solution
I want to see this in alert:
Mr./Mrs., your name is Faris and your solution goes as:
5 + 10 = 15
No files for this solution will be given, I want you to write it yourself and see what I did
Learn to measure and manipulate strings with length, slice, substring, and replace, including case-insensitive and global regex options. Trim spaces and convert text to upper or lower case.
Ask user for his name in prompt window
Ask user for his cvv in prompt window
Ask user for his credit card number in prompt window
Ask user for his mm/yy of cc in prompt window
Alert should look like this:->
Name: name
Credit Card: show only last 8 digits of credit card
CVV: ****
DOB: mm/yy
Discover JavaScript number methods, including toFixed, toExponential, toPrecision, and valueOf, and learn how numbers convert to strings and display with proper precision for web apps.
Demonstrates inbuilt number functions in JavaScript, covering max value, max safe integer, min value, min safe integer, and infinity concepts, with basic usage and NaN considerations.
Ask the users name and his age
if the users age is more then or equal to 18 then I want you to proceed further with the user otherwise show him he is not eligible
Ask if user wants alcohol to be served using confirm function.
if he choose yes/ok, ask for his credit card information including his current bank balance. Otherwise, tell him something like he can't join their club and don't let him procced further,
Check if the credit card number length is equal to 16 and his balance is more then 15$ if not tell him you have given wrong credit card or tell his balance is less then 15$ and we decided to kick you out
<----i want you to show him this thing in alert----->
Congratulation! name, you have successfully joined our club. We have deduced 15$ from your creditcard number (hide first 12 digits) and your current balance is: balance-15
functions to be used: prompt(); confirm(); alert();
This solution to quiz #3 outlines an HTML/JavaScript flow that validates age for club eligibility, handles alcohol option, and processes balance, credit card, and masked CV before joining.
Explore switch statements in JavaScript, using cases, break, and default to map ages to classes, show multiple cases with the same output, and compare with if conditions.
same as your quiz 3 but write conditions using ternary operators
Walk through quiz four solution, illustrating conditional logic with prompts, age checks, alcohol eligibility, balance handling, and credit card validation for full stack development.
Explore the nullish coalescing operator in JavaScript, distinguish undefined from null, and learn how to provide default values for missing object properties.
Master optional chaining to safely access nested properties like object?.test?.name, preventing runtime crashes from null or undefined values while handling cookies and production scenarios.
Learn how JavaScript functions take inputs, apply if-else logic, and return values. See how defining functions reduces repetition and makes code cleaner by calling the function with different inputs.
Learn to define and call JavaScript functions, pass arguments and parameters, return results, and use switch cases for multiply, add, subtract, and divide.
Explore how JavaScript functions receive arguments, default values, and parameter order, while skipping parameters with underscores, and compare function declarations with function expressions and hoisting.
Explore arrow functions in JavaScript, learning how functions become values, how one-liner syntax returns results directly, and how to handle single or multiple arguments with underscores.
Explore recursive functions in JavaScript by printing array elements through a function that calls itself, with base case and proper stopping conditions; compare recursion to loops, especially for asynchronous tasks.
Learn how callbacks in JavaScript pass a function as an argument and execute it after a task completes, using recursion, anonymous functions, and set timeout to handle asynchronous flows.
Apply a recursive solve function to build sums or products from user-entered numbers, selecting a mathematical sign and iteratively prompting for inputs until the total count completes.
Learn how loops control flow using a < 5 and a++ to iterate, print names with console.log, and explore loop types such as for, while, and do-while.
Master for loops in JavaScript by defining initialization, condition, and increment, using an index to repeat actions and log results with console.log while avoiding infinite loops.
Learn how break and continue statements control loops in Java and JavaScript, using them to exit or skip iterations and improve memory efficiency.
Explore for-in loops in JavaScript to iterate object keys and access properties like name, gender, and age. Learn when to use for-in versus for-of and note array and scope guidance.
Learn how to use for..of loops in JavaScript to iterate array values, compare with for loops, handle scope with let vs var, and break loops when needed.
Learn how while loops work in JavaScript, compare them to for loops, and understand condition placement, increments, and how do-while loops run at least once.
Learn how do-while loops work in JavaScript, executing the block at least once, then testing the condition, and see how this behavior mirrors while loops with simple i-based examples.
Learn to generate numerical patterns with for loops using nested loops in JavaScript, printing incrementing sequences from 1 to n and formatting each line with spaces.
Learn to generate number patterns with nested loops, range handling, and string assembly using console.log and join, illustrating basic pattern printing in code.
Learn how the spread operator in JavaScript copies arrays, merges objects, and spreads function arguments, while illustrating destructuring and rest patterns for cleaner code.
Explore array functions in JavaScript, from adding with push and unshift to removing with pop and shift, and master advanced methods like map, filter, find, includes, and the spread operator.
Explore how to combine multiple arrays using the spread operator and alternative methods, then use entries, every, some, and fill to validate and initialize array data.
Explore essential JavaScript array methods from filter and find to includes and join, plus flattening with flat and split, with practical examples for filtering, locating, and formatting data.
Learn the final array functions in JavaScript, including keys and entries, map, push, lastIndexOf, reduce, sort, reverse, and splice, with practical usage insights.
Learn to process nested arrays without using flat, using recursion to flatten, apply a user-defined expression, and compute the minimum or maximum value with a plus or minus sign.
Instead of passing 0 in function in solution place, pass the min/max val of the first array. Means, ask for first array to user and according to what he wants min or max select that value and send in function
Learn how to send API requests from a client to a server, and handle responses—JSON, text, blob, or form data—while checking status codes for online APIs.
Explore http requests with fetch intro, using asynchronous promises to fetch and parse json data, and compare ajax options, axios, get and post.
Explore fetch options by configuring method, headers, and body, learn when to use get versus post, and understand content-type choices like application/json and multipart/form-data, plus basic error handling with catch.
Learn how to make API calls, send data via URL query parameters, handle JSON responses, and extract names using map and filter in a full stack website development course.
Learn how to use Axios for HTTP requests in JavaScript, including get and post calls, error handling, and tracking upload and download progress with response data.
Master asynchronous functions using async/await in JavaScript and axios or fetch calls. Learn how non-blocking code, promises, and the event loop manage server responses.
Explore inbuilt async functions in JavaScript, including setTimeout, setInterval, and setImmediate, and learn how they run after the main script and how to stop them with clearTimeout and clearInterval.
Learn how setInterval repeats a function at a specified delay, how it differs from setTimeout, and how to clear with the interval ID to prevent browser crashes.
http://latentflip.com/loupe/
Learn to build a console-based timer in JavaScript that prompts for seconds, updates every second, shows a message when time ends, and supports pause, play, and stop.
Learn to select and modify HTML text using the DOM, with methods like getElementById and querySelector, and compare innerHTML, innerText, and textContent while noting injection risks.
Learn how to select elements by tag name in JavaScript, compare getElementsByTagName with querySelectorAll, and understand when to target single versus multiple h1 elements for efficient dom access.
Learn editing options for selected elements using JavaScript, including creating elements, setting inner text, using classList add, remove, toggle, and exploring open child and child elements count.
Master dynamic attribute manipulation with JavaScript by using setAttribute, getAttribute, and hasAttribute to add placeholders, disable inputs, read values, and manage classes in real time.
Explore how to implement event listeners in JavaScript using HTML attributes and addEventListener, then build a color changer that reads input values to update text color.
Create dynamic input listeners that capture values with e.target.value and build an updating object using bracket notation for inputs named name, phone, class, age, and address as you type.
Build a dynamic form with username, age, address, and class inputs, styled in a vertical flex layout, and update a single object on each keystroke using the spread operator.
Inform the user that he can pause/play/stop the timer by clicking on their respective buttons - keep this on top of the window with a card-title element or anyhow you like to
ask for how many seconds the timer user wants to set in the input
ask for the message to be shown after the specified time in the input
start the timer and keep updating the time in Text every 1 second
If the user didn't stop the timer and the timer time was up, show him the text that he inserted before in the modal element
Site live here: https://elderny.github.io/Timer-Alert---Course/
Learn how forms in JavaScript are managed, including Bootstrap form controls, inputs for email, password, username, radio buttons, selects, and client-side checks and submission using event listeners.
Learn how to implement audio and video in JavaScript by creating video elements with sources, types, and controls, and manage playback, full screen, picture-in-picture, and keyboard interactions.
Explore how web storage in JavaScript uses local storage to persist data like cart items across sessions by saving and retrieving key-value pairs with setItem and getItem.
Explore web workers in JavaScript and learn how they run heavy calculations in the background to keep the user interface responsive, using postMessage, onmessage, and worker threads.
Learn how to use import and export in JavaScript modules, including default and named exports, aliasing, importing everything as a namespace, and module scope.
Learn to read and manipulate the URL with window.location, including hash, host, origin, protocol, port, path, and hostname. Parse query parameters with URLSearchParams and redirects with reload, replace, and window.open.
Learn about sets in JavaScript, using Set on an array to remove duplicates and keep unique values, with add, clear, delete, has, and size.
Uploaded on github: https://elderny.github.io/note-taker-course/
Learn to set up a note taker website in JavaScript, generating unique IDs, validating forms, and storing notes in local storage, with add, load, and delete note features.
Bug fix: No note stays there,
Add a empty = false var by default
where we add no note text there do empty =true
and in add note check if empty == true then remove all innerHTML then add new post
and also do empty = false after added new note
same goes for the get note if there are notes then do empty=false
Website Link: https://elderny.github.io/math-tester-course/
Fixed one bug in website :- In the restart function also set the innerText of score to 0
The website is live here: https://elderny.github.io/shopping-website-course
Changed window.location.replace from / to just cart.html and index.html
this backend roadmap covers terminal usage, node.js, linux, front-end basics for backend, relational and NoSQL databases, APIs and authentication, plus docker, kubernetes, and git workflows.
Learn how the internet works, from no single owner to how domain names map to IP addresses via DNS, and the roles of IPv4, IPv6, packets, wifi towers, cloud.
Explore http requests and responses, covering versions from 0.9 through 3, http methods like get and post, headers, body, and status codes, and how these drive web communication.
Compare http/2 and http/3, showing http/3 uses quic over udp, multiplexed streams, tls 1.3, header compression, and reduced handshakes for faster, more resilient connections.
Learn how browsers render web pages by detailing the browser engine, rendering engine, DOM tree, HTML, CSS, and JavaScript parsing, and network steps like DNS, TCP, TLS for HTTPS requests.
Explore what hosting means and learn about shared hosting, virtual private servers, dedicated hosting, reseller hosting, and cloud hosting, including domains, dns, and how the web host serves your files.
Learn how node.js runs javascript on the server, leveraging a c/c++ lib, maintains a single-threaded yet asynchronous model, and uses load balancers to involve additional threads for handling server tasks.
Build a node.js http server, handle requests and responses on localhost port 3000, and use the node mode module for automatic restarts during development with express.
Discover what a request carries to a Node.js server—headers, url, method, and body—then route content with if-else logic for different URLs.
Learn how to send html back to a user from a node.js server at the slash URL using the response object.
learn how to send an html form to the user and handle its post request, including parsing the request body and understanding url-encoded versus multipart form data.
Learn how to read data sent from the client in chunks using a request event listener, accumulate chunks into a body array, and handle end events in Node.js.
Read data from a text file using a synchronous file system method, handle UTF eight encoding, and respond via a get request on localhost, contrasting callback-based async with single wait.
Create and manage folders and files with the file system: check existence, create nested folders like books or uploads, read and write files, rename, and delete recursively.
Learn to schedule tasks with node schedule in node.js, running functions at specific times, using cron syntax and object literals, and managing cancellations and graceful shutdowns.
Kindly note that more topics like Graphql, Express JS/rest API's, MySQL/Postgres -> Prisma, MongoDB->mongoose, Firebase, Redis, WebSockets, git, ci cd, react js which is next js now, typescript, docker, Kubernetes, Jenkins, AWS, Nginx Reverse proxying/SSL-TTS management, terraform, port management, domain management, cronjobs and more topics are currently under progress and not yet added in the course but we are working on it and will add them in the course slowly.
This course is intended for someone who has no knowledge about website development and who wants to land their dream job but doesn't have the required skills for that.
In this course I'll cover all of the topics, that'll be needed for you to get a good-paying job using current information. In future with new content you can get a high-paying job so you can decide to enrol later too
This course can save you a lot of time, as in this course I've mentioned all the small to big things, that you'll ever need to know about. All basic to advanced topics have been covered in this course. Topics start from website frontend designing to the backend.
This course is intended for everyone, whether a total beginner or a complete expert. I hope there might be points that even experts might not be familiar with.
This course is made by Faris Farooq, from India. I am having years of experience as a website developer.
The central part of the course will be javascript, as I'll be covering it from complete scratch to complete advance. No topics will be left blank, all interview-ready topics will be crystal clear, like closures, hoisting, event loops, array functions, high-level functions, garbage collection, async functions etc...
Well if I'll keep talking about what will be included in this course, then I can never stop talking about it. See you in the course itself :)