The latest articles on Forem by Suhani Shaikh (@suhanii-13). https://forem.com/suhanii-13 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2628473%2Fd5c604eb-220e-4f49-b4a5-97fc61a460bf.png https://forem.com/suhanii-13 en Suhani Shaikh Sun, 29 Dec 2024 11:24:44 +0000 https://forem.com/suhanii-13/frontend-challenge-complete-3l7p https://forem.com/suhanii-13/frontend-challenge-complete-3l7p <h2> What I Built </h2> <p>I created a clean and neat winter-themed design by styling an HTML page using CSS. The goal was to enhance the page’s appearance while keeping it visually appealing, responsive, and well-organized. By applying modern CSS techniques, I made sure the page looks polished and cohesive, perfectly capturing the essence of the winter season. </p> <h2> Demo </h2> <p>You can view the live project <a href="https://devto-submission.vercel.app/" rel="noopener noreferrer">here</a> </p> <h2> Journey </h2> <h3> What I Learned </h3> <ol> <li> <p><strong>CSS Best Practices</strong> </p> <ul> <li>How to structure reusable and modular CSS styles while avoiding redundancy. </li> <li>Experimented with modern design techniques like <strong>gradients, hover effects, and responsive layouts</strong>. </li> </ul> </li> <li> <p><strong>Semantic HTML</strong> </p> <ul> <li>Improved semantic structure using appropriate tags to ensure accessibility and maintain SEO-friendly markup. </li> </ul> </li> <li> <p><strong>Responsive Design</strong> </p> <ul> <li>Learned how to use <strong>media queries</strong> effectively to make the page adapt beautifully to different screen sizes. </li> </ul> </li> <li> <p><strong>User Experience</strong> </p> <ul> <li>Focused on improving readability with appropriate font sizes, color contrasts, and line spacing to enhance UX. </li> </ul> </li> </ol> <h3> Challenges </h3> <ul> <li>Debugging overlapping elements in smaller screen sizes. </li> <li>Optimizing the design for both aesthetics and performance. </li> </ul> <h3> Proud Achievements </h3> <ul> <li>The final design blends aesthetics and functionality while being lightweight and accessible. </li> <li>Successfully implemented a <strong>card-style grid layout</strong> with hover effects that make the design dynamic. </li> </ul> <h3> What’s Next </h3> <ul> <li>Explore JavaScript-based animations or transitions to add interactivity. </li> <li>Get feedback from peers and incorporate improvements based on user experience. </li> <li>Build more such themed projects to expand my creative and technical skills. </li> </ul> devchallenge frontendchallenge css javascript