Scribd
Upload
10 views10 pages

Sankalp Slide

Uploaded by

Gaurav Ameta
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
10 views10 pages

Sankalp Slide

Uploaded by

Gaurav Ameta
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/ 10

Web Design and

the Importance of
CSS in Frontend
Web
Development
Web design is the process of creating and developing websites. It
involves planning, designing, and coding websites to create a user-
friendly and aesthetically pleasing experience. Frontend web
development involves creating the part of a website that users see
and interact with.

By :- Sankalp Chakravorty
22EGICS128
Introduction to Web Design
User Experience (UX) User Interface (UI)
Focuses on creating a Focuses on the visual design
positive and intuitive of a website, including
experience for users. elements like buttons,
menus, and typography.

Content Management
Managing website content, such as text, images, and videos, is a
vital part of web design.
Understanding the role of HTML, CSS, and
JavaScript
HTML CSS JavaScript

HTML is the foundation of a website, CSS controls the appearance of the JavaScript adds interactivity to
defining the structure and content. website, including layout, colors, and websites, making them more
fonts. engaging and dynamic.
Cascading Style Sheets
(CSS): what it is and why
it matters
1 Visual Styling 2 Layout and Structure
CSS allows you to CSS controls how elements
customize the look and are positioned and
feel of web pages. arranged on a page.

3 Maintainability and 4 Responsiveness


Reusability
CSS enables websites to
CSS separates styles from adapt to different screen
HTML, making code more sizes, ensuring optimal
organized and easier to viewing on various
update. devices.
The evolution of CSS: from basic styling to advanced layouts

1 CSS1
Introduced basic styling features, like font and color changes.

2 CSS2
Expanded capabilities with positioning, layout, and more advanced styling.

3 CSS3
Brought modern features like animations, transitions, and responsive design.

4 CSS Grid
A powerful layout system for creating complex and flexible grids.

5 CSS Flexbox
Offers efficient and flexible layout for both web and mobile designs.
CSS selectors and
targeting elements on
the page
Selector Description

Tag Selector Targets all elements with a


specific HTML tag, like `

`.

Class Selector Targets elements with a


specific class attribute, like
`.button`.
ID Selector Targets a single element with
a unique ID attribute, like
`#header`.
CSS Box Model and understanding layout

Content Padding Border Margin


The actual content of the Space between the A line that surrounds the Space between the
element, like text or content and the border. element. border and other
images. elements.
Responsive design and CSS
media queries

Mobile View
Adjusts layout for smaller screens.

Tablet View
Optimizes for intermediate screen sizes.

Desktop View
Maintains the original layout for larger screens.
CSS frameworks and
libraries: Bootstrap,
Foundation, etc.
1 Bootstrap 2 Foundation
A popular and versatile Another popular
CSS framework for building framework known for its
responsive websites. strong focus on
accessibility.

3 Tailwind CSS
A utility-first CSS framework that provides a wide range of
reusable styles.
Best practices for efficient and maintainable C

Use a CSS Preprocessor Optimize for Performance Follow Naming Conventions


Less or Sass can enhance Minimize file size and optimize for fast Use clear and descriptive names for
organization and readability. loading times. classes and IDs.

You might also like