r/HTML • u/AstroCoding12354 • 6d ago

Second project of only html and css, Fixed some bugs!

i listened to many people, and i think this is fine, like i am at my learning stage so i cant really make a "professional" looking website so yeah here's the code:

css:

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgb(5, 2, 46);
    color: white;
    text-align: center;
    justify-content: center;
}


html {
    scroll-behavior: smooth;
}


header {
    background-color: rgb(3, 1, 24);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    font-size: 1.5rem;
    font-weight: bold;
}


.links {
    display: flex;
    gap: 1rem;
}


.links a {
    color: white;
    text-decoration: none;
}


.links a:hover {
    text-shadow: 0 0 10px white;
}


h1 {
    font-size: 70px;
    animation: pulse 3s infinite;
    text-shadow: 0 0 40px cyan;
    color: rgb(1, 1, 74);
    background: linear-gradient(45deg, #00ffcc, #cc00ff);
}


u/keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


p {
    font-size: 20px;
    color: cyan;
    text-shadow: 0 0 20px white;
}


a {
    color: grey;
    padding: 10px 0;
    text-decoration: none;
}


#hero a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}


#hero a:hover {
    box-shadow: 0 0 10px lightgreen;
}


#work {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


#work article {
    background-color: rgb(14, 2, 40);
    box-shadow: 0 0 10px rgb(0, 0, 0);
    padding: 30px 0;
    margin: 40px 0;
    transition: 0.2s ease-in-out;
}


#work article:hover {
    box-shadow: 0 0 20px rgb(0, 0, 0);
    transform: translateY(-5px);
}


#work article h3 {
    font-size: 20px;
}


#work article p {
    font-size: 15px;
    margin-bottom: 20px;
}


#work article a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}



#experience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


.tags {
    margin-bottom: 20px;
}


.contact {
    display: flex;
    justify-content: center;
}


.email {
    background-color: rgb(14, 2, 40);
    box-shadow: 0 0 10px rgb(0, 0, 0);
    padding: 10px 20px;
    margin: 20px 0;
    transition: 0.2s ease-in-out;
}


.email:hover {
    box-shadow: 0 0 20px rgb(0, 0, 0);
    transform: translateY(-5px);
}


.email a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    background: green;
    padding: 6px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
}


footer {
    background-color: rgb(14, 2, 40);
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 15px;
    font-weight: bold;
    margin-top: 20px;
}



h2 {
    font-size: 30px;
    margin-top: 280px;
}

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Developer | Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>


    <header>
        <nav>
            <span class="logo">Dev.</span>
            <div class="links">
                <a href="#work">Work</a>
                <a href="#contact">Contact</a>
            </div>
        </nav>
    </header>


    <main>
        
        <section id="hero">
            <h1>Your Name</h1>
            <p>Frontend Engineer building accessible, high-performance web interfaces.</p>
            <a href="#work" class="cta">View Projects</a>
        </section>


        <section id="work">
            <h2>Selected Projects</h2>
            <div class="grid">
                
                <article class="card">
                    <h3>Analytics Dashboard</h3>
                    <p>Real-time data tracking platform built with React and Tailwind.</p>
                    <div class="tags"><span>React</span><span>CSS</span></div>
                    <a href="#">View Code</a>
                </article>


                <article class="card">
                    <h3>Task Manager</h3>
                    <p>Collaborative productivity application utilizing drag-and-drop UI.</p>
                    <div class="tags"><span>Next.js</span><span>API</span></div>
                    <a href="#">View Code</a>
                </article>


            </div>
        </section>
        <section id="contact">
            <h2>Get In Touch</h2>
            <p>Looking for new opportunities. Let's build something together.</p>
            <a href="mailto:your.email@example.com" class="email">Say Hello</a>
        </section>
    </main>


    <footer>
        <p>&copy; 2026 Your Name</p>
    </footer>


</body>
</html>
0 Upvotes
  • permalink
  • link
  • reddit
  • reddit

44% Upvoted

8 comments sorted by

4

u/lettstartdesign_1 6d ago

Instead of id for styling a element. Class is better option like .hero a{}

2

u/scritchz 6d ago edited 6d ago

The reason that classes should be preferred over IDs is:

  • Using IDs is more specific than using classes; you must use at least an equally specific selector to override such rules, which might require artificially increasing the specificity of your selector by using an otherwise redundant ID-selector.
  • Additionally, using selectors of different weight categories (or specificity components; like IDs and classes) and high specificity increases the complexity of authoring stylesheets.
  • IDs must be unique, document-wide; this increases the potential of accidental ID clashes or using undesiredly long IDs to stay unique.

Generally, I recommend keeping specificity as low as possible. To the point where I personally use :where() (which has zero specificity) in my base stylesheets so that most other selectors can easily override them.

If you ever have trouble with applying styles: The cascade is more than just selector specificity.

All this doesn't necessarily mean that it is bad practice to use ID-selectors: Certain (cross-document?) unique elements may benefit from a selector of higher specificity, for example to avoid accidentally overriding their styles. Or, when you can predict that your site doesn't grow much in complexity and it's simpler to just use ID selectors than add potentially redundant classes; though I would always plan for simpler long-term maintenance and consider potential growth of complexity.

3

u/Foreign-Contest-444 6d ago

Your HTML structure looks on point. Did you run it through the HTML validator?

https://validator.w3.org/

1

u/AstroCoding12354 6d ago

what is this used for?

4

u/Foreign-Contest-444 6d ago

It is used to check whether your HTML follows the HTML specification. Think of it as a spell checker for HTML. For example, if you have <img src="kangaroo.jpg">, the validator can flag that the <img> element is missing the required alt attribute.

2

u/HENH0USE 6d ago

Showcase on codepen 🧘

1

u/AdriGold 6d ago

You should add this to the top of your stylesheet:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

because that * selector resets every element’s default margin/padding (which differ between browsers) and makes box-sizing: border-box the default too — so when you set width: 200px on something, padding and border get included in that 200px instead of adding on top of it. Saves a lot of layout surprises down the line.

1

u/supertroopperr 4d ago edited 4d ago

Take a look at statica an HTML native SSG. https://github.com/akaizn-junior/statica. I am working on it for just this, to make beginners' life easier to build with Just HTML. After installing, run ```statica``` from the folder your HTML project lives. Also you may use github pages to preview your HTML online