Scribd
Upload
24 views2 pages

Week 1

Uploaded by

Yars Z Kebede
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views2 pages

Week 1

Uploaded by

Yars Z Kebede
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Course Module Outline:

Goal: Enable Sami to build a fully responsive and visually appealing healthcare website with
a focus on both development and UI/UX design principles.

Day 1: Review, Responsive Design, and UI/UX Basics

 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).

Day 2: CSS Flexbox, Grid, and Home Page Layout

 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.

Day 3: JavaScript Refresher and Prototyping

 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.

Day 4: About Us and Services Pages

 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.

Day 5: Amenities Page and Mobile Optimization

 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.

Day 6: Testing, Deployment, and Review

 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.

You might also like