I'm new to web development and recently agreed to build a simple website for an NGO as a free learning project. I know the basics of HTML, CSS, and JavaScript, and I'm comfortable using Git and GitHub, but I'm unsure how to organize the work.
Should I begin by planning the pages and content, setting up the layout and global CSS, creating shared components like the navigation and footer, or building the homepage first? I'd appreciate a practical step-by-step workflow for approaching a small Astro project so I can learn a solid development process instead of coding randomly and fixing everything later.
3 Answers
Another reasonable approach is to map out the pages and content first, then implement the shared navigation and footer before spending much time on visual polish. Once the structure is stable, styling and responsive details become much easier to manage as the project grows.
I’d set up the shared structure before tackling the homepage. Create an Astro layout with the navigation and footer as mostly static markup, then define your basic colors, spacing, typography, and other design tokens. Each page can then fill the layout instead of recreating the overall structure. The homepage is often better left until later because its design may change after you understand the rest of the site. If the NGO has recurring content such as programs, news, or events, consider Astro content collections early so you don’t have to duplicate card markup.
Start by sketching the design and page structure, either in a design tool or on paper. Once you know what the site needs, establish the layout and global styles, then create reusable components such as the navigation and footer. After that, build the pages one at a time. This order helps prevent you from repeatedly redesigning the same shared elements.
That makes sense: establish the shared layout and design tokens first, then build the individual pages around them. For a small NGO site with only a few pages, would content collections still be worthwhile?