DEV Community

Sathish A
Sathish A

Posted on Edited on

Day 1:“Starting My Java Full stack Journey: Building the Login Page with HTML and CSS”

#beginners #html #webdev #programming

Hey everyone!

Today marks Day 1 of my Java Full Stack Development course, and I’m super excited to share what I learned and built on this first day.

1.What we covered:

We kicked off with the foundations of web development — HTML and CSS — the backbone of every web page you see. Even though I’ve heard these terms before, today I understood why they matter and how they work together.

Here’s a quick rundown of the key topics:

</> HTML (HyperText Markup Language):

  1. The structure of a web page
  2. Tags like div,form,input,button
  3. Organizing content into meaningful sections

CSS (Cascading Style Sheets):

  1. Styling and making pages look good
  2. Selectors, properties, and values
  3. Specific focus on: 🔹box-sizing (especially border-box) — important for consistent layouts 🔹 transition— adding smooth animations when something changes on the page

What I Built:

To practice, I created a simple login page — and honestly, it felt great to see it come alive!

Some details I worked on:

1.Centered a login box on the page
2.Added inputs for username and password
3.Styled the box using box-sizing: border-box to control padding and borders easily
4.Added a hover transition effect on the login button so it smoothly changes color when you hover over it

Here’s a sneak peek of what I implemented:

<div class="container">
        <h1>Login</h1>
        <form action="">
            <input type="test" placeholder="Username" required>
            <input type="password" placeholder="Password" required>
        <button type="submit">Login</button>
        <p>Don't have an account? <a href="">Sign up</a></p>
        </form>
</div>
Enter fullscreen mode Exit fullscreen mode 
.container input{
            width:100%;
            height:6vh;
            margin-bottom: 15px;
            padding:5px;
            transition: border-color 0.9s;
            border-radius: 6px;
            border:1px solid gray;
        }
        .container input:focus{
            border-color: rgb(36, 36, 167);
            outline:none;
        }
        button{
            width:100%;
            height: 6vh;
            background-color: rgb(137, 137, 236);
            color:white;
            border-radius: 6px;
            font-weight: 800;
        }
        button:hover{
            background-color: rgb(73, 73, 202);
        }
        .container p{
            margin-top: 15px;
        }
        .container p a{
            text-decoration: none;
            color: rgb(98, 98, 209);
        }
        .container p a:hover{
            text-decoration: underline;
        }
Enter fullscreen mode Exit fullscreen mode


Key Takeaways:

✔ box-sizing: border-box → avoids surprises when adding padding and borders, because the total width stays predictable.

✔ transition → instantly makes interactions feel smoother and more modern.

It’s amazing how small details like these can really level up the user experience!

⏭ What’s Next?

Today, we’ll be diving into JavaScript basics to bring interactivity to our pages. I can’t wait to connect the structure + styling + logic together and make something more dynamic.

Stay tuned for more updates as I keep learning and building!

Top comments (0)