This is a starter boilerplate for HTML, CSS, and JavaScript project, you can use it to quickly start creating your own project for practices.
Development process:
Find a design inspiration (prototype) -> Analyze layout, components, and div
s -> extract media resources -> Iterative Implementation.
Iteratively Design and Implement HTML elements -> Layout -> Style -> Animation
When designing layout:
- Using
border-style: solid
,border-color: lightgray
,border-radius: 8px
to explicitly display the border of eachdiv
panel.
When designing style:
- Identify common styles applied among components (e.g. font, color, shadow, animation)
- Make them variables.
Flexbox vs. Grid