Week 1
Week 1
Goal: Enable Sami to build a fully responsive and visually appealing healthcare website with
a focus on both development and UI/UX design principles.
Session 1:
o Refresher on HTML structure (semantic elements, divs, spans).
o Introduction to UI/UX Design Principles:
Basics of color schemes, typography, and layout balance.
Tools: Figma for wireframing (optional overview).
Session 2:
o CSS Basics Recap: Classes, IDs, and selectors.
o Design a wireframe for the Home page (sketched or digital).
Session 1:
o Deep dive into CSS Flexbox and Grid layouts.
o Building the wireframe into an HTML structure.
Session 2:
o Apply UI/UX design principles:
Choose a color palette and typography.
Design the Hero section of the Home page.
Session 1:
o JavaScript Basics Recap: DOM manipulation and event listeners.
o Practical Task: Create a responsive navbar toggle using JavaScript.
Session 2:
o Add interactivity and transitions to the Home page.
o Use JavaScript to implement smooth scrolling for navigation.
Session 1:
o Build the About Us page with clean design and clear hierarchy.
o Focus on layout consistency and alignment.
Session 2:
o Create the Services page using Flexbox/Grid.
o Design service cards with hover effects.
Session 1:
o Build the Amenities page with a visually engaging grid layout.
o Add subtle animations for images and text.
Session 2:
o Optimize all pages for mobile devices:
Test breakpoints for different screen sizes.
Implement a mobile-first approach.
Session 1:
o Testing:
Ensure consistency in design (colors, fonts, spacing).
Test responsiveness on multiple devices.
o Polishing: Add a favicon and finalize animations.
Session 2:
o Deploy the website using Netlify or GitHub Pages.
o Review the project, get feedback, and discuss improvements.