From Sidebars to Login forms : Lessons from My Frontend Practice Projects

A few weeks ago, I finally decided to start learning web development. I want to become one of the best frontend developers in the world. I know it will take years of hard work, but I truly believe it’s possible. So, I began with the basics: HTML and CSS. After learning the core syntax and understanding how everything works, I started building small projects to put my knowledge into practice. In this blog post, I’ll walk through 4 of those mini-projects — like sidebars, login forms, user profile cards, and more. I’ll explain how I built them, and the challenges I faced along the way. Sidebar Menu (Built Without JavaScript) My first project was a sidebar menu that slides in when clicking a hamburger icon. I used two icons — one to open, one to close — and challenged myself to build the entire interaction without using JavaScript. To do this, I relied on an HTML checkbox input, absolute positioning, and CSS transitions. The sidebar starts hidden off-screen and becomes visible when the checkbox is checked. I also toggled the visibility of the icons using CSS only. One main difficulty I faced was positioning the icons properly. Using absolute positioning made alignment tricky, especially on different screen sizes. If I had to rebuild this now, I’d definitely use Flexbox for better layout control, since I’ve gained more experience with it through other projects. Link: Responsive Login Form The second project I worked on was a login form. The biggest challenge here was making it responsive. This is the project where I really started to apply media queries — even though I already knew about them, I had never used them this way before. One part that gave me a hard time was the footer, especially trying to space the icons evenly. It was tough to align everything properly across different screen sizes. Through this experience, I gained a much better understanding of how media queries work in real use cases. If I were to redo this project, I’d focus more on mastering footer layout techniques, to make it cleaner and easier to manage. It was difficult when I built it, but it taught me a lot. Link : https://alpha1207vj.github.io/Fontawesome-login-form-/ User Profile Card with Dark/Light Mode The third project I built was a user profile card, designed to represent myself. It included some cool features like a dark mode and light mode, along with smooth animations to switch between them. This was a project I followed from a tutorial, but even so, I learned a lot. For example, I got a better understanding of the filter property and how to use object-position for images, which was quite interesting. Although I followed a tutorial to build it, I realized that I shouldn’t rely on tutorials as the main way to create projects. If I ever need something specific, I’ll refer to a tutorial for guidance, but I won’t base entire projects on them. The key is to practice and build things independently, because simply recreating a tutorial result doesn’t teach as much as working through your own problems and solutions. Link: https://alpha1207vj.github.io/USER-CARD/ Looking back, I’ve gained a much better understanding of what I want to do in web development. I’m more confident now, though I still have a long way to go. I’ve come to realize how much I enjoy working with the web, and I understand now why I’m so passionate about it. I also have a clearer vision of how a webpage should be structured. My next challenge is to move away from small tutorials and instead start working on actual web pages. I’m planning to visit platforms like Template.org and HTML5, download templates, and recreate them on my own. This will help me understand how websites are built, how elements are positioned, and how to make them responsive. I think this will be an exciting next step in my learning journey. That’s it for this blog post. I hope you enjoyed reading it. See you next time!

Apr 30, 2025 - 22:04

From Sidebars to Login forms : Lessons from My Frontend Practice Projects

A few weeks ago, I finally decided to start learning web development. I want to become one of the best frontend developers in the world. I know it will take years of hard work, but I truly believe it’s possible.

So, I began with the basics: HTML and CSS. After learning the core syntax and understanding how everything works, I started building small projects to put my knowledge into practice.

In this blog post, I’ll walk through 4 of those mini-projects — like sidebars, login forms, user profile cards, and more. I’ll explain how I built them, and the challenges I faced along the way.

Sidebar Menu (Built Without JavaScript)

My first project was a sidebar menu that slides in when clicking a hamburger icon. I used two icons — one to open, one to close — and challenged myself to build the entire interaction without using JavaScript.

To do this, I relied on an HTML checkbox input, absolute positioning, and CSS transitions. The sidebar starts hidden off-screen and becomes visible when the checkbox is checked. I also toggled the visibility of the icons using CSS only.

One main difficulty I faced was positioning the icons properly. Using absolute positioning made alignment tricky, especially on different screen sizes. If I had to rebuild this now, I’d definitely use Flexbox for better layout control, since I’ve gained more experience with it through other projects.
Link:

Responsive Login Form

The second project I worked on was a login form. The biggest challenge here was making it responsive. This is the project where I really started to apply media queries — even though I already knew about them, I had never used them this way before.

One part that gave me a hard time was the footer, especially trying to space the icons evenly. It was tough to align everything properly across different screen sizes.

Through this experience, I gained a much better understanding of how media queries work in real use cases. If I were to redo this project, I’d focus more on mastering footer layout techniques, to make it cleaner and easier to manage. It was difficult when I built it, but it taught me a lot.

Link : https://alpha1207vj.github.io/Fontawesome-login-form-/

User Profile Card with Dark/Light Mode

The third project I built was a user profile card, designed to represent myself. It included some cool features like a dark mode and light mode, along with smooth animations to switch between them.

This was a project I followed from a tutorial, but even so, I learned a lot. For example, I got a better understanding of the filter property and how to use object-position for images, which was quite interesting.

Although I followed a tutorial to build it, I realized that I shouldn’t rely on tutorials as the main way to create projects. If I ever need something specific, I’ll refer to a tutorial for guidance, but I won’t base entire projects on them. The key is to practice and build things independently, because simply recreating a tutorial result doesn’t teach as much as working through your own problems and solutions.

Link: https://alpha1207vj.github.io/USER-CARD/

Looking back, I’ve gained a much better understanding of what I want to do in web development. I’m more confident now, though I still have a long way to go. I’ve come to realize how much I enjoy working with the web, and I understand now why I’m so passionate about it.

I also have a clearer vision of how a webpage should be structured. My next challenge is to move away from small tutorials and instead start working on actual web pages. I’m planning to visit platforms like Template.org and HTML5, download templates, and recreate them on my own. This will help me understand how websites are built, how elements are positioned, and how to make them responsive. I think this will be an exciting next step in my learning journey.

That’s it for this blog post. I hope you enjoyed reading it. See you next time!