Top 100 CSS,HTML Project based questions topic wise

 

Introduction to CSS

1. Create an HTML file and link an external CSS file to it.
2. Write CSS to change the background color of the page to lightblue.
3. Create a CSS rule to make all <h1> elements have a font size of 36px.
4. Style a paragraph using inline CSS to make the text bold.
5. Use an internal <style> tag to center-align all text on the page.
6. Add a CSS rule to make all links (<a>) have a red color.
7. Use a universal selector to set a default margin and padding of 0 for all elements.
8. Add a hover effect to a button to change its background color.
9. Write a CSS rule to change the cursor to a pointer when hovering over a button.
10. Create a CSS rule that applies only to a specific element with id="special".
11. Use a class selector to change the text color of all elements with the class highlight.
12. Set a specific font family (e.g., Arial) for all text on the page.
13. Create a rule that targets all <li> elements inside an <ol> tag.
14. Apply different styles to all <p> tags that are direct children of a <div>.
15. Write CSS to make an image 50% opaque.
16. Change the visibility of an element to hidden.
17. Set a default border of 2px solid black for all <table> elements.
18. Use the !important rule to override an existing CSS rule.
19. Write CSS to make an element scrollable using the overflow property.
20. Apply a different color to every odd-numbered row of a table.

Colors and Units

1. Set the background color of the page to a gradient using RGB values.
2. Change the text color of an <h1> to #ff5733.
3. Use HSL to set the background color of a <div> to a light shade of green.
4. Create a button with a hover effect that darkens its background.
5. Set the opacity of a <div> to 0.8.
6. Use vw units to make the width of a <div> 50% of the viewport width.
7. Set the font size of a paragraph to 1.5em relative to its parent element.
8. Write CSS to make an image fill 80% of the viewport height.
9. Use rem units to set the margin of an element to 2 times the root font size.
10. Apply a semi-transparent background to a <div> using RGBA.
11. Use percentage values to set the height of a <div> to 50% of its parent.
12. Create a shadow effect on a box with a light blue color.
13. Set the background color of alternating sections of a webpage.
14. Write CSS to create a gradient that transitions from blue to green.
15. Set a linear gradient as the background of a button.
16. Use inherit to set the color of a child element to match its parent.
17. Create a border with a dashed pattern and a custom color.
18. Experiment with various units (px, %, em, rem) for padding on an element.
19. Write CSS to create a circular element with a solid background color.
20. Create a semi-transparent text effect using opacity and color.

Text and Fonts

1. Set the font family of a paragraph to "Times New Roman".
2. Adjust the font size of an <h1> to 48px.
3. Use a web font from Google Fonts to style all <h2> elements.
4. Set the letter spacing of a <p> to 2px.
5. Add a shadow effect to text in a <h3> tag.
6. Align the text in a <div> to the center.
7. Make the first letter of a paragraph larger using font-size and ::first-letter.
8. Set the line height of a paragraph to 1.8 for better readability.
9. Make the text italicized in a specific <div> using CSS.
10. Create an underline effect only when hovering over a link.
11. Write CSS to make all text bold in the footer of a webpage.
12. Create a heading with uppercase letters using the text-transform property.
13. Use text-decoration to remove the underline from links.
14. Set the color of visited links to a different shade.
15. Write CSS to truncate long text in a paragraph with ellipsis.
16. Add a gradient background to text in an <h2> element.
17. Set a maximum width for text and center it on the page.
18. Create a button with bold and uppercase text.
19. Style a list to have different font sizes for each item.
20. Add a hover effect that increases text size slightly.

Box Model

1. Create a <div> with 20px padding and a 10px margin.
2. Set a border radius of 50% to make a square <div> circular.
3. Create a button with a shadow effect and a 5px solid border.
4. Write CSS to add 10px padding only to the top of a <div>.
5. Adjust the margin of a <div> so it’s centered horizontally on the page.
6. Set the width of an element to 80% and a max-width of 600px.
7. Experiment with box-sizing: border-box to include borders in width calculations.
8. Add a double border style to a <div>.
9. Create a card layout with padding and a shadow effect.
10. Write CSS to make the height of an element dynamic based on content.
11. Create a container with equal padding on all sides.
12. Set the margin of an element to auto and center it on the page.
13. Use outline to highlight an element without affecting its size.
14. Create a bordered box with different colors for each side.
15. Adjust the vertical spacing between two <div> elements using margin.
16. Use overflow: auto to add scrollbars to a large content area.
17. Set a minimum height for a <div> so it doesn’t shrink below a certain size.
18. Write CSS to add a shadow inside a box.
19. Create a responsive box that resizes proportionally to the screen width.
20. Experiment with combining padding and margin for nested elements.

Basic Project-Based Questions

1. Create a Simple Button

• Create a simple button with the text "Click Me" using HTML and style it with CSS to have a background color, padding, and a hover effect.

2. Build a Simple Webpage Layout

• Create a webpage layout with a header, a navigation menu, a main content section, and a footer. Style the header with a background color and center-align the text.

3. Create a Form with Input Fields

• Build a form with the following fields: name, email, and message. Style the input fields with padding, borders, and appropriate spacing.

4. Create an Image Gallery

• Design an image gallery with three images placed side by side using CSS grid or flexbox. Add hover effects to enlarge the images on hover.

5. Create a Navigation Bar

• Build a simple horizontal navigation bar with links styled with a background color and a hover effect to change their color when hovered.

6. Build a Card Layout

• Create a card layout with an image, a title, and a description. Style the card with borders, padding, and box-shadow to give it a card-like appearance.

7. Create a Simple Login Form

• Design a simple login form with fields for username and password. Style the form elements with padding, borders, and a background color for the submit button.

8. Create a Footer with Links

• Build a footer for a webpage with three links: About, Privacy Policy, and Terms of Service. Style the links with padding and a hover effect that changes their color.

9. Build a Contact Section

• Create a contact section with a heading, description, and a contact form (name, email, and message). Style the form elements with borders, padding, and labels.

10. Create a Hover Effect on an Image

• Place an image on the page and apply a hover effect that changes the image’s opacity when the user hovers over it.

11. Create a Basic Table

• Create a simple table with 3 rows and 3 columns. Style the table with borders, padding, and alternate row colors using nth-child.

12. Build a Simple Accordion

• Create a simple accordion effect with multiple sections. Use HTML for the content structure and CSS to hide/show content when the user clicks on a section.

13. Design a Pricing Table

• Create a pricing table with three columns for different pricing plans (e.g., Basic, Standard, Premium). Use borders and background colors to distinguish each plan.

14. Create a Responsive Layout

• Design a basic webpage with a two-column layout that stacks on top of each other when the screen width is below 600px using media queries.

15. Create a Testimonial Section

• Design a testimonial section with 3 customer reviews, each in a card layout. Style the section with a background color, borders, and some padding.

16. Build a Blog Post Layout

• Create a simple blog post layout with a title, an image, and a paragraph of text. Style the title with a larger font size and center-align the image.

17. Design a Header with a Logo and Menu

• Create a header with a logo on the left and a navigation menu on the right. Use flexbox to align them horizontally.

18. Create a Simple Countdown Timer

• Design a countdown timer with a display of hours, minutes, and seconds. Use CSS to style the timer with borders, background color, and padding.

19. Build a Simple Hero Section

• Create a hero section with a large background image, a heading, and a call-to-action button centered in the middle of the image.

20. Create a Simple Modal Popup

• Design a modal popup that appears when a user clicks a button. Style the modal with a background color, borders, and ensure it is centered on the screen.

21. Create a Simple Image Hover Effect

• Build an image gallery where each image zooms in slightly when hovered over. Style the images with a border and apply a smooth transition effect.

22. Design a Simple Blog Post Layout

• Create a blog post layout with a header, content area, and a footer. Style the header with a background color, and the content area with padding for readability.

23. Build a Simple Subscription Form

• Create a subscription form with an email input field and a submit button. Style the form with borders, padding, and a color change when the button is hovered.

24. Create a Profile Card

• Design a profile card with an avatar, name, profession, and short description. Style it with a border radius to make it look rounded and add a hover effect that highlights the card.

25. Design a Simple Hero Section

• Build a hero section with a large background image, a heading, and a call-to-action button. Style the section with a gradient overlay on the image to improve readability.

26. Create a Centered Login Form

• Design a centered login form with input fields for username and password, and a submit button. Use CSS to center the form vertically and horizontally.

27. Build a Simple Navigation Bar with Dropdown

• Create a horizontal navigation bar with a dropdown menu. Style the dropdown with a hover effect that shows sub-links when hovered over.

28. Design a Card Flip Animation

• Create a card that flips when clicked or hovered, showing different content on the front and back. Style the card with smooth transitions.

29. Build a Simple Countdown Timer

• Create a countdown timer that shows days, hours, minutes, and seconds, counting down to a specific event. Style the timer with large text and a colored background.

30. Create a Fixed Sidebar

• Build a fixed sidebar that remains in place as the user scrolls down the page. Style the sidebar with a background color, padding, and a box-shadow.

31. Design a Simple FAQ Section

• Create a FAQ (Frequently Asked Questions) section where each question is clickable to show the answer. Style the section with borders and different text styles.

32. Build a Simple Contact Form

• Create a contact form with fields for name, email, subject, and message. Style the form with padding, borders, and use CSS for form validation feedback.

33. Create a Portfolio Grid Layout

• Design a portfolio page with a grid layout to showcase projects. Each project should have an image, title, and short description. Style the layout with margins and padding.

34. Design a Responsive Image Gallery

• Create an image gallery that arranges images into a grid on larger screens and stacks them into a single column on smaller screens. Use CSS grid or flexbox for layout.

35. Build a Custom Tooltip

• Create a tooltip that appears when the user hovers over an element. Style the tooltip with a background color and a small arrow pointing to the element.

36. Create a Pricing Table with Hover Effect

• Design a pricing table with columns for different plans. Each plan should have a name, description, and price. Style the table with hover effects to highlight the plan.

37. Build a Simple Contact Information Section

• Create a contact information section that includes an address, phone number, and email, styled in a clean and structured layout.

38. Design a Hoverable Button with Animation

• Create a button with a hover effect that changes the color and adds a smooth transition effect. Style the button with padding, borders, and rounded corners.

39. Create a Custom Dropdown Menu

• Design a custom-styled dropdown menu that shows a list of options when clicked. Style the dropdown with borders and a smooth transition effect.

40. Build a Simple Testimonial Section

• Create a testimonial section with quotes from customers. Style each testimonial with a quote icon, padding, and background color. Add a hover effect to highlight each quote.

41. Create a Circular Progress Bar

• Design a circular progress bar that visually represents a percentage (0% to 100%). Style it with CSS and use a stroke color to fill the circle as it progresses.

42. Design a Simple Event Countdown Section

• Build a section that counts down to a specific event date. Display the remaining time in days, hours, minutes, and seconds. Style the countdown with large fonts and contrasting colors.

43. Create a Responsive Footer with Links

• Build a footer that contains links to About, Contact, and Social Media. Style it with a fixed position at the bottom and ensure it is responsive on smaller screens.

44. Build a Notification Popup

• Create a notification popup that appears on the page when a user clicks a button. Style the popup with a background color, close button, and transition effect.

45. Design a Loading Spinner

• Design a CSS-only loading spinner using keyframe animations. Style the spinner with a circular shape and a rotating effect.

46. Create a Simple Blog Post with Comments Section

• Design a blog post page with a title, image, content, and a comment section below. Style the comment section with alternating background colors for each comment.

47. Build a Sticky Header

• Create a header that stays at the top of the page as the user scrolls down. Style the header with padding, a background color, and box-shadow.

48. Create a Pricing Plan Comparison Table

• Design a comparison table for pricing plans, with features listed on the left and the different plans on the top. Use alternating colors for the rows and columns.

49. Build a Newsletter Subscription Pop-up

• Create a pop-up that appears after a few seconds asking users to subscribe to the newsletter. Style it with a form, submit button, and a close button.

50. Create a Sticky Sidebar with Scroll

• Design a sidebar that sticks to the page as the user scrolls down but doesn't overlap the content. Use CSS for positioning and styling the sidebar with padding and background color.

51. Design a Testimonial Card with Image and Text

• Create a testimonial card layout that includes a photo of the customer, their name, and a testimonial quote. Style the card with rounded corners and shadows.

52. Create a Sliding Menu

• Build a sliding menu that opens from the left side when a button is clicked. Style it with a background color and transition effects for sliding in and out.

53. Create a Simple Chat Box UI

• Design a simple chat box interface with messages from two users. Style the messages with bubbles, alternating background colors, and round corners.

54. Build a Portfolio with Hover Effects

• Design a portfolio grid where each project has a hover effect that reveals more information or a project description. Style the hover with smooth transitions.

55. Create an Image Gallery with Lightbox

• Design an image gallery where clicking on an image opens it in a lightbox. Style the gallery with a grid layout, and ensure the lightbox background is darkened.

56. Build a Card Slider

• Create a horizontal card slider that displays multiple cards. Implement a sliding effect where users can navigate through the cards using arrow buttons.

57. Design a Pricing Slider

• Create a pricing slider that allows users to select a price range. Style the slider with a gradient and show the selected price range.

58. Create an Animated Arrow Button

• Build an arrow button that animates when hovered, changing color and rotating. Use keyframes and transitions to create the animation effect.

59. Create a Flip Clock

• Design a flip clock using CSS to show the current time with flipping numbers. Style the numbers to have a retro or digital clock appearance.

60. Build a Weather Widget

• Design a simple weather widget that displays temperature, weather condition (like sunny, rainy, etc.), and location. Style the widget with rounded corners, icons, and a background color based on the weather condition.

61. Create a Simple Dropdown Navigation Menu

• Design a horizontal navigation bar with a dropdown that appears when you hover over a menu item. Style the menu with a background color and smooth transitions.

62. Build a Simple Image Carousel with Thumbnails

• Create an image carousel where users can navigate between images by clicking on thumbnails. Style the carousel with navigation buttons and hover effects.

63. Design a Responsive Grid Layout for Cards

• Build a card layout that is responsive to different screen sizes, where the cards rearrange themselves from a single column to multiple columns on wider screens.

64. Create a Scroll-to-Top Button

• Design a button that appears when the user scrolls down the page. When clicked, it smoothly scrolls the page back to the top. Style the button with rounded corners and a shadow.

65. Build a Progress Bar for File Upload

• Create a file upload form with a progress bar that shows the upload percentage. Style the progress bar with different colors based on progress.

66. Create a Simple Modal with Close Button

• Design a modal popup that opens when a button is clicked. Style the modal with a semi-transparent background and a close button in the corner.

67. Build a Card Layout with Hover Animation

• Create a card layout where each card has an image, title, and description. Add a hover effect that makes the card grow slightly and shows additional information.

68. Design a Responsive Login Form

• Build a login form that is fully responsive. It should look good on all devices, with input fields and a submit button centered on the page.

69. Create a Simple Social Media Feed Layout

• Design a layout for a social media feed, displaying posts with images, text, and a like/comment button. Style the posts with borders and spacing.

70. Design a Simple Animated Banner

• Build an animated banner that appears at the top of a webpage. The banner should have a sliding effect or text animation to attract attention.

71. Create a Hoverable Image Grid

• Design an image grid where each image enlarges slightly when hovered over. Style the images with a shadow effect and smooth scaling on hover.

72. Build a Pricing Table with Hover Effects

• Create a pricing table with different plans. Add hover effects to highlight the selected plan and change the background color of the hovered plan.

73. Design a Sticky Navigation Bar with Links

• Build a sticky navigation bar that stays fixed at the top of the screen when you scroll down the page. Style the links with padding and hover effects.

74. Create a Centered Signup Form

• Design a simple signup form that is centered on the page. The form should include fields for username, email, and password, along with a submit button.

75. Build a Custom Radio Button

• Create a custom-styled radio button with a unique design and hover effect. Use CSS to style the appearance of the radio button when checked.

76. Design a Simple Event Registration Form

• Build a form for event registration with fields for name, email, and event type. Style the form with padding, borders, and custom-styled submit button.

77. Create a Countdown Timer with Date

• Design a countdown timer that shows the time remaining until a specific date. Style the timer with large fonts and color-coded segments for days, hours, and minutes.

78. Build a Simple Task List

• Create a to-do list with the ability to add and remove tasks. Style each task item with padding, borders, and an option to mark tasks as complete.

79. Create a Simple Subscription Box

• Design a subscription box where users can input their email to subscribe to a newsletter. Style the input box and button with rounded corners and hover effects.

80. Design a Simple Dashboard Layout

• Build a dashboard layout with a sidebar containing navigation links and a main content area for displaying data. Style the layout with borders and spacing.

81. Create a Flip Animation for a Card

• Design a card that flips when hovered, showing different content on the front and back. Use CSS transitions to create the flipping animation.

82. Build a Responsive Navbar with a Hamburger Menu

• Create a navigation bar that displays a hamburger menu on smaller screens. When clicked, the menu items should appear in a vertical list.

83. Design a Simple Weather Widget

• Build a weather widget that shows current weather data (temperature, condition, and location). Style the widget with icons and use CSS for layout.

84. Create a Blog Layout with Sidebar

• Design a blog page with a main content section for posts and a sidebar for categories, recent posts, or ads. Style the sections with padding and borders.

85. Build a Team Member Profile Section

• Create a section that displays team members’ profiles, including their name, job title, and picture. Style the profiles with rounded corners and hover effects.

86. Design a Simple Contact Us Page

• Create a contact form with fields for name, email, and message. Style the form with borders and padding, and add a submit button with a hover effect.

87. Create a Simple Image Hover Animation

• Build a gallery of images where each image zooms in slightly when hovered. Use CSS to apply smooth transition effects and shadows.

88. Build a Scrollable Navigation Menu

• Create a navigation menu that scrolls horizontally. Style the links with padding and ensure that the menu is responsive to smaller screens.

89. Create a Simple Rating System

• Design a rating system with 5 stars. Style the stars with CSS and change the color of the stars when hovered or selected.

90. Build a Simple Image Hover Zoom Effect

• Design an image gallery where each image zooms in when hovered. Add a border and apply a smooth zoom transition effect on hover.

91. Design a Fixed Footer with Links

• Create a footer that sticks to the bottom of the page even when scrolling. The footer should contain links and social media icons.

92. Create a Product Card Layout

• Design a product card with an image, name, price, and description. Add a hover effect that highlights the card and displays an "Add to Cart" button.

93. Build a Progress Circle with Percentage

• Design a circular progress indicator that shows the percentage completion of a task. Use CSS to create the circular shape and animation.

94. Create a Simple Modal with Fade Effect

• Build a modal that appears with a fade-in effect when a button is clicked. Style the modal with a semi-transparent background and a close button.

95. Design a Simple Service Card Layout

• Create a layout to showcase services with a card for each service. Each card should contain an icon, title, and description. Add hover effects for interactivity.

96. Build a Simple Testimonial Slider

• Create a testimonial slider where multiple testimonials rotate automatically. Style the slider with borders, padding, and smooth transition effects.

97. Design a Simple FAQ Accordion

• Build a FAQ section where each question can be clicked to reveal the answer. Style the accordion with smooth transitions and alternating background colors.

98. Create a Fixed Header with Transparent Background

• Design a header with a transparent background that becomes solid when the user scrolls down. Style the header with a logo and navigation links.

99. Build a Simple Contact Form with Validation

• Create a contact form with fields for name, email, and message. Apply simple client-side validation using CSS for visual feedback.

100. Design a Full-Width Background Image Section

• Create a section with a full-width background image, centered text, and a call-to-action button. Style the text with a contrasting color for readability.