Java Web Development \u2013 Learning Hub<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --bg-color: #020617; \/* Very dark slate *\/\n --card-bg: rgba(15, 23, 42, 0.6);\n --card-border: rgba(255, 255, 255, 0.08);\n --accent-primary: #10b981; \/* Emerald Green *\/\n --accent-secondary: #6366f1; \/* Indigo *\/\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --glass-blur: 16px;\n }\n\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 background-image: \n radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.12), transparent 35%),\n radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.12), transparent 35%);\n background-attachment: fixed;\n color: var(--text-main);\n min-height: 100vh;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Glassmorphism Header *\/\n header {\n position: sticky;\n top: 0;\n z-index: 100;\n background: rgba(2, 6, 23, 0.7);\n backdrop-filter: blur(var(--glass-blur));\n -webkit-backdrop-filter: blur(var(--glass-blur));\n border-bottom: 1px solid var(--card-border);\n transition: all 0.3s ease;\n }\n\n .nav {\n max-width: 1200px;\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.2rem 2rem;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n letter-spacing: -0.5px;\n }\n\n nav {\n display: flex;\n gap: 2rem;\n }\n\n nav a {\n text-decoration: none;\n color: var(--text-main);\n font-weight: 500;\n font-size: 0.95rem;\n transition: color 0.3s;\n position: relative;\n }\n\n nav a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));\n transition: width 0.3s ease;\n border-radius: 2px;\n }\n\n nav a:hover {\n color: #ffffff;\n }\n\n nav a:hover::after {\n width: 100%;\n }\n\n \/* Hero Section *\/\n .hero {\n max-width: 1000px;\n margin: auto;\n padding: 8rem 2rem 6rem;\n text-align: center;\n animation: fadeIn 1s ease-out;\n }\n\n .hero h1 {\n font-size: clamp(3rem, 5vw, 4.8rem);\n font-weight: 800;\n line-height: 1.1;\n margin-bottom: 1.5rem;\n letter-spacing: -1px;\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #34d399, #818cf8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .hero p {\n color: var(--text-muted);\n font-size: 1.2rem;\n max-width: 700px;\n margin: 0 auto 2.5rem;\n font-weight: 400;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1rem 2.5rem;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n color: white;\n border-radius: 9999px;\n text-decoration: none;\n font-weight: 600;\n font-size: 1rem;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);\n }\n\n \/* Sections & Grid *\/\n section {\n max-width: 1200px;\n margin: auto;\n padding: 5rem 2rem;\n }\n\n section h2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n font-weight: 700;\n text-align: center;\n letter-spacing: -0.5px;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 2rem;\n }\n\n \/* Modern Glass Cards *\/\n .card {\n background: var(--card-bg);\n backdrop-filter: blur(var(--glass-blur));\n -webkit-backdrop-filter: blur(var(--glass-blur));\n padding: 2.5rem;\n border-radius: 1.5rem;\n border: 1px solid var(--card-border);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .card::before {\n content: \"\";\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);\n z-index: 0;\n opacity: 0;\n transition: opacity 0.3s;\n }\n \n .card:hover::before {\n opacity: 1;\n }\n\n .card:hover {\n transform: translateY(-8px);\n border-color: rgba(255, 255, 255, 0.2);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n }\n\n .card > * {\n position: relative;\n z-index: 1;\n }\n\n .card-icon {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n display: inline-block;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .card h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n color: #f8fafc;\n }\n\n .card p {\n color: var(--text-muted);\n font-size: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .card .tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: auto;\n }\n\n .tag {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n padding: 0.4rem 0.8rem;\n border-radius: 2rem;\n font-size: 0.85rem;\n color: #cbd5e1;\n transition: all 0.2s;\n }\n\n .card:hover .tag {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.2);\n }\n \n \/* Missing lists for cards without tags *\/\n .card ul {\n list-style: none;\n }\n\n .card ul li {\n margin-bottom: 0.75rem;\n display: flex;\n align-items: center;\n color: var(--text-muted);\n font-size: 1rem;\n }\n\n .card ul li::before {\n content: '\u2192';\n color: var(--accent-primary);\n margin-right: 0.75rem;\n font-weight: bold;\n }\n\n \/* Code Block *\/\n pre {\n background: rgba(0, 0, 0, 0.4);\n padding: 1.5rem;\n border-radius: 1rem;\n overflow-x: auto;\n border: 1px solid var(--card-border);\n font-family: 'Fira Code', 'Courier New', Courier, monospace;\n font-size: 0.9rem;\n color: #34d399; \/* Match Emerald theme *\/\n margin-top: 1rem;\n }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 3rem 2rem;\n margin-top: 4rem;\n border-top: 1px solid var(--card-border);\n background: rgba(2, 6, 23, 0.8);\n color: var(--text-muted);\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav { flex-direction: column; gap: 1rem; }\n nav { flex-wrap: wrap; justify-content: center; }\n .hero { padding: 6rem 1.5rem 4rem; }\n }\n\n .link-wrapper {\n display: flex;\n justify-content: center;\n margin: 3rem 0;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"nav\">\n <div class=\"logo\">Java Web Hub<\/div>\n <nav>\n <a href=\"#intro\">Home<\/a>\n <a href=\"#stack\">Tech Stack<\/a>\n <a href=\"#concepts\">Concepts<\/a>\n <a href=\"#roadmap\">Roadmap<\/a>\n <a href=\"#tools\">Tools<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <div class=\"hero\" id=\"intro\">\n <h1>Master <span class=\"text-gradient\">Java Web<\/span> Development<\/h1>\n <p>\n Build secure, scalable, and enterprise-grade web applications.\n Learn modern frameworks, backend technologies, databases, and full-stack\n development with industry best practices.\n <\/p>\n <a href=\"#concepts\" class=\"btn\">Start Building<\/a>\n <\/div>\n\n \n <section id=\"stack\">\n <h2>Technology Stack<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\u2727<\/div>\n <h3>Frontend<\/h3>\n <p>Building intuitive and responsive interfaces.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">HTML5 & CSS3<\/span>\n <span class=\"tag\">ES6+<\/span>\n <span class=\"tag\">Tailwind CSS<\/span>\n <span class=\"tag\">React \/ Angular<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u25c8<\/div>\n <h3>Backend<\/h3>\n <p>Robust server-side logic and enterprise APIs.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Java 17+<\/span>\n <span class=\"tag\">Servlets & JSP<\/span>\n <span class=\"tag\">Spring Boot 3<\/span>\n <span class=\"tag\">RESTful \/ GraphQL<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u25c4<\/div>\n <h3>Database<\/h3>\n <p>Secure data persistence and caching.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">MySQL \/ PostgreSQL<\/span>\n <span class=\"tag\">MongoDB<\/span>\n <span class=\"tag\">Hibernate ORM<\/span>\n <span class=\"tag\">Redis<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"concepts\">\n <h2>Core Concepts<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udcbb<\/div>\n <h3>Hello World Example<\/h3>\n <pre>\n@RestController\npublic class MainController {\n @GetMapping(\"\/\")\n public String home() {\n return \"Welcome to Java Web!\";\n }\n}\n <\/pre>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83c\udfd7\ufe0f<\/div>\n <h3>Architecture<\/h3>\n <p>Scalable patterns for enterprise applications.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">MVC Pattern<\/span>\n <span class=\"tag\">Microservices<\/span>\n <span class=\"tag\">JWT Auth<\/span>\n <span class=\"tag\">Stateless Sessions<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83c\udf31<\/div>\n <h3>Spring Framework<\/h3>\n <p>The definitive framework for Java enterprise apps.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">IoC \/ DI<\/span>\n <span class=\"tag\">Spring MVC<\/span>\n <span class=\"tag\">Spring Security<\/span>\n <span class=\"tag\">Spring Data JPA<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u27f3<\/div>\n <h3>DevOps & Deployment<\/h3>\n <p>Automating delivery and scaling seamlessly.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Docker & K8s<\/span>\n <span class=\"tag\">Tomcat<\/span>\n <span class=\"tag\">Cloud (AWS\/Azure)<\/span>\n <span class=\"tag\">CI\/CD<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"roadmap\">\n <h2>Learning Roadmap<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">1\ufe0f\u20e3<\/div>\n <h3>Phase 1: Foundations<\/h3>\n <p>Master Core Java, Object-Oriented Programming, Data Structures, HTML, CSS, basic JavaScript, Servlets, and JSP fundamentals.<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-icon\">2\ufe0f\u20e3<\/div>\n <h3>Phase 2: Frameworks<\/h3>\n <p>Dive deep into Spring Boot, build REST APIs, learn relational database integration with Hibernate, and version control using Git.<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-icon\">3\ufe0f\u20e3<\/div>\n <h3>Phase 3: Mastery<\/h3>\n <p>Design Microservices, implement robust Security, configure Cloud Deployment, adopt DevOps practices, and master Performance Tuning.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tools\">\n <h2>Developer Tools<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\u2699\ufe0f<\/div>\n <h3>IDEs<\/h3>\n <p>Feature-rich environments for coding.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">IntelliJ IDEA<\/span>\n <span class=\"tag\">Eclipse<\/span>\n <span class=\"tag\">VS Code<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udd28<\/div>\n <h3>Build Systems<\/h3>\n <p>Manage dependencies and project lifecycles.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Maven<\/span>\n <span class=\"tag\">Gradle<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udee1\ufe0f<\/div>\n <h3>Quality Assurance<\/h3>\n <p>Ensure code reliability and correctness.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">JUnit & Mockito<\/span>\n <span class=\"tag\">Postman<\/span>\n <span class=\"tag\">SonarQube<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <p>\u00a9 2026 Java Web Development Hub | Engineered for the Modern Web<\/p>\n <\/footer>\n\n <script>\n \/\/ Add a simple script to handle the glow effect tracking on cards\n document.querySelectorAll('.card').forEach(card => {\n card.addEventListener('mousemove', e => {\n const rect = card.getBoundingClientRect(),\n x = e.clientX - rect.left,\n y = e.clientY - rect.top;\n\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Java Web Development \u2013 Learning Hub Java Web Hub Home Tech Stack Concepts Roadmap Tools Master Java Web Development Build secure, scalable, and enterprise-grade web applications. Learn modern frameworks, backend technologies, databases, and full-stack development with industry best practices. Start Building Technology Stack \u2727 Frontend Building intuitive and responsive interfaces. HTML5 & CSS3 ES6+ Tailwind […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2167","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2167"}],"version-history":[{"count":14,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167\/revisions"}],"predecessor-version":[{"id":2227,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167\/revisions\/2227"}],"wp:attachment":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Java Web Development \u2013 Learning Hub<\/title>\n\n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n <style>\n :root {\n --bg-color: #020617; \/* Very dark slate *\/\n --card-bg: rgba(15, 23, 42, 0.6);\n --card-border: rgba(255, 255, 255, 0.08);\n --accent-primary: #10b981; \/* Emerald Green *\/\n --accent-secondary: #6366f1; \/* Indigo *\/\n --text-main: #f8fafc;\n --text-muted: #94a3b8;\n --glass-blur: 16px;\n }\n\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 background-image: \n radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.12), transparent 35%),\n radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.12), transparent 35%);\n background-attachment: fixed;\n color: var(--text-main);\n min-height: 100vh;\n line-height: 1.6;\n overflow-x: hidden;\n }\n\n \/* Glassmorphism Header *\/\n header {\n position: sticky;\n top: 0;\n z-index: 100;\n background: rgba(2, 6, 23, 0.7);\n backdrop-filter: blur(var(--glass-blur));\n -webkit-backdrop-filter: blur(var(--glass-blur));\n border-bottom: 1px solid var(--card-border);\n transition: all 0.3s ease;\n }\n\n .nav {\n max-width: 1200px;\n margin: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.2rem 2rem;\n }\n\n .logo {\n font-size: 1.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n letter-spacing: -0.5px;\n }\n\n nav {\n display: flex;\n gap: 2rem;\n }\n\n nav a {\n text-decoration: none;\n color: var(--text-main);\n font-weight: 500;\n font-size: 0.95rem;\n transition: color 0.3s;\n position: relative;\n }\n\n nav a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));\n transition: width 0.3s ease;\n border-radius: 2px;\n }\n\n nav a:hover {\n color: #ffffff;\n }\n\n nav a:hover::after {\n width: 100%;\n }\n\n \/* Hero Section *\/\n .hero {\n max-width: 1000px;\n margin: auto;\n padding: 8rem 2rem 6rem;\n text-align: center;\n animation: fadeIn 1s ease-out;\n }\n\n .hero h1 {\n font-size: clamp(3rem, 5vw, 4.8rem);\n font-weight: 800;\n line-height: 1.1;\n margin-bottom: 1.5rem;\n letter-spacing: -1px;\n }\n\n .text-gradient {\n background: linear-gradient(135deg, #34d399, #818cf8);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .hero p {\n color: var(--text-muted);\n font-size: 1.2rem;\n max-width: 700px;\n margin: 0 auto 2.5rem;\n font-weight: 400;\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1rem 2.5rem;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n color: white;\n border-radius: 9999px;\n text-decoration: none;\n font-weight: 600;\n font-size: 1rem;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);\n }\n\n .btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);\n }\n\n \/* Sections & Grid *\/\n section {\n max-width: 1200px;\n margin: auto;\n padding: 5rem 2rem;\n }\n\n section h2 {\n font-size: 2.5rem;\n margin-bottom: 3rem;\n font-weight: 700;\n text-align: center;\n letter-spacing: -0.5px;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 2rem;\n }\n\n \/* Modern Glass Cards *\/\n .card {\n background: var(--card-bg);\n backdrop-filter: blur(var(--glass-blur));\n -webkit-backdrop-filter: blur(var(--glass-blur));\n padding: 2.5rem;\n border-radius: 1.5rem;\n border: 1px solid var(--card-border);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .card::before {\n content: \"\";\n position: absolute;\n top: 0; left: 0; width: 100%; height: 100%;\n background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);\n z-index: 0;\n opacity: 0;\n transition: opacity 0.3s;\n }\n \n .card:hover::before {\n opacity: 1;\n }\n\n .card:hover {\n transform: translateY(-8px);\n border-color: rgba(255, 255, 255, 0.2);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n }\n\n .card > * {\n position: relative;\n z-index: 1;\n }\n\n .card-icon {\n font-size: 2.5rem;\n margin-bottom: 1.5rem;\n display: inline-block;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n .card h3 {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n color: #f8fafc;\n }\n\n .card p {\n color: var(--text-muted);\n font-size: 1rem;\n margin-bottom: 1.5rem;\n }\n\n .card .tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: auto;\n }\n\n .tag {\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid rgba(255, 255, 255, 0.1);\n padding: 0.4rem 0.8rem;\n border-radius: 2rem;\n font-size: 0.85rem;\n color: #cbd5e1;\n transition: all 0.2s;\n }\n\n .card:hover .tag {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.2);\n }\n \n \/* Missing lists for cards without tags *\/\n .card ul {\n list-style: none;\n }\n\n .card ul li {\n margin-bottom: 0.75rem;\n display: flex;\n align-items: center;\n color: var(--text-muted);\n font-size: 1rem;\n }\n\n .card ul li::before {\n content: '\u2192';\n color: var(--accent-primary);\n margin-right: 0.75rem;\n font-weight: bold;\n }\n\n \/* Code Block *\/\n pre {\n background: rgba(0, 0, 0, 0.4);\n padding: 1.5rem;\n border-radius: 1rem;\n overflow-x: auto;\n border: 1px solid var(--card-border);\n font-family: 'Fira Code', 'Courier New', Courier, monospace;\n font-size: 0.9rem;\n color: #34d399; \/* Match Emerald theme *\/\n margin-top: 1rem;\n }\n\n \/* Footer *\/\n footer {\n text-align: center;\n padding: 3rem 2rem;\n margin-top: 4rem;\n border-top: 1px solid var(--card-border);\n background: rgba(2, 6, 23, 0.8);\n color: var(--text-muted);\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n \/* Animations *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav { flex-direction: column; gap: 1rem; }\n nav { flex-wrap: wrap; justify-content: center; }\n .hero { padding: 6rem 1.5rem 4rem; }\n }\n\n .link-wrapper {\n display: flex;\n justify-content: center;\n margin: 3rem 0;\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header>\n <div class=\"nav\">\n <div class=\"logo\">Java Web Hub<\/div>\n <nav>\n <a href=\"#intro\">Home<\/a>\n <a href=\"#stack\">Tech Stack<\/a>\n <a href=\"#concepts\">Concepts<\/a>\n <a href=\"#roadmap\">Roadmap<\/a>\n <a href=\"#tools\">Tools<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <div class=\"hero\" id=\"intro\">\n <h1>Master <span class=\"text-gradient\">Java Web<\/span> Development<\/h1>\n <p>\n Build secure, scalable, and enterprise-grade web applications.\n Learn modern frameworks, backend technologies, databases, and full-stack\n development with industry best practices.\n <\/p>\n <a href=\"#concepts\" class=\"btn\">Start Building<\/a>\n <\/div>\n\n \n <section id=\"stack\">\n <h2>Technology Stack<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\u2727<\/div>\n <h3>Frontend<\/h3>\n <p>Building intuitive and responsive interfaces.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">HTML5 & CSS3<\/span>\n <span class=\"tag\">ES6+<\/span>\n <span class=\"tag\">Tailwind CSS<\/span>\n <span class=\"tag\">React \/ Angular<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u25c8<\/div>\n <h3>Backend<\/h3>\n <p>Robust server-side logic and enterprise APIs.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Java 17+<\/span>\n <span class=\"tag\">Servlets & JSP<\/span>\n <span class=\"tag\">Spring Boot 3<\/span>\n <span class=\"tag\">RESTful \/ GraphQL<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u25c4<\/div>\n <h3>Database<\/h3>\n <p>Secure data persistence and caching.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">MySQL \/ PostgreSQL<\/span>\n <span class=\"tag\">MongoDB<\/span>\n <span class=\"tag\">Hibernate ORM<\/span>\n <span class=\"tag\">Redis<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"concepts\">\n <h2>Core Concepts<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udcbb<\/div>\n <h3>Hello World Example<\/h3>\n <pre>\n@RestController\npublic class MainController {\n @GetMapping(\"\/\")\n public String home() {\n return \"Welcome to Java Web!\";\n }\n}\n <\/pre>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83c\udfd7\ufe0f<\/div>\n <h3>Architecture<\/h3>\n <p>Scalable patterns for enterprise applications.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">MVC Pattern<\/span>\n <span class=\"tag\">Microservices<\/span>\n <span class=\"tag\">JWT Auth<\/span>\n <span class=\"tag\">Stateless Sessions<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83c\udf31<\/div>\n <h3>Spring Framework<\/h3>\n <p>The definitive framework for Java enterprise apps.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">IoC \/ DI<\/span>\n <span class=\"tag\">Spring MVC<\/span>\n <span class=\"tag\">Spring Security<\/span>\n <span class=\"tag\">Spring Data JPA<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\u27f3<\/div>\n <h3>DevOps & Deployment<\/h3>\n <p>Automating delivery and scaling seamlessly.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Docker & K8s<\/span>\n <span class=\"tag\">Tomcat<\/span>\n <span class=\"tag\">Cloud (AWS\/Azure)<\/span>\n <span class=\"tag\">CI\/CD<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"roadmap\">\n <h2>Learning Roadmap<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">1\ufe0f\u20e3<\/div>\n <h3>Phase 1: Foundations<\/h3>\n <p>Master Core Java, Object-Oriented Programming, Data Structures, HTML, CSS, basic JavaScript, Servlets, and JSP fundamentals.<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-icon\">2\ufe0f\u20e3<\/div>\n <h3>Phase 2: Frameworks<\/h3>\n <p>Dive deep into Spring Boot, build REST APIs, learn relational database integration with Hibernate, and version control using Git.<\/p>\n <\/div>\n <div class=\"card\">\n <div class=\"card-icon\">3\ufe0f\u20e3<\/div>\n <h3>Phase 3: Mastery<\/h3>\n <p>Design Microservices, implement robust Security, configure Cloud Deployment, adopt DevOps practices, and master Performance Tuning.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"tools\">\n <h2>Developer Tools<\/h2>\n <div class=\"grid\">\n <div class=\"card\">\n <div class=\"card-icon\">\u2699\ufe0f<\/div>\n <h3>IDEs<\/h3>\n <p>Feature-rich environments for coding.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">IntelliJ IDEA<\/span>\n <span class=\"tag\">Eclipse<\/span>\n <span class=\"tag\">VS Code<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udd28<\/div>\n <h3>Build Systems<\/h3>\n <p>Manage dependencies and project lifecycles.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">Maven<\/span>\n <span class=\"tag\">Gradle<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-icon\">\ud83d\udee1\ufe0f<\/div>\n <h3>Quality Assurance<\/h3>\n <p>Ensure code reliability and correctness.<\/p>\n <div class=\"tags\">\n <span class=\"tag\">JUnit & Mockito<\/span>\n <span class=\"tag\">Postman<\/span>\n <span class=\"tag\">SonarQube<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer>\n <p>\u00a9 2026 Java Web Development Hub | Engineered for the Modern Web<\/p>\n <\/footer>\n\n <script>\n \/\/ Add a simple script to handle the glow effect tracking on cards\n document.querySelectorAll('.card').forEach(card => {\n card.addEventListener('mousemove', e => {\n const rect = card.getBoundingClientRect(),\n x = e.clientX - rect.left,\n y = e.clientY - rect.top;\n\n card.style.setProperty('--mouse-x', `${x}px`);\n card.style.setProperty('--mouse-y', `${y}px`);\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Java Web Development \u2013 Learning Hub Java Web Hub Home Tech Stack Concepts Roadmap Tools Master Java Web Development Build secure, scalable, and enterprise-grade web applications. Learn modern frameworks, backend technologies, databases, and full-stack development with industry best practices. Start Building Technology Stack \u2727 Frontend Building intuitive and responsive interfaces. HTML5 & CSS3 ES6+ Tailwind […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2167","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2167"}],"version-history":[{"count":14,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167\/revisions"}],"predecessor-version":[{"id":2227,"href":"https:\/\/supercoderpk.com\/index.php?rest_route=\/wp\/v2\/pages\/2167\/revisions\/2227"}],"wp:attachment":[{"href":"https:\/\/supercoderpk.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}