allfeeds.ai

 

Weekly Code Quickies  

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

 

We also recommend:


Podcast de Flopy.es
Marcos Matas Sobral

TODAY in TECH

Enterprise Security Weekly (Video)
Security Weekly Productions

Leveling Up in Construction with Wm. T. Spaeder
wmtspaeder

Tipos de Mídias
Junior Ericeirs

Grooming
Jonathan Molina

FIRST Impressions Podcast
FIRST.Org

Influencers

The Friday Nooner
GrepBeat

Health Business Matters
RSM Australia



Lets Talk
Lets Talk