Assignment1_Planning_Template
planning.md Template
Portfolio Landing Page Planning Document
Student Name: [Your name]
Assignment: Web Authoring Assignment 1
Date: [Today's date]
Instructions
This template guides you through planning your portfolio landing page. Answer each question thoughtfully before you start coding. Your answers demonstrate your design thinking and preparation.
1. Portfolio Purpose and Audience
What is the purpose of your portfolio landing page?
Your answer:
[Write 2-3 sentences explaining the purpose of your portfolio]
Who is your target audience?
Your answer:
[Describe your primary audience and why this matters for your design]
2. Content Planning
What will you include on your landing page?
Header section:
[Describe what will be in your header - site title? Your name? Logo?]
Introduction section:
[What will you say about yourself and your work? Draft 2-3 sentences here]
Projects section:
[How will you present the four projects? List format? Cards? Grid? Describe your approach]
Navigation:
[Where will navigation appear? What links will it include?]
Footer section:
[What information goes in the footer? Copyright notice? Contact info?]
3. Design Decisions
Color Scheme
Primary color: [Color name and hex code, e.g., "Navy Blue #2c3e50"]
Secondary color: [Color name and hex code]
Accent color: [Color name and hex code, if using one]
Background color: [Color name and hex code]
Text color: [Color name and hex code]
Why did you choose these colors?
[Explain your color choices in 2-3 sentences]
Accessibility check: [Have you verified contrast with WebAIM Contrast Checker? What were the results?]
Typography
Heading font: [Font name, e.g., "Arial, sans-serif"]
Body text font: [Font name]
Are you using web fonts? [Yes/No - if yes, from Google Fonts or another source?]
Why did you choose these fonts?
[Explain your typography choices in 2-3 sentences]
Layout
Overall structure:
[Describe your layout structure]
Content width:
[Will you use a max-width to prevent content from stretching too wide? If so, what width?]
Why did you choose this layout approach?
[Explain your layout reasoning in 2-3 sentences]
4. Navigation Structure
What links will your navigation include?
-
[Link text] → [Destination]
-
[Link text] → [Destination]
-
[Link text] → [Destination]
-
[Link text] → [Destination]
5. Wireframes
Wireframe sketches
Required: Include wireframe(s) showing your planned layout.
Desktop wireframe:
[Insert image or describe: "See wireframe-desktop.png"]
Mobile wireframe (if different from desktop):
[Insert image or describe: "See wireframe-mobile.png"]
9. HTML and CSS Evolution
HTML Evolution
How has HTML evolved since its creation?
[Write 2-3 paragraphs explaining HTML's evolution in your own words]
Sources consulted:
-
[Citation 1]
-
[Citation 2]
CSS Evolution
How has CSS evolved since its creation?
[Write 2-3 paragraphs explaining CSS's evolution in your own words]
Sources consulted:
-
[Citation 1]
-
[Citation 2]
11. Final Planning Checklist
Before you start coding, verify you've completed all planning:
-
Defined portfolio purpose and audience
-
Planned content for all sections
-
Chosen color scheme with accessibility verified
-
Selected typography
-
Designed layout structure
-
Planned navigation
-
Created wireframes
-
Listed development tools
-
Explained 4+ HTML elements
-
Explained 4+ CSS properties/techniques
-
Researched and written about HTML/CSS evolution with citations
-
Created implementation plan
Planning completed: [Date]
Ready to begin implementation: [Yes/No]
Next step: [What will you do first?]
