Build a Website with HTML5 & CSS with Jordan Hudgens
Why Stack Overflow recommends it
Stack Overflow users link it when they are novices following the tutorial step by step and cite it as the source of the code they are asking about.
Recommended by 1 people across 1 different months, 2020 to 2021.
What it is
A beginner crash course by instructor Jordan Hudgens, posted on Udemy's channel, that builds a styled portfolio-style website from scratch. It covers HTML5 page structure, CSS selectors, the box model, flexbox, a nav bar, a contact form, and basic media queries.
What people said
Recommends 7urney · 2020-05 · Stack Overflow · on “I need to darken an image using javascript within html”
css .image-darken { transition: 1s; filter: brightness (10%); } javascript const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper'); portfolioItems.forEach(portfolioItem => { portfolioItem.addEventListener('mouseover', () => { console.log(portfolioItem.childNodes[1].classList); portfolioItem.childNodes[1].classList.add('image-darken'); }); }); HTML <div class="portfolio-item-wrapper"> <div class="portfolio-img-background" style="background-image:url(images/portfolio1.jpg"></div> <div class="img-text-wrapper"> <div class="logo-wrapper"> <img src="images/quip.png"> </div> <div class="subtitle"> I built the Quip Ecommerce platform, named a Top 25 Invention by Time Magazine in
Cites gg hh · 2020-12 · Stack Overflow · on “href won't apply CSS”
Hi my CSS won't apply to my about section - I don't know why. I've tried using a different browser but no luck. I have also tried using a different IDE but didn't fix it. Any help would be using thanks. I have been following a tutorial from youtube [this video] . My code is the same as his and I don't know why it's not working. I'm not sure why please help .nav-wrapper { display: flex; justify-content: space-between; padding: 38px; } .left-side { display: flex; } .nav-wrapper > .left-side > div { margin-right: 20px; font-size: 0.9em; text-transform: uppercase; } .nav-link-wrapper { height: 22px; border-bottom: 1px solid transparent; transition: border-bottom 0.5s; } .nav-link-wrapper a { color: #
Cites mike · 2020-12 · Stack Overflow · on “class not found for all my photos after i did everything broke”
I'm trying to use the grid CSS (I'm very new to HTML/CSS) my goal is to make the photos is a 1fr 1fr 1fr grid. but only three of them work. as you can see lol. I'm following along with the video from [this video] I don't know anything else except. the code for content-wrapper / portfolio-item-wrapper / portfolio-img-background not sure why it broke it done it after I added the photos I don't know why to please any help would be so helpful. /* master styles */ .body { margin: 0px; } .container { display: grid; grid-template-columns: 1fr; } /* NAV STYLES */ .nav-wrapper { display: flex; justify-content: space-between; padding: 38px; } .left-side { display: flex; } .nav-wrapper > .left-side > div {
Cites Mj _ · 2021-01 · Stack Overflow · on “Why is image not appearing in HTML?”
So iam a first time HTML and CSS user, and was making a website using a YouTube video, however i reached a stage where i want to show the backround image onto the screen however ive followed the video exactly and it only shows my logo image and not the background image. This was the youtube video : [this video] I got up to 1:00:0 into the video after that it no longer worked like in the video. /* Master Styles */ body { margin: 0px; } .container { display: grid; grid-template-columns: 1fr; } /* Nav Styles*/ .nav-wrapper{ display:flex; justify-content: space-between; padding: 40px; } .left-side{ display:flex; } .nav-wrapper > .left-side > div { margin-right: 20px; font-size: 0.9em; text-transform: