Scribd
Upload
2 views

Web Development Practical 02 CSS

The document outlines practical assignments for students to enhance their web development skills by creating two web apps using CSS. The first part focuses on styling an interactive blog website, while the second part emphasizes the visual design of an Event Management System. Each part includes specific tasks related to layout, styling elements, and improving user experience.

Uploaded by

souhakl25
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
2 views

Web Development Practical 02 CSS

The document outlines practical assignments for students to enhance their web development skills by creating two web apps using CSS. The first part focuses on styling an interactive blog website, while the second part emphasizes the visual design of an Event Management System. Each part includes specific tasks related to layout, styling elements, and improving user experience.

Uploaded by

souhakl25
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

Web Development Practicals

Through these practicals, students will create two simple web apps/sites using various
web-dev technologies.

Practical 02: CSS Styling


Part 01: Interactive Blog Website Styling

Objective: Enhance the blog website created in Practical 01 with CSS to improve appearance and user
experience.

Tasks:

1. Create a style.css file and link it to index.html.


2. Style the main layout using:
o CSS Grid or Flexbox for structured positioning.
o Background colors, margins, and padding for readability.
3. Header and Navigation:
o Use background-color and box-shadow for styling.
o Style links (<a>) with hover effects.
4. Blog List and Single Post:
o Add card-based layout using border-radius, box-shadow, and padding.
o Define a max-width for better readability.
5. Contact Form:
o Style form fields with border, padding, and hover effects.
o Add button styling for better appearance.
6. Footer Styling:
o Center content with text-align: center and add a background color.

Part 02: Event Management System Styling

Objective: Apply CSS to enhance the visual design of the Event Management System.

Tasks:

1. Apply CSS to index.html via an external stylesheet (style.css).


2. Homepage Styling:
o Use grid or flexbox for event cards.
o Style the search bar with border-radius and padding.
3. Event Details Page:
o Use font-size and line-height for readability.
o Add a visually appealing button for event registration.
4. Registration Form:
o Improve form styling (field height, colors, focus effects).
5. Organizer Dashboard:
o Create a minimalistic admin panel style.
o Use hover effects for action buttons.

Dr. Med Saber RAIS Badji Mokhtar University Annaba


Part 01 Example:

Part 02 Example:

Dr. Med Saber RAIS Badji Mokhtar University Annaba

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy