Ramachandran Varadarajan ramvvram

using the roadmap

This document should be viewed as an overall guide on what needs to be learnt. If you're an aspiring web dev, treat this as a signpost.

Learn by doing. Practice the code examples yourself.
Then creating end to end projects is the best way to assemble all your learning at one place and boost your confidence.

This document should be viewed as an overall guide on what needs to be learnt. If you're an aspiring web dev, treat this as a signpost.

Learn by doing. Practice the code examples yourself.
Then creating end to end projects is the best way to assemble all your learning at one place and boost your confidence.

3D effect on card hover

Inspired by my 13-hour flight :D

Shout-out to Cathay Pacific for the design... although it is only about 70% accurate because I accidentally deleted the reference picture 😩

Icons from Freepik (flaticon.com)

	<main>
	<div>
	<span>discover</span>
	<h1>aquatic animals</h1>
	<hr>
	<p>Beauty and mystery are hidden under the sea. Explore with our application to know about Aquatic Animals.</p>
	<a href="#">download app</a>
	</div>
	<div class="swiper">
	<div class="swiper-wrapper">

	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice">
	<defs>
	<!-- Scene 1 Gradient -->
	<linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3"
	gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse">
	<stop offset="0.07" stop-color="#9c536b" />
	<stop offset="0.98" stop-color="#d98981" />
	</linearGradient>
	<radialGradient id="bg_grad" cx="375" cy="-35" r="318.69" gradientUnits="userSpaceOnUse">
	<stop offset="0.1" stop-color="#F5C54E" id="sun" />

	import { useState, useEffect } from 'react';

	export const useDebounce = (value, delay) => {
	const [debouncedValue, setDebouncedValue] = useState(value);

	useEffect(() => {
	const timer = setTimeout(() => {
	setDebouncedValue(value);
	}, delay);

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS Font-Stacks</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css"/>
	<style>
	p:first-of-type{
	font-family: 'Come for lunch', Arial, Helvetica, sans-serif;