I am trying to learn how to put an image that is places in a folder to put on my website, but it doesn’t show up.

On my CSS, I just typed this: img { width: 950px; height: auto;}

Please help! How do I use images that are in folders? I already checked the folder name but I have not made typing mistakes.

There was a time when we used to create our layouts using the float property.

While not intended for that, it was doing a pretty decent work. Nowadays we have better things to help us create layouts, like Flexbox and CSS Grid, which were made for creating layouts, no hacks, no other extra things to worry about.

The problem with float is that it takes the element out of the normal flow of the document, and the parent's height colapses if its content is not cleared.

In order to fix that, we can use a few hacks, like:

• a dummy element inside the parent element with clear: both;

• overflow: auto; on the parent element

The overflow property with a value other than visible, creates a new block formatting context.

This works fine, but the content outside its padding box is clipped, which might be a problem if you're trying to add a box-shadow to it, for example.

or

• the famous clearfix hack:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

How about creating a new block formatting context without additional unwanted stuff?

Enter display: flow-root;

Browser support: https://caniuse.com/#search=flow-root

Example:

HTML

<div class="container flow-root">
  <div class="float"></div>
</div>

CSS

.container {
  background-color: orange;
}

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: purple;
}

.flow-root {
  display: flow-root;
}

jsfiddle demo: https://jsfiddle.net/xkdbw7q6/

The difference between the clearfix hack and display: flow-root;

jsfiddle demo: https://jsfiddle.net/9afwny63/

Need someone to help me and my team transfer a wix site to html so we can upload to a web host and not be constrained by wix.

Hello, guys

I'm dealing with some HTML & CSS self-learning, I think being part of a community is really helpful for me. I'd like to know how to have a responsive footer with good practices, I've alredy have one, but it looks awfull from the console. What I'm really looking for, is a web page have a main header, content and a footer with no need of using margins for placing them.

The orange block is related to the margin used on CSS. Would anyone help me fix this? Here is my bunch of HTML and CSS:

 <footer>

<div class="home_sci"> <a href="#"><i class='bx bxl-youtube' ></i></a> <a href="#"><i class='bx bxl-tiktok' ></i></a> <a href="#"><i class='bx bxl-instagram' ></i></a> <a href="#"><i class='bx bxl-facebook' ></i></a> </div> <div class="copy"> <p class="copy_text">\&copy; 2024 \&#124; Todos los derechos reservados</p> </div> </footer>

footer{
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 2rem;
    margin-top: auto;
    max-width: 1200px;
    align-items: center;
}

.home_sci{
    position: flex;
    bottom: 30px;
    width: 90%;
    max-width: 220px;
    display: flex;
    justify-content: space-between;
}

.copy{
    margin-left: auto;
    align-content: center;
    letter-spacing: 1px;
}

.copy_text{
    color: #fff;
}

I've been trying to learn html and css for first time but i dont understand very well, its my first time coding and im trying to learn something before i go to the university :p.

Bonjour tout le monde !

Je suis entrain de créer un site web avec des animations mais j'ai un problème, je veux une animation de ligne qui apparait quand je passe la souris dessus donc ça pas de soucis j'ai réussi mais le problème c'est que le texte ce masque aussi mais ça je veux pas ... voici mon code... savez-vous pourquoi ?

I want to get into the business of templates but Im not sure if HTML CSS IS Enough to get me in as Im currently learning javascript. Please give me some passive income ideas with just HTML CSS besides making a course or youtube channel

Thanks all

1. vercel-labs/json-render  - Build AI-generated dashboards and data visualizations. Users can create UIs from prompts, and you control exactly which components the AI can use.

2. vercel-labs/skills  - CLI that adds specialized abilities to your AI coding assistant (works with Claude Code, Cursor, Windsurf, etc.). Install skills for different tasks with one command.

3. vudovn/antigravity-kit  - Ready-made AI agent templates with 20 specialists and 37 skills. Just describe what you need and it picks the right expert automatically.

4. JimLiu/baoyu-skills  - Skills for generating images, slide decks, and visual content. Helpful if you're building marketing materials or content alongside your frontend work.

5. antfu/skills  - Anthony Fu's curated skills for Vue, Nuxt, Vite, and modern frontend tools. Auto-generated from official docs so they stay current.

Hi folks! I'm doing a school project, and have wracked my brain trying to figure out how to fix this horrendous gap in my header. I'd love for the text to be aligned closer to the top, but have no idea how to adjust it without wrecking the photos I've painstakingly put in place. Please see the second photo for the horrible gap. Please be kind, I'm still learning. Thank you!

how to make a border around the k letter like that(the blue border)

need help asap!

so me and my cousin discuss about this html i made she dont like rgb things and say this thing looks awfull but i think it looks cool i spend 2 hours making this and i wonder your toughts?

I’m building a collectible card e-commerce platform (sports cards, Pokémon, TCG) and looking for a junior frontend developer to help refine and improve the site.

The site is already live and built in Lovable.dev, so this is focused on polishing and improving, not starting from scratch.

Main areas of focus:

Improving UI/UX and overall site continuity

Enhancing animations and transitions (pack selection, reveal flow, etc.)

Cleaning up layout, spacing, and responsiveness

Making the experience feel more premium and cohesive

The project also uses AI tools (OpenAI + Replicate/FLUX) for image generation and visual assets, so experience—or interest—in AI-assisted development is a big plus.

I’m looking for someone who:

Is early in their dev career or still in school

Has solid HTML/CSS/JavaScript skills

Has a good eye for design and UX

Is comfortable working in Lovable.dev (or willing to learn quickly)

Communicates well and is reliable

Bonus: If you’re into card collecting (sports cards, Pokémon, etc.), that’s a big plus—you’ll naturally understand what makes this kind of experience feel legit and exciting.

This will start as a paid test project with strong potential for ongoing work as the site grows.

Would love to find the perfect candidate to grow with the company.

right now i am in 3rd in tier 3 clg in bengaluru, india. everytime i apply for a job application either i got directly selected with a offer letter in a scam company or just got rejected for not being in 4th year or in their preferred location. gettin a internship off-campus is way harder then a getting a off-campus job

I have recently started learning html and css. I'm really enjoying it but feel a little stuck on what to create or how to even start. Any ideas or suggestions where to start?

Ok so i'm curious i really like this image the way it was done but when saved it's saved as a png Is it possible to download this file and use it or a way to recreate something similary? Is this Controlled by CSS or would this be something else? If so sorry if i have it in the wrong area. But any help would be appreciated. For those that ask or need more info. It is located from here "https://wise.com/login/verify-email-checkpoint?decision=approve#/success"

Badges colors TailwindCSS with border theme dark slate generated by Snipzin.

https://www.snipzin.com/snippets/sotgxbo4ok

Just wanted to say thank you a lot u/Anemina I solved a lot of the problem cause of you I was scratching my head a bit because my radio element was on the same line as my label element but I just used <br> to space them but are there alternate solution for when I come across this problem again?

Html

<!DOCTYPE html>

<html lang="en"> <head> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <title>Survey Form</title> </head> <body> <div class="wrapper" > <form action="" > <div class="candy"> <h1 id="title" >Survey Form</h1> <p id="description" >Please fill out this form with the required information</p> </div> <div class="candy"> <label for="first-name">First Name</label> <input id="first-name" type="text"> <label for="last-name">Last Name</label> <input id="last-Name" type="text"> <label for="email">Email</label> <input id="email" type="email"> <label for="number">Number</label> <input id="number" type="number" min="9" max="9" > <label for="age">Age</label> <input id="age" type="number" min="13" max="100" > </div> <div class="candies"> <legend>What is your Gender</legend> <label for="male"> <input class="radio" name="gender" value="male" id="male" type="radio" checked>Male</label> <br> <label for="female"> <input class="radio" name="gender" value="female" id="female" type="radio">Female</label> </div> <div class="candy"> <label for="education-level">What is your Education Level?</label> <select id="education-level"> <option>Highschool</option> <option>Undergraduate</option> <option>Graduate/Postgraduate</option> <option>Other</option> </select> </div> <div> </div> </form> </div> </body> </html>

Css

.wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; min-width: 300px; max-width: 400px; width: 60vh; }

h1, p { margin: 1em auto; text-align: center; font-size: 20px; }

.candies { display: block; margin: 0.5rem; margin-right: 10px; }

.candy input, select { display: block; margin-bottom: 10px; margin: 0.5rem; width:100%; border-radius: 10px; }

.candy label { display: block; margin-bottom: 5px; margin: 0.5rem; width:100%; }

.radio { display: inline; align-items: center; }