\n\n\n\n \n \n Who am I? & Why should you learn from me?\n \n /* Import a clean modern font */\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');\n\n /* Color Palette & Variables */\n :root {\n --bg-color: #0f172a; /* Deep Slate Dark */\n --card-bg: #1e293b; /* Slightly lighter slate for cards */\n --text-main: #f8fafc; /* Crisp White */\n --text-muted: #94a3b8; /* Soft Gray for readability */\n --accent: #38bdf8; /* Bright Developer Blue */\n --accent-glow: rgba(56, 189, 248, 0.2);\n --nav-bg: rgba(15, 23, 42, 0.85);\n }\n\n /* Global Reset */\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Inter', sans-serif;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-main);\n line-height: 1.7;\n -webkit-font-smoothing: antialiased;\n }\n\n /* Navbar Styling (Glassmorphism Effect) */\n .navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem 8%;\n background-color: var(--nav-bg);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n }\n\n .left-nav .name {\n font-size: 1.2rem;\n font-weight: 300;\n letter-spacing: 1px;\n }\n\n .firstnav {\n color: var(--accent);\n font-weight: 800;\n }\n\n .nav-list {\n display: flex;\n list-style: none;\n gap: 2.5rem;\n }\n\n .nav-list li {\n cursor: pointer;\n font-weight: 600;\n font-size: 0.95rem;\n color: var(--text-muted);\n transition: color 0.3s ease;\n position: relative;\n }\n\n .nav-list li:hover {\n color: var(--text-main);\n }\n\n /* Animated underline on hover */\n .nav-list li::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -6px;\n left: 0;\n background-color: var(--accent);\n transition: width 0.3s ease;\n }\n\n .nav-list li:hover::after {\n width: 100%;\n }\n\n /* Burger Menu (Hidden on Desktop) */\n .burger {\n display: none;\n cursor: pointer;\n }\n\n .burger .line {\n width: 25px;\n height: 3px;\n background-color: var(--text-main);\n margin: 5px;\n border-radius: 5px;\n transition: all 0.3s ease;\n }\n\n /* Main Container */\n .container {\n max-width: 900px;\n margin: 5rem auto;\n padding: 0 25px;\n }\n li a{\n text-decoration: none;\n color: white;\n }\n /* Hero Heading */\n h1 {\n font-size: 2.8rem;\n text-align: center;\n margin-bottom: 4rem;\n background: linear-gradient(to right, #38bdf8, #818cf8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n line-height: 1.3;\n letter-spacing: -0.5px;\n }\n\n /* Blog Section Cards */\n .d-flex {\n display: flex;\n align-items: center;\n gap: 3rem;\n background-color: var(--card-bg);\n padding: 2.5rem;\n border-radius: 20px;\n margin-bottom: 2.5rem;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n border: 1px solid rgba(255, 255, 255, 0.03);\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }\n\n /* Hover lift effect */\n .d-flex:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 40px var(--accent-glow);\n border-color: rgba(56, 189, 248, 0.3);\n }\n\n /* Alternating layout (Zig-Zag) */\n .d-flex:nth-child(even) {\n flex-direction: row-reverse;\n }\n\n /* Image Styling */\n .d-flex img {\n width: 220px;\n height: 220px;\n object-fit: cover;\n border-radius: 16px;\n box-shadow: 0 8px 20px rgba(0,0,0,0.4);\n transition: transform 0.5s ease;\n flex-shrink: 0;\n background-color: #fff; /* In case of transparent PNGs */\n }\n\n .d-flex:hover img {\n transform: scale(1.05) rotate(2deg);\n }\n \n .d-flex:nth-child(even):hover img {\n transform: scale(1.05) rotate(-2deg);\n }\n\n /* Text Content within Cards */\n .info-container {\n flex: 1;\n }\n\n .info-container h2 {\n font-size: 1.8rem;\n color: var(--text-main);\n margin-bottom: 1rem;\n }\n\n .info-container p {\n color: var(--text-muted);\n font-size: 1.1rem;\n }\n\n /* Final Callout Message */\n .lastmessage {\n margin-top: 5rem;\n padding: 2.5rem;\n background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.05));\n border-left: 5px solid var(--accent);\n border-radius: 0 16px 16px 0;\n text-align: center;\n }\n\n .lastmessage p {\n font-size: 1.25rem;\n font-weight: 600;\n color: #e2e8f0;\n font-style: italic;\n }\n\n /* Mobile Responsiveness */\n @media (max-width: 768px) {\n .navbar {\n padding: 1rem 5%;\n }\n .nav-list {\n display: none; /* Hides desktop menu */\n }\n .burger {\n display: block;\n }\n h1 {\n font-size: 2.2rem;\n margin-bottom: 3rem;\n }\n .d-flex, .d-flex:nth-child(even) {\n flex-direction: column;\n text-align: center;\n gap: 1.5rem;\n padding: 2rem 1.5rem;\n }\n .d-flex img {\n width: 100%;\n max-width: 280px;\n height: auto;\n }\n .lastmessage {\n margin-top: 3rem;\n padding: 1.5rem;\n }\n }\n\n .nav-list.show {\n display: flex;\n flex-direction: column;\n position: absolute;\n top: 100%;\n right: 8%;\n background-color: rgba(15, 23, 42, 0.95);\n padding: 1rem 1.5rem;\n border-radius: 16px;\n box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);\n width: min(220px, calc(100vw - 40px));\n gap: 1rem;\n }\n\n .nav-list.show li {\n text-align: right;\n }\n\n .burger.active .line:nth-child(1) {\n transform: translateY(8px) rotate(45deg);\n }\n\n .burger.active .line:nth-child(2) {\n opacity: 0;\n }\n\n .burger.active .line:nth-child(3) {\n transform: translateY(-8px) rotate(-45deg);\n }\n \n\n\n \n \n
{ Kirti Mishra } / Developer Blogs
\n \n
\n \n \n \n \n \n \n\n \n
Why Learn from me (Kirti Mishra): A Unique Perspective
\n
\n \n
![\"UP](\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqAq7D9cO8O1tLJs3ilZ9Jw6_kN-KXmynYPVer0MY13g&s=10\")
\n \n
The Practical Edge
\n
I'm not in any software industry, but I've been working in this field since my school time. I've worked across many full-stack projects where I gained real-world project experience of how the tech works and what major issues can be faced in the starting phase. I'll be considering that you know nothing in the field and want to learn Advanced Concepts.
\n \n \n \n
![\"Frontend](\"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQey0mbeaQ2v0DssAMHgMbArQ-Q2q4AonL6l9jECOzkAQ&s=10\")
\n \n
The Clear Path
\n
I'll not just teach you on this path, but will also give you real-world project ideas which you can go and try for your resume or projects. We'll start from Networking concepts, which are the important fundamentals of programming, and then move to the Frontend-Backend and then full-stack development.
\n \n \n \n
![\"Full](\"https://www.codelabsystems.in/assets/img/services/full-stack-web-development.png\")
\n \n
Way to Full-Stack Web Development
\n
Eventually, by learning all the way, we'll move to full-stack web development and solve real-world full-stack problems. Not only that, we'll learn various things later such as frameworks, payment integrations, cross-platform apps, and more.
\n \n \n \n
With this basic information, I would like to end this blog and assure you that by the end of our blogs, we'll be able to make large-scale applications.
\n \n \n \n const burger = document.querySelector('.burger');\n const navList = document.querySelector('.nav-list');\n\n burger.addEventListener('click', () => {\n navList.classList.toggle('show');\n burger.classList.toggle('active');\n });\n\n document.addEventListener('click', (event) => {\n if (!burger.contains(event.target) && !navList.contains(event.target) && navList.classList.contains('show')) {\n navList.classList.remove('show');\n burger.classList.remove('active');\n }\n });\n \n\n\n\n\n\n\n"}]},{"id":"block_1786429329764","type":"table","content":[{"text":""}],"children":[],"props":{}},{"id":"block_1786429375412","type":"quiz","content":[{"text":""}],"children":[],"props":{"question":"Which port are you using now?","options":["FTP","TCP","UDP","HTTP"],"correctIndex":3,"quizId":"quiz_1b7zvxfwk"}}] -->
Who am I? & Why should you learn from me?
/* Import a clean modern font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
/* Color Palette & Variables */
:root {
--bg-color: #0f172a; /* Deep Slate Dark */
--card-bg: #1e293b; /* Slightly lighter slate for cards */
--text-main: #f8fafc; /* Crisp White */
--text-muted: #94a3b8; /* Soft Gray for readability */
--accent: #38bdf8; /* Bright Developer Blue */
--accent-glow: rgba(56, 189, 248, 0.2);
--nav-bg: rgba(15, 23, 42, 0.85);
}
/* Global Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-main);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* Navbar Styling (Glassmorphism Effect) */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 8%;
background-color: var(--nav-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.left-nav .name {
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 1px;
}
.firstnav {
color: var(--accent);
font-weight: 800;
}
.nav-list {
display: flex;
list-style: none;
gap: 2.5rem;
}
.nav-list li {
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-muted);
transition: color 0.3s ease;
position: relative;
}
.nav-list li:hover {
color: var(--text-main);
}
/* Animated underline on hover */
.nav-list li::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -6px;
left: 0;
background-color: var(--accent);
transition: width 0.3s ease;
}
.nav-list li:hover::after {
width: 100%;
}
/* Burger Menu (Hidden on Desktop) */
.burger {
display: none;
cursor: pointer;
}
.burger .line {
width: 25px;
height: 3px;
background-color: var(--text-main);
margin: 5px;
border-radius: 5px;
transition: all 0.3s ease;
}
/* Main Container */
.container {
max-width: 900px;
margin: 5rem auto;
padding: 0 25px;
}
li a{
text-decoration: none;
color: white;
}
/* Hero Heading */
h1 {
font-size: 2.8rem;
text-align: center;
margin-bottom: 4rem;
background: linear-gradient(to right, #38bdf8, #818cf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.3;
letter-spacing: -0.5px;
}
/* Blog Section Cards */
.d-flex {
display: flex;
align-items: center;
gap: 3rem;
background-color: var(--card-bg);
padding: 2.5rem;
border-radius: 20px;
margin-bottom: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.03);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* Hover lift effect */
.d-flex:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px var(--accent-glow);
border-color: rgba(56, 189, 248, 0.3);
}
/* Alternating layout (Zig-Zag) */
.d-flex:nth-child(even) {
flex-direction: row-reverse;
}
/* Image Styling */
.d-flex img {
width: 220px;
height: 220px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
transition: transform 0.5s ease;
flex-shrink: 0;
background-color: #fff; /* In case of transparent PNGs */
}
.d-flex:hover img {
transform: scale(1.05) rotate(2deg);
}
.d-flex:nth-child(even):hover img {
transform: scale(1.05) rotate(-2deg);
}
/* Text Content within Cards */
.info-container {
flex: 1;
}
.info-container h2 {
font-size: 1.8rem;
color: var(--text-main);
margin-bottom: 1rem;
}
.info-container p {
color: var(--text-muted);
font-size: 1.1rem;
}
/* Final Callout Message */
.lastmessage {
margin-top: 5rem;
padding: 2.5rem;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(129, 140, 248, 0.05));
border-left: 5px solid var(--accent);
border-radius: 0 16px 16px 0;
text-align: center;
}
.lastmessage p {
font-size: 1.25rem;
font-weight: 600;
color: #e2e8f0;
font-style: italic;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.navbar {
padding: 1rem 5%;
}
.nav-list {
display: none; /* Hides desktop menu */
}
.burger {
display: block;
}
h1 {
font-size: 2.2rem;
margin-bottom: 3rem;
}
.d-flex, .d-flex:nth-child(even) {
flex-direction: column;
text-align: center;
gap: 1.5rem;
padding: 2rem 1.5rem;
}
.d-flex img {
width: 100%;
max-width: 280px;
height: auto;
}
.lastmessage {
margin-top: 3rem;
padding: 1.5rem;
}
}
.nav-list.show {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
right: 8%;
background-color: rgba(15, 23, 42, 0.95);
padding: 1rem 1.5rem;
border-radius: 16px;
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
width: min(220px, calc(100vw - 40px));
gap: 1rem;
}
.nav-list.show li {
text-align: right;
}
.burger.active .line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger.active .line:nth-child(2) {
opacity: 0;
}
.burger.active .line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
{ Kirti Mishra } / Developer Blogs
Why Learn from me (Kirti Mishra): A Unique Perspective
The Practical Edge
I'm not in any software industry, but I've been working in this field since my school time. I've worked across many full-stack projects where I gained real-world project experience of how the tech works and what major issues can be faced in the starting phase. I'll be considering that you know nothing in the field and want to learn Advanced Concepts.
The Clear Path
I'll not just teach you on this path, but will also give you real-world project ideas which you can go and try for your resume or projects. We'll start from Networking concepts, which are the important fundamentals of programming, and then move to the Frontend-Backend and then full-stack development.
Way to Full-Stack Web Development
Eventually, by learning all the way, we'll move to full-stack web development and solve real-world full-stack problems. Not only that, we'll learn various things later such as frameworks, payment integrations, cross-platform apps, and more.
With this basic information, I would like to end this blog and assure you that by the end of our blogs, we'll be able to make large-scale applications.
const burger = document.querySelector('.burger');
const navList = document.querySelector('.nav-list');
burger.addEventListener('click', () => {
navList.classList.toggle('show');
burger.classList.toggle('active');
});
document.addEventListener('click', (event) => {
if (!burger.contains(event.target) && !navList.contains(event.target) && navList.classList.contains('show')) {
navList.classList.remove('show');
burger.classList.remove('active');
}
});
[quiz:JTdCJTIycXVlc3Rpb24lMjIlM0ElMjJXaGljaCUyMHBvcnQlMjBhcmUlMjB5b3UlMjB1c2luZyUyMG5vdyUzRiUyMiUyQyUyMm9wdGlvbnMlMjIlM0ElNUIlMjJGVFAlMjIlMkMlMjJUQ1AlMjIlMkMlMjJVRFAlMjIlMkMlMjJIVFRQJTIyJTVEJTJDJTIyY29ycmVjdEluZGV4JTIyJTNBMyUyQyUyMnF1aXpJZCUyMiUzQSUyMnF1aXpfMWI3enZ4ZndrJTIyJTJDJTIycSUyMiUzQSUyMldoaWNoJTIwcG9ydCUyMGFyZSUyMHlvdSUyMHVzaW5nJTIwbm93JTNGJTIyJTJDJTIyb3B0cyUyMiUzQSU1QiUyMkZUUCUyMiUyQyUyMlRDUCUyMiUyQyUyMlVEUCUyMiUyQyUyMkhUVFAlMjIlNUQlMkMlMjJjJTIyJTNBMyUyQyUyMmlkJTIyJTNBJTIycXVpel8xYjd6dnhmd2slMjIlN0Q=]
