Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
16 views2 pages

UIUX 1 Week Learning Plan

This document outlines a 1-week learning plan for UI/UX design focusing on HTML, CSS, and JavaScript. Each day includes specific topics, mini tasks, and practical applications to build skills in web design and development. The plan culminates in a final mini project to create a responsive landing page or portfolio with interactive features.

Uploaded by

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

UIUX 1 Week Learning Plan

This document outlines a 1-week learning plan for UI/UX design focusing on HTML, CSS, and JavaScript. Each day includes specific topics, mini tasks, and practical applications to build skills in web design and development. The plan culminates in a final mini project to create a responsive landing page or portfolio with interactive features.

Uploaded by

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

1-Week UI/UX HTML, CSS & JS Learning Plan

Day 1: HTML Basics + Semantic Structure

- Structure of an HTML page

- Headings, paragraphs, lists, links

- Forms and inputs (text, email, buttons, etc.)

- Semantic tags: <header>, <nav>, <main>, <section>, <article>, <footer>

Mini Task: Build a simple portfolio page structure.

Day 2: CSS Basics + Layouts

- CSS Syntax, Selectors, Properties

- Box Model (margin, border, padding)

- Colors, fonts, background, border-radius

- Layout with Flexbox

- CSS Positioning and Display types

Mini Task: Style the portfolio layout from Day 1.

Day 3: Responsive Design + Media Queries

- Mobile-first design principles

- Media queries for different breakpoints

- Units: %, vw, vh, rem, em

- Viewport meta tag

Mini Task: Make your portfolio responsive.

Day 4: CSS Grids + Animations

- CSS Grid for advanced layout

- Transitions & animations (hover effects)

- Keyframes and animation timing

- Basic UI animations (button hover, slide-in)


1-Week UI/UX HTML, CSS & JS Learning Plan

Mini Task: Add animated buttons and a simple card grid.

Day 5: JavaScript Basics for UI

- DOM Selection & Manipulation

- Event Listeners (click, input)

- Toggling classes for interactive UI

- Intro to form validation

Mini Task: Add a theme toggle (light/dark mode).

Day 6: JS UI Interactions

- Show/Hide elements (like modals, dropdowns)

- Accordion, Tabs, and Navbar toggle

- Simple form validation with alerts

- Local Storage (bonus)

Mini Task: Create a working contact form with validations.

Day 7: Mini Project + Polish

- Final mini UI project: Responsive Landing Page or a Portfolio with interactive sections

- Polish animations, layout, accessibility

- Bonus: Add CSS libraries (like Tailwind or Bootstrap, optional)

You might also like