Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Today, I recreated a recipe webpage design from Figma using only HTML and CSS.
It was my first time translating a design into code while ensuring semantic structure and responsive layout.
?️ What I Coded:
Live Demo:
GitHub Repo:
? What I Learned:
A key lesson: assets must be inside the /docs folder — relative paths to folders outside of it won’t work. Took some time and debugging to realize that!
? Reflections:
I was initially anxious — it took me a whole day for what seemed like a simple page. But I reminded myself:
This is just the start of my journey — each attempt is growth. If i want to improve fast, the only way is to iterate fast.
On my second try, I completed everything (including responsiveness) in about 2 hours, which I think is a good start for my learning journey. More practice is definitely needed. On to the next design!
It was my first time translating a design into code while ensuring semantic structure and responsive layout.
?️ What I Coded:
Live Demo:
GitHub Repo:
- Built a responsive recipe webpage with clean layout and spacing.
- Practiced margin and padding to visually separate sections properly.
- Iterated from scratch for my second attempt (without referring back) to reinforce layout planning and semantic HTML skills.
? What I Learned:
Building from Figma to Code:
I challenged myself to translate a Figma design into a real webpage using only HTML and CSS. This was my first real attempt at turning static design assets into code, and it taught me a lot about structure, spacing, and visual consistency.
Semantic HTML:
I made sure to prioritize semantic markup — using tags like , , , and appropriately — because I want a strong foundation in writing accessible, meaningful HTML.
Responsive Design:
I applied media queries to make sure the page works well on smaller screens (under 576px). This helped me understand how to adapt layouts for different devices using simple but effective responsive techniques.
CSS Layout First, Styling Second:
I learned that it’s better (and less overwhelming) to focus on laying out the page structure first before worrying about fonts, colors, and inline spacing. This helped me group related styles and avoid repetitive CSS.
GitHub Pages Deployment:
I reused the process I learned from deploying React projects — this time for a static HTML page. I used the /docs folder for deployment so I could keep multiple attempts organized.
A key lesson: assets must be inside the /docs folder — relative paths to folders outside of it won’t work. Took some time and debugging to realize that!
? Reflections:
I was initially anxious — it took me a whole day for what seemed like a simple page. But I reminded myself:
This is just the start of my journey — each attempt is growth. If i want to improve fast, the only way is to iterate fast.
On my second try, I completed everything (including responsiveness) in about 2 hours, which I think is a good start for my learning journey. More practice is definitely needed. On to the next design!