This project is a faithful implementation of a Figma design provided by roadmap.sh. It is intended to showcase my HTML and CSS skills by accurately recreating the design and ensuring it is responsive and visually aligned with the original concept.
- Figma Design: https://www.figma.com/design/nh0V05z3NB87ue9v5PcO3R/writings.dev?node-id=41-96&node-type=frame&t=p8qgFOh6fAG1024A-0
- Objective: Recreate the Figma design using only HTML and CSS, ensuring the result is pixel-perfect and responsive.
- Purpose: Add this project to my personal portfolio to demonstrate proficiency in front-end web development.
- Pixel-perfect layout matching the Figma design.
- Responsive design for different screen sizes.
- Clean and maintainable HTML and CSS code.
- Cross-browser compatibility.
- Clone this repository or download the project files.
- Open
index.htmlin any modern web browser.
Alternatively, you can view the live demo here: Link to Live Demo on Netlify
- HTML5: For the structure of the webpage.
- CSS3: For styling and layout.
- Includes modern CSS techniques like Flexbox/Grid for layout management.
- Understanding the Figma layout and extracting the design specifications.
- Ensuring responsiveness for various devices.
- Used tools like Figma's measurement guides to determine exact dimensions and spacing.
- Followed a desktop-first approach to CSS to prioritize desktop layouts and adapt them for smaller screens.
Randy Phasha
- Portfolio: Link to Portfolio
- GitHub: Randy Phasha
- Thanks to roadmap.sh for providing the Figma design.
- Thank you for taking the time to review my project!