Scribd
Upload
35 views4 pages

CS104 CHAPTER 5

Web design Project Chapter 5

Uploaded by

Jeffrey Bernadas
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
35 views4 pages

CS104 CHAPTER 5

Web design Project Chapter 5

Uploaded by

Jeffrey Bernadas
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/ 4

1

CS104 – WEB DESIGN PROJECT

Midterm
Advanced HTML & CSS (Chapter 5)

I. Lecture Overview:

A. Responsive Design Techniques:

➢ What is Responsive Design? A design approach ensuring your website looks and functions
flawlessly across various devices (desktops, laptops, tablets, smartphones).

➢ Core Techniques:

1. Fluid Grids: Use percentages (%) instead of fixed pixels (px) for columns and elements,
allowing content to flow naturally across different screen sizes.

.container {

width: 90%; /* Occupies 90% of the parent container's width */

max-width: 1200px; /* Sets a maximum width to prevent overly stretched content */

margin: 0 auto; /* Centers the container horizontally */

2. Flexible Images: Images scale proportionally to their container using max-width: 100%;
and height: auto; to prevent overflow.

img {

max-width: 100%;

height: auto;

display: block; /* Prevents spacing issues below images */

3. Media Queries: CSS rules applied only when specific conditions are met, such as screen
size, orientation, or resolution.

/* Styles for screens smaller than 768px wide */

@media screen and (max-width: 768px) {

.sidebar {

display: none; /* Hide sidebar on small screens */

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLEGE, COLLEGE OF COMPUTER STUDIES
1
2
CS104 – WEB DESIGN PROJECT

nav ul {

display: block; /* Stack navigation vertically */

B. CSS Frameworks (Bootstrap, Foundation):

• What are CSS Frameworks? Pre-written CSS libraries providing a consistent structure, pre-made
components (buttons, navigation, grids), and responsive design features.

• Benefits:

✓ Faster Development: Pre-built components streamline the design process.

✓ Cross-Browser Compatibility: Frameworks handle inconsistencies between browsers.

✓ Responsive Design Out-of-the-Box: Most frameworks are mobile-first or responsive by


default.

• Popular Frameworks:

✓ Bootstrap: (getbootstrap.com) Widely used, extensive documentation and community


support.

✓ Foundation: (foundation.zurb.com) Flexible grid system, advanced customization


options.

C. Advanced CSS Properties & Animations:

➢ Flexbox: A powerful layout module for efficiently arranging elements in one-dimensional rows or
columns.

.container {

display: flex;

justify-content: space-between; /* Distributes space evenly between items */

align-items: center; /* Vertically aligns items to the center */

➢ Grid Layout: Excel at creating complex two-dimensional layouts with rows and columns, more
powerful than traditional float-based grids.

.grid-container {

display: grid;

grid-template-columns: 1fr 2fr; /* Two columns, second twice the width of the first */

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLEGE, COLLEGE OF COMPUTER STUDIES
2
3
CS104 – WEB DESIGN PROJECT

grid-gap: 20px; /* Spacing between grid items */

➢ CSS Animations: Create captivating animations and transitions without JavaScript, enhancing
user experience and interactivity.

.button:hover {

animation: pulse 1s infinite;

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

II. Lab Overview:

A. Creating Responsive Layouts:

Start with a Basic HTML Structure: Include viewport meta tag for mobile responsiveness.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Layout</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

</body>

</html>

1. Implement Fluid Grid: Divide your layout into columns using percentages for widths.

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLEGE, COLLEGE OF COMPUTER STUDIES
3
4
CS104 – WEB DESIGN PROJECT

2. Use Flexible Images: Apply max-width: 100%; and height: auto; to images.

3. Apply Media Queries: Define breakpoints (e.g., 768px, 1024px) and adjust layout and styles for
different screen sizes.

B. Testing for Different Devices & Screen Sizes:

1. Browser Developer Tools: Most modern browsers have built-in responsive design testing tools.

2. Online Emulators: Websites like Responsinator (responsinator.com) simulate your website on


various devices.

3. Physical Devices: Testing on real devices is crucial to identify and fix issues specific to certain
devices or operating systems.

III. Key Terms:

➢ Viewport: The visible area of a webpage on a user's device.


➢ Breakpoint: A specific screen width where the layout of a website changes to adapt to the
device.
➢ Mobile-First Design: A design approach prioritizing mobile devices and scaling up to larger
screens.
➢ Flex Container: The parent element where flexbox properties are applied.
➢ Flex Items: The child elements within a flex container.
➢ Grid Container: The parent element where grid layout properties are applied.
➢ Grid Items: The child elements within a grid container.
➢ @keyframes: Defines the stages and styles of a CSS animation.

IV. Tips for Success:

➢ Embrace Mobile-First Thinking: Design for smaller screens first and progressively enhance for
larger screens.

➢ Use a CSS Framework for Efficiency: Leverage the pre-built components and responsive
features.

➢ Test Thoroughly on Multiple Devices: Ensure your design works flawlessly across different
screen sizes, browsers, and devices.

➢ Keep Code Organized: Use comments and consistent naming conventions for maintainability.

➢ Continuously Explore New Techniques: Web development is ever-evolving; stay curious and
explore new tools and techniques.

PREPARED BY: JEFFREY G. BERNADAS – INSTRUCTOR HERCOR COLEGE, COLLEGE OF COMPUTER STUDIES
4

You might also like