Responsive Personal Portfolio Website Using HTML CSS And JavaScript | Dark/Light Mode
Why Stack Overflow recommends it
Stack Overflow users cite it when they are stuck partway through the tutorial, usually with a nav toggle, modal, tab switcher or CSS file that does not behave like the video.
Recommended by 1 people across 1 different months, 2021 to 2023.
What it is
A 2.5-hour build-along tutorial by Bedimcode that creates a responsive personal portfolio site from scratch with HTML, CSS and JavaScript, including a dark/light mode toggle. It walks through each section (header, home, skills, qualification, services, portfolio, contact, footer) and provides source files on GitHub.
What people said
Recommends Nitin Remella · 2021-05 · Stack Overflow · on “Unresponsive hamburger icon in HTML”
[this video] I was trying to make a website by following a YouTube tutorial and i cant seem to toggle the navigation bar it doesnt collapse. I have tried different videos but it is still not working. I am very new to programming and this is my first project. Thank-you in advance for your guidance. const navMenu = document.getElementById('nav-menu'), navToggle = document.getElementById('nav-toogle'), navClose = document.getElementById('nav-close') if (navToggle) { navToggle.addEventListner('click', () => { navMenu.classList.add('show-menu') }) } @import url(' [LINK] '); * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { margin: 0 0 var(--header-height) 0;
Cites Yogesh s Chowdgund · 2021-08 · Stack Overflow · on “JavaScript Modal is not working even after all the classes and id are correct”
I am creating a modal using HTML,CSS and js by watching this video [this video] The problem is when I click on "view more"(Trigger that opens a modal) the modal doesn't open tutor has created a function which accepts "modalclick" parameter but he didn't place this parameter in html. below is my Html const mviews = document.querySelector('.s_modal'), mbtns = document.querySelector('.s_button'), mcloses = document.querySelector('s_modal-close'); let modal = function(modalclick) { mviews[modalclick].classList.add('act-modal'); } mbtns.forEach((mbtn, i) => { mbtn.addEventListener('click', () => { modal(i); }); }); mcloses.forEach((mclose) => { mclose.addEventListener('click', () => { mviews.forEach((
Cites Yogesh s Chowdgund · 2021-08 · Stack Overflow · on “Unable to toggle between division”
I am creating a portfolio by watching this tutorial - [this video] (I am stuck at 1:12:13) I have created a qualification section. there are two division that is education and work. By default it shows education tab. when I click on the work tab it shows content in the work tab. But when I click back on the education tab it doesn't show the content of the education tab. actually i am beginner to js. i am unable to get the error in the js file. my Html code is <section class="qualification section"> <h2 class="section_title">Qualification</h2> <span class="section_subtitle">My personal journey</span> <div class="q_container container"> <div class="q_tabs"> <div class="q_btn btn-flex q_active " dat
Cites user15468984 · 2021-09 · Stack Overflow · on “HTML index not applying CSS”
I'm relatively new to Web Design, and I've followed this tutorial [this video] to create a responsive webpage. Thing is, there seems to be a problem with my .CSS, because the webpage is not looking as it should. Also, I am just opening the index.html in Edge, from my webpage folder, don't know if that has something to do. Inside this folder, I have the index.html and the assets folder. Inside assets, I have several folders containing the css, js, img, pdf resources. This is what the html looks like: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--==================== UNICONS ====================--> <link rel
Cites Valentin · 2022-01 · Stack Overflow · on “The bar doesn't display, can't follow the tutorial beginner developer”
I tried to follow this tutorial [this video] but I got stuck at minute 52:40. When he is giving the bar height and color, I do the same thing but it doesn't display. Can anyone help me? I would be grateful .skills__bar, .skills__percentage { height: 5px; border-radius: .25rem; } .skills__bar{ color:red; } <div class="skills__titles"> <h3 class="skills__name">Photoshop</h3> <span class="skills__number">80%</span> </div> <div class="skills__bar"> <span class="skills__percentage skills__psd"></span> </div>
Cites Keetleyr · 2023-01 · Stack Overflow · on “How do I get this css to work with my html?”
I’m following a tutorial that uses html, css and JavaScript to create a portfolio however none of the css rules are working. When I inspect the page it shows all the css crossed out with warning signs next to them. What can I do? /*==================== GOOGLE FONTS =======================*/ @import url(" [LINK] "); /*==================== VARIABLES CSS =======================*/ :root { --header-height: 3 rem; /*=========== Colors ============*/ /* change fovorite color */ --hue-color: 142; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/ /* HSL color made */ --first-color: hsl(var(--hue-color), 69%, 61%); --first-color-second: hsl(var(--hue-color), 69%, 61%); --first-color-alt: hsl(var(--hue-