The Bhawanipur Education Society College
Department of Computer Science
Four Year B.Sc (Major) Semester II, Under CCF
SEC-2 Assignment on HTML & CSS
Prepared By: Shawni Dutta & Sreshtha Basu
Instructions:
1. Each assignment should have the following structure
a. Problem Statement (Include your assignment here)
SC b. Scripts (Include your HTML and CSS Scripts)
c. Output (Show possible Screenshots, wherever applicable)
2. All the assignments are mandatory.
3. For Assignment 05, multiple screenshots are mandatory.
4. You should submit a hard copy of your assignment. Spiral binding is mandatory.
5. Your assignment should begin with a Cover page followed by an index page.
6. For Cover page, refer to the link:
7. For Index page, refer to the link:
8. Submission Deadline: 31/07/2025
SEC2 COVER PAGE
SEC2 INDEX PAGE
BE
Assignment 01: Basic HTML Assignment
Create a static web page for your school using simple html tags that includes the following:
1. A title as “My first webpage design”;
2. A heading as “Your School Name” followed by “Discover the Joys of Lifestyle Exploration”. Use
the second order of heading tags.
3. Put an image (img) of your school at a suitable position.
4. A paragraph (p) which will contain an introduction regarding your school (Year of establishment,
school history, achievements by the students of your school).
5. An unordered list (ul) containing the different streams of your school (Science, Arts, Commerce)
6. An ordered list (ol) consisting of the names of the teachers at your school.
7. Using the marquee tag, display a suitable message related to admission of your school. The
message should be “Embark on a lifetime adventure with Lifestyle Exploration!”. The marquee
behavior should be alternative in nature.
Compose the HTML script for this webpage, ensuring proper structure and organization.
Assignment 02: Form Designing
Create a webpage with a styled HTML form using CSS. The form should include a variety of input types
and be responsive. Perform the following tasks-
● Include different input types: text, email, password, number, radio buttons, checkboxes, and a
submit button.
● Style the form using CSS to make it visually appealing. Use an external CSS file.
● Ensure the form design is responsive.
● Include the following form elements-
● Name (text input)
● Email (email input)
SC ● Password (password input)
● Age (number input)
● Gender (radio buttons)
● Interests (checkboxes)
● Submit button, Reset button
● Use CSS to style the form and input elements.
● All the input fields should be mandatory.
● Include hover and focus effects for input fields.
BE
Sample Web Page Structure:
SC
BE
Assignment 03: Assignment on Button design using CSS
Create a webpage with different style buttons using HTML and CSS. Create at least four different styles
of buttons. Also, include hover effects for each button style. Ensure the buttons are responsive.
Sample Web Page:
SC
Assignment 04: Assignment on HTML table
Create a simple web page which will include the following table. Also add a proper table caption to the
BE
table. You may use rowspan, colspan attribute to your script to get the desired output.
Assignment 05: Assignment on Flexbox and CSS Grid
Create a simple web page layout using Flexbox and CSS Grid. The page will include a header, a
navigation menu, a main content area, a sidebar, and a footer.
● Use Flexbox to layout the navigation menu and the footer.
● Use CSS Grid to layout the main content area and the sidebar.
● Ensure the layout is responsive. Use necessary media query to ensure responsiveness.
Instructions
1. Header
○ Should be a full-width element.
○ Include a title for the web page.
2. Navigation Menu
○ Use Flexbox to layout the menu items horizontally.
○ Ensure the menu is responsive (wrap to the next line on smaller screens).
3. Main Content Area and Sidebar
● Use CSS Grid to create a 2-column layout.
● The main content should take up 2/3 of the width, and the sidebar should take up 1/3.
● Ensure the layout is responsive (stack columns on smaller screens).
SC4. Footer
● Use Flexbox to layout the footer items.
● Should be a full-width element.
● Include at least two items in the footer.
Sample Web Page Structure:
BE
Assignment 06: Personal Portfolio Website Development
You need to create a personal portfolio website using HTML and CSS. The portfolio website should
effectively showcase your skills, projects, and provide information about you. Utilizing HTML for
structuring the content and CSS for styling, you will design a visually appealing and professional-looking
portfolio.
Requirements:
Homepage:
● Create an aesthetically pleasing homepage with a brief introduction about yourself.
● Include navigation links to other sections of the website such as About Me, Projects, Skills, and
Contact Information.
About Me Section:
● Develop a section that provides detailed information about yourself, including your background,
education, interests, and any relevant experiences.
● Utilize appropriate HTML elements to structure the content logically.
Projects Section:
● Showcase your projects in an organized manner.
● Each project should have a title, brief description, and if possible, a link to the project or its code
repository.
SC● Use CSS to style the project cards or tiles to make them visually appealing.
Skills Section:
● List your skills and competencies relevant to your field of study or profession.
● Employ CSS to style the skills section to make it visually engaging.
Contact Information Section:
● Provide contact information such as email address, phone number, and links to your professional
social media profiles (if applicable).
● Optionally, include a contact form for visitors to reach out to you directly from the website.
BE
CSS Styling:
● Use CSS to style the layout, typography, and colors of the website.
● Ensure consistency in design elements throughout the website.
● Implement responsive design principles to ensure the website is mobile-friendly.
Additional Features:
● Incorporate additional features such as animations, transitions, or interactive elements to enhance
the user experience.
● Experiment with advanced CSS techniques like Flexbox or Grid for layout design.
