Scribd
Upload
4 views7 pages

Web Development Frontend Unit 6.1

Frontend development emphasizes user interface and experience using technologies like HTML, CSS, and JavaScript, along with frameworks such as React, Angular, and Vue.js. Responsive design techniques like CSS Flexbox and Grid ensure compatibility across devices, while UI/UX principles focus on consistency, accessibility, performance, and visual hierarchy. The document provides an overview of these technologies and principles essential for effective frontend development.

Uploaded by

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

Web Development Frontend Unit 6.1

Frontend development emphasizes user interface and experience using technologies like HTML, CSS, and JavaScript, along with frameworks such as React, Angular, and Vue.js. Responsive design techniques like CSS Flexbox and Grid ensure compatibility across devices, while UI/UX principles focus on consistency, accessibility, performance, and visual hierarchy. The document provides an overview of these technologies and principles essential for effective frontend development.

Uploaded by

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

Web Development: Frontend

Development
Overview of Frontend Technologies
and Principles
Introduction to Frontend Development
• - Frontend development focuses on the user
interface (UI) and experience (UX).
• - Technologies include HTML, CSS, and
JavaScript.
• - Frameworks like React, Angular, and Vue.js
help build dynamic interfaces.
• - Responsive design ensures compatibility
across devices.
HTML, CSS, JavaScript Overview
• - **HTML (HyperText Markup Language)**:
Structures content on the web.
• - **CSS (Cascading Style Sheets)**: Styles and
layouts web pages.
• - **JavaScript**: Adds interactivity and
dynamic behavior to web pages.
Example of HTML, CSS, JavaScript
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body { font-family: Arial; text-align: center; }
• button { background-color: blue; color: white; padding: 10px; }
• </style>
• </head>
• <body>
• <h1>Hello, Web!</h1>
• <button onclick="alert('Button Clicked!')">Click Me</button>
• </body>
• </html>
Frontend Frameworks (React, Angular,
Vue.js)
• - **React**: Component-based UI library
developed by Facebook.
• - **Angular**: Full-featured framework
developed by Google.
• - **Vue.js**: Lightweight and easy-to-learn
framework for UI development.
Responsive Web Design (CSS Flexbox, Grid)

• - **CSS Flexbox**: Used for one-dimensional layouts


(rows/columns).
• - **CSS Grid**: Used for two-dimensional layouts.
• - Ensures web pages are adaptable to different screen
sizes.
• - Example:
• ```css
• display: flex;
• display: grid;
• ```
UI/UX Design Principles
• - **Consistency**: Use standard elements for
better usability.
• - **Accessibility**: Ensure the website is
usable for everyone.
• - **Performance**: Optimize images and code
for fast load times.
• - **Visual Hierarchy**: Guide users using
contrast and spacing.

You might also like