Weekly Code Quickies

Become a full stack web developer by learn HTML, CSS, JavaScript, TypeScript, React JS, Next.js , Tailwind CSS, Bootstrap, Git &GitHub, and more... Join me now in this awesome adventure!

Author: Norbert B.M.

Weekly Code Quickies is a podcast designed for programmers and developers of all skill levels. Each episode is a bite-sized, quick-hit of valuable information and tips on a specific programming languages, back to front-end frameworks, best tools, emerging technologies, and best practices for working remotely. The podcast is perfect for those who are short on time but still want to stay up-to-date with the latest developments in the industry, including the latest tech news, new technologies, and gaming industry updates. norbertbmwebdev.substack.com
Be a guest on this podcast

Language: en

Genres: News, Tech News

Contact email: Get it

Feed URL: Get it

iTunes ID: Get it

Get all podcast data

Listen Now...

Create a Stunning Portfolio Landing Page with Dark Mode Toggle
Sunday, 16 March, 2025

DescriptionLearn how to create a beautiful and responsive portfolio landing page with a dark mode toggle feature. Follow this step-by-step guide to enhance your web development skills and showcase your projects in style.Step-by-Step Guide1. Setup Your Project* Create a new folder for your project.* Inside the folder, create two files: index.html and style.css.2. HTML Structure* Open index.html and add the basic HTML structure.* Add a navbar, hero section, projects section, and contact section.* Include a button for toggling dark mode. Portfolio My Portfolio 🌙 Hello, I'm Norbert A Passionate Web Developer View Projects My Projects Project 1 Description of project 1. Project 2 Description of project 2. Project 3 Description of project 3. Project 4 Description of project 4. Project 5 Description of project 5. Project 6 Description of project 6. Contact Me Email: yourname@example.com // Dark Mode Toggle const toggle = document.getElementById("theme-toggle"); toggle.addEventListener("click", () => { document.body.classList.toggle("dark-mode"); }); 3. Styling with CSS* Open style.css and add general styles for the body and container.* Style the navbar, hero section, projects section, and contact section.* Add styles for dark mode./* filepath: c:UsersNorbertDesktopWeb Devyoutube-web-dev-2025-repoideas316-03-landingpageregularstyle.css */ /* General Styles */ * { margin: 0; padding: 0; scroll-behavior: smooth; box-sizing: border-box; } body { font-family: "Inter", sans-serif; margin: 0; padding: 0; background-color: #f8fafc; color: #1e293b; transition: background-color 0.3s, color 0.3s; } .container { width: 90%; max-width: 1200px; margin: auto; padding: 20px; } /* Navbar */ .navbar { background: #ffffff; padding: 1rem 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); display: flex; justify-content: space-around; align-items: center; border-radius: 8px; position: sticky; top: 0; /* z-index: 1000; */ } .theme-toggle { background: #e2e8f0; border: none; padding: 0.5rem 1rem; cursor: pointer; border-radius: 8px; transition: 0.3s; &:hover { background: #cbd5e1; } } /* Hero Section */ .hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; .container { display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; background: #1e3a8a; color: white; border-radius: 12px; height: 200px; } .highlight { color: #facc15; font-weight: bold; } .btn { display: inline-block; margin-top: 20px; padding: 12px 24px; background: #facc15; color: #1e3a8a; font-weight: bold; text-decoration: none; border-radius: 8px; transition: 0.3s; &:hover { background: #eab308; } } } /* Projects Section */ .projects { padding: 60px 20px; background: #f1f5f9; text-align: center; border-radius: 12px; .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .project-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: transform 0.3s; &:hover { transform: translateY(-5px); } } } /* Contact Section */ .contact { text-align: center; padding: 50px 20px; } /* Dark Mode */ .dark-mode { background-color: #1e293b; color: #f8fafc; .navbar { background: #334155; } .theme-toggle { background: #475569; color: white; &:hover { background: #64748b; } } .projects { background: #475569; } .project-card { background: #334155; color: white; } } 4. Dark Mode Toggle* In index.html, add a script to toggle dark mode when the button is clicked. // Dark Mode Toggle const toggle = document.getElementById("theme-toggle"); toggle.addEventListener("click", () => { document.body.classList.toggle("dark-mode"); }); 5. Enhancements* Add transitions for smooth color changes.* Use CSS Grid for a responsive projects section.* Add hover effects for buttons and project cards.By following these steps, you'll create a visually appealing portfolio landing page with a modern dark mode feature. This project will not only enhance your web development skills but also provide a professional platform to showcase your work. Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe