In this assignment, We explored the basics of CSS by converting an Otter Essay design with the Heading peeking out using HTML and CSS.
In this assignment, We were tasked with converting an Huckleberry card style Figma design into HTML and CSS. Implementing responsiveness for smaller screens.
In this assignment, We converted a Novus Watch series iv card style Figma design into HTML and CSS.
In this assignment We converted a Web Training card style Figma design into HTML and CSS. Also implementing responsiveness for mobile devices.
In this assignment, we consolidated our learning by developing a checkout page for a fictional product called "WP Pusher." Using HTML and CSS, we created a user-friendly layout that included sections for user information and payment processing, along with a sidebar displaying pricing and features following the Figma design shared with us.
In this final assignment, we were tasked with converting a full webpage Figma design into HTML and CSS. We implemented responsive design principles using CSS media queries. We learned how to make the web page look good on different screen sizes, ensuring a consistent user experience across devices.We applied these techniques to enhance the interactivity and visual appeal of our web page, making it more engaging for users.
- HTML Structure: Organized the checkout form with appropriate input fields and labels.
- CSS Styling: Applied external styles for layout, colors, and typography to match the provided design.
- Responsive Design: Ensured the layout adapts to different screen sizes using Flexbox.
- Sidebar Positioning: Positioned the sidebar to the right of the input fields, creating a clear and accessible user experience.
These assignments collectively provided a comprehensive understanding of web development fundamentals, focusing on HTML, CSS, and responsive design principles. The final project showcased our ability to apply these concepts in a practical and visually appealing manner.