DEV Community

loading...
Cover image for Trafalgar (Figma Project)

Trafalgar (Figma Project)

Saqib Suleman
Self-taught Web developer
・1 min read

After completing the Museum of Candy Project, I felt like I needed more practice with HTML and CSS before moving on to JavaScript. So, a friend of mine shared a Figma webpage design and suggested that I clone that webpage as close as possible. I took up the task and started writing the HTML for that webpage section by section and I also kept styling it simultaneously so that I would have a better idea of my progress. I stumbled across many small issues when cloning that webpage. The issue that had me scratching my head was that I couldn't center some of my content but after revisiting some of the lectures about bootstrap grid, I finally figured it out. Beside that, I also got a bit familiar working with SVGs that I exported from Figma to use in my webpage. After adding all the content and styling it properly, I made my webpage responsive across multiple breakpoints by using the bootstrap grid system.

I have deployed that webpage on Netlify under the link zealous-jang-e14cfe.netlify.app. You can also find the source code on Github.

Github link: github.com/saqibs3291/trafalgar

Orignal Figma design: figma.com/file/s69MNKYf4OEwrhqPPo5aQL/trafa..

Discussion (0)