This content originally appeared on DEV Community and was authored by Rajeev Kumar
Hello, Dev Community!
I’m excited to share my solution to this project as part of my journey to regain confidence in front-end development. There was a time when I lost touch with the basics, and I realized I needed to revisit simple practices. That’s when I discovered the Frontend Mentor platform. I downloaded the starter files for the Huddle landing page with curved sections project, which is a junior-level challenge, perfect for brushing up on my HTML and CSS skills.
The Build Process of the Project
As per the instructions, I downloaded the starter files, and here's how I approach this project:
Setting Up the Project:
When starting the project, I wanted to make sure the code was organized and easy to maintain, especially for future updates. To achieve that, I split the CSS into three different files. One for general reusable components, one dedicated to the main styling, and another just for media queries. This setup not only made the code more readable but also kept everything modular, which is super helpful if I need to make changes later on.
Building webpage & styling:
While building the webpage, my focus was on creating a component-driven layout. To keep things modular and clean, I broke the page down into separate <section> elements for each part of the design. I styled these sections using my general reusable components and main styling files, making sure everything was consistent and easy to maintain.
Making the Page Responsive:
To keep things organized, I created a separate queries.css file just for the responsive code, making sure nothing got too cluttered. While working on responsiveness, I learned about new HTML tags like <picture> and got a better understanding of fluid layouts, breakpoints, and the max-width property.
One habit I’ve developed is setting the default font size to 62.5% (10px) at the start of each project. This makes it easier to work with rem units and helps ensure a fluid layout across all devices.
Testing and Optimization:
After completing the front-end design, I started testing the site using tools like CanIuse and Google Lighthouse. I focused on four key areas: Performance, Accessibility, Best Practices, and SEO.
For accessibility, I made sure to check the contrast ratio and ensure all images had proper alt attributes. For performance, my goal was to optimize load times, while best practices were implemented using the BEM methodology for clean, maintainable HTML. To improve SEO, I included essential meta tags and followed best practices to help the page rank well.
On the optimization side, I reduced the intrinsic size of images so that web document size was reduced from 2MB down to just 8KB — to ensure they load quickly and efficiently.
Launch and Maintenance of the project:
The project is now open source and available on GitHub. You can check it out here and view the live version on Netlify here. If you spot anything that could be improved, feel free to make changes and send a pull request—I'd love to collaborate and push those updates!
Conclusion
After completing this project, I’ve gained confidence in building landing pages and making them responsive across different devices. I also got comfortable testing with dev tools and planning the process of deploying to Netlify.
If you find something insightful, feel free to drop a comment and let’s figure out something interesting together!
You can also connect with me on LinkedIn, Twitter(X), and Threads.
This is my first blog so I took help from the AI Models to avoid grammatical mistakes and share my story with words to make it readable to the readers but in future, I will share and contribute my story and values within my own words.
This content originally appeared on DEV Community and was authored by Rajeev Kumar
Rajeev Kumar | Sciencx (2024-09-06T00:04:00+00:00) How I Built Huddle Landing Page with Curved Sections. Retrieved from https://www.scien.cx/2024/09/06/how-i-built-huddle-landing-page-with-curved-sections/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.