html css homework

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Learn to style HTML using CSS

Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML . While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Prerequisites

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.

Once you understand the fundamentals of HTML, we recommend that you learn further HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't learn CSS without knowing HTML.

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up, as detailed in Installing basic software , and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

It is also recommended that you work through Getting started with the web before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its CSS basics article is also covered in our CSS first steps module, albeit in a lot more detail.

This topic contains the following modules, in a suggested order for working through them. You should start with the first one.

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout .

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place with respect to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

Solving common CSS problems

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't know how to do it yet!

"CSS is weird"

CSS works a bit differently from most programming languages and design tools you'll come across. Why does it work the way it does? In the following video, Miriam Suzanne provides a useful explanation of why CSS works as it does, and why it has evolved as it has:

The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.

Advanced HTML/CSS Homework

Edit the code to make changes and see it instantly in the preview

Forked from HTML + CSS template

Template type: static

Dev Dependencies

• serve: ^11.2.0

• HTML Tutorial
• HTML Exercises
• HTML Attributes
• Global Attributes
• Event Attributes
• HTML Interview Questions
• DOM Audio/Video
• HTML Examples
• Color Picker
• A to Z Guide
• HTML Formatter
• 10 HTML Project Ideas & Topics For Beginners [2024]

Top 10 Projects For Beginners To Practice HTML and CSS Skills

• Top 10 Coding Projects For Beginners
• Top 10 Front-End Web Development Projects For Beginners
• JavaScript Project Ideas with Source Code
• 10 Best JavaScript Project Ideas For Beginners in 2024
• Top 5 JavaScript Projects For Beginners on GFG
• 90+ React Projects with Source Code [2024]
• 7 Best React Project Ideas For Beginners in 2024
• 12 Best Full Stack Project Ideas in 2024
• 10 Best Web Development Projects For Your Resume
• 30+ Web Development Projects with Source Code [2024]
• 10 Best Angular Projects Ideas For Beginners
• Top 7 Node.js Project Ideas For Beginners
• 5 Best MERN Projects To Add In Resume
• 10 Best Web Development Project Ideas For Beginners in 2024
• 5 Amazing React Native Project Ideas for Beginners

Learning to code is always exciting and fun for everyone and when it comes to stepping into the programming world most of the people start with the easiest thing HTML and CSS . Every beginner’s coding journey in frontend starts with these two basic building blocks and you need to be creative when it comes to designing a beautiful application. 

Initially, beginners enjoy making buttons, adding the links, adding images, working with layout and a lot of cool stuff in web designing but when it comes to making a project using only HTML and CSS they get stuck and confuse about what they should make to practice all these stuff. Afterall their knowledge is just limited to HTML and CSS. No matter what after learning everything at some point you will realize that making a project is important to practice HTML and CSS skills. You need to check how HTML and CSS work together to design a beautiful frontend application. So the question is what are some beginner-friendly projects you can build to practice everything you have learned…Let’s discuss that.  

1. A Tribute Page

The simplest website you can make as a beginner is a tribute page of someone you admire in your life. It requires only basic knowledge of HTML and CSS. Make a webpage writing about that person adding his/her image. On the top of the webpage, add the image and name of the person and below that give layout for the rest of the details. You can use paragraphs, lists, links, images with CSS to give it a descent look. Add a suitable background color and font style on your webpage. Most of the parts you can make using HTML but to give it a better look using a bit of CSS. Take help from the link given below. 

• My Tribute Page

2. Webpage Including Form

Forms are always an essential part of any project and you will be working with a lot of forms in most of the applications so why not practice it earlier and test your knowledge. Once you get familiar with the input field or basic tags in HTML to create a form make a project using all those tags. How to use a text field, checkbox, radio button, date, and other important elements in a single form. You will be learning how to give a proper structure to a webpage while creating a form. Knowledge of HTML / HTML5 is good enough but you can use a bit of CSS to make the project look better. Take help from the links given below. 

• Survey Form

3. Parallax Website

A parallax website includes fixed images in the background that you can keep in place and you can scroll down the page to see different parts of the image. With basic knowledge of HTML and CSS, you can give a parallax effect to a website. Using the parallax effect in web designing is really popular and it gives beautiful look and feels to the webpage. Give it a try and divide the whole page into three to four different sections. Set 3-4 background images, align the text for different sections, set margin and padding, add background-position and other CSS elements and properties to create a parallax effect. You can take help from the link given below. 

• Parallax Website

4. Landing Page

A landing page is another good project you can make using HTML and CSS but it requires a solid knowledge of these two building blocks. You will be using lots of creativity while making a landing page. You will practice how to add footer and header, create columns, align-items, divide the sections and a lot of things. You will have to use CSS carefully keeping in mind that different elements do not overlap with each other. You will also take care of color combinations, padding, margin, space between sections, paragraphs, and boxes. Color combinations should go well with each other for different sections or backgrounds.

5. Restaurant Website

Showcase your solid knowledge of HTML and CSS creating a beautiful webpage for a restaurant. Making a layout for a restaurant will be a bit complicated than previous project examples. You will be aligning the different food items and drinks using a CSS layout grid. You will be adding prices, images and you need to give it a beautiful look and feel as well using the proper combination of colors, font-style and images. You can add pictures gallery for different food items, you can also add sliding images for a better look. Add links for redirection to internal pages. Make it responsive setting a viewport, using media queries and grid. You can take help from the link given below. 

• Restaurant Website

6. An Event or Conference Webpage

You can make a static page holding an event or conference. People who are interested in attending the conference create a register button for them. Mention different links for speaker, venue and schedule at the top in the header section. Describe the purpose of the conference or the category of people who can get benefit from this conference. Add an introduction and images of the speaker, venue detail and the main purpose of the conference on your webpage. Divide the page into sections, add header and footer showcasing the menu. Use proper background color that can go well with each other for various sections. Choose a descent font style and font color that matches the theme of your web page. It requires HTML/HTML5 and CSS knowledge in depth. You can take help from the link given below. 

• Event webpage

7. Music Store Page

If you are a music lover you can make a webpage for it. It requires HTML5 CSS3 knowledge. Add a suitable background image describing the purpose or what the page is all about. In the header section add different menus. Add buttons, links, images and some description about the collection of songs available. At the bottom mention the links for shopping, store, career or contact details. You can also add other features on your webpages such as a trial option, gift cards or subscription. Make it responsive setting viewport or using media queries and grid. You can take help from the link given below. 

8. Photography Site

If you have in-depth knowledge of HTML5 and CSS3, you can make a one-page responsive photography site. Use flexbox and media queries for responsiveness. Add the company name with an image (related to photography) on the top (landing page). Below that showcase your work adding multiple images. Mention the contact detail of the photographer at the bottom (footer). Add a button to view your work. This button will directly bring you down to the images section. You need to take care of the margin, padding, color combination, font-size, font-style, image size and styling of a button. You can take help from the link given below. 

• Image gallery

9. Personal Portfolio

With knowledge of HTML5 and CSS3, you can also create your portfolio. Showcase your work samples and skills in your portfolio with your name and pictures. You can also add your CV there and host your complete portfolio on GitHub account. In your header section mention some menus like about, contact, work or services. At the top add one of your images and introduce yourself there. Below that add some work samples and at last (footer) add contact information or social media account. You can take help from the links given below. 

• Simple portfolio
• Portfolio gallery

10. Technical Documentation

If you have a little bit of knowledge of Javascript then you can create a webpage of technical documentation. It requires knowledge of HTML, CSS and basic javascript. Divide the whole webpage into two sections. The left side creates a menu with all the topics listed from top to bottom. Right side you need to mention the documentation or description for the topics. The idea is once you click on one of the topics in the left section it should load the content on the right. For click, you can use either javascript or CSS bookmark option. You don’t need to make it too fancy, just give it a simple and descent look, that looks good for technical documentation. You can take help from the links given below. 

• Technical Documentation

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples .

Please Login to comment...

Similar reads.

• Web-Projects
• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

Collection of 100 HTML and CSS Mini Projects for Beginners with Source Code

By Faraz - February 12, 2024

Explore 100 beginner-friendly HTML and CSS projects with source code. Kickstart your coding journey with hands-on practice, tutorials, and easy-to-follow examples.

HTML and CSS form the backbone of web development, and mastering them is crucial for anyone aspiring to become a web developer. One effective way to enhance your skills is by working on mini-projects. In this article, we'll explore a collection of 100 HTML and CSS projects suitable for beginners, each accompanied by its source code.

Table of Contents

Introduction to html and css mini projects.

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are fundamental technologies for building web pages. Mini projects provide a practical approach for beginners to apply their knowledge and gain hands-on experience.

1. Glowing Search Bar

Enhance your web development skills with our first mini project - the Glowing Search Bar. This engaging HTML and CSS project not only teaches you the basics of form design but also introduces a captivating glowing effect. Users will learn how to create an interactive search bar that lights up when clicked, adding a touch of sophistication to any website. Dive into the provided source code to understand the underlying structure and make your web pages shine.

2. Social Media Icons

In the vast world of web development, incorporating social media icons seamlessly into your website is a crucial skill. Our second mini-project focuses on just that. Learn how to design and implement stylish social media icons using HTML and CSS. The accompanying source code breaks down the process step by step, empowering beginners to create visually appealing icons that link directly to their respective profiles.

3. Drop Down Menu

Navigation is key in creating user-friendly websites, and our third mini project, the Drop Down Menu, will teach you just that. This project delves into HTML and CSS to guide you through the creation of a sleek and functional drop-down menu. Understand the coding principles behind building a responsive navigation system that enhances the user experience. The provided source code ensures that beginners can grasp the concepts and implement this essential feature in their own projects effortlessly.

4. Simple Calculator

Explore the fundamentals of interactive web applications with our Simple Calculator mini project. This HTML and CSS project introduces the basics of form handling and user input. Users will discover how to create a minimalist calculator using straightforward code. Dive into the source code to comprehend the logic behind each function, gaining valuable insights into building more complex applications in the future.

5. Login Form

Security is paramount in the online world, making the creation of effective login forms a crucial skill for any web developer. Our fifth mini project guides beginners through the process of building a user-friendly Login Form using HTML and CSS.

6. Registration Form

Strengthen your grasp on web development by creating a Registration Form using HTML and CSS. This mini project walks beginners through the process of building a form that captures user details efficiently.

7. Animated Search Button

Elevate the visual appeal of your website with an Animated Search Button. This mini project delves into HTML and CSS animations, teaching beginners how to add dynamic elements to their pages. The provided source code breaks down the animation process, empowering users to implement eye-catching search buttons that enhance user engagement and interactivity.

8. Breadcrumb

Navigation is made seamless with the Breadcrumb mini project. Learn how to create a breadcrumb trail using HTML and CSS, aiding users in understanding their location within a website. The source code provides a step-by-step guide, making it easy for beginners to integrate this essential navigation feature into their web pages effectively.

9. Carousel Sliders

Delve into the world of dynamic content presentation with Carousel Sliders. This mini project introduces HTML and CSS techniques to create engaging image sliders. By exploring the source code, beginners can comprehend the logic behind carousel functionality, paving the way for them to showcase content in a visually appealing and interactive manner.

10. Loaders

Master the art of visual feedback with Loaders. This mini project focuses on creating loading animations using HTML and CSS, enhancing the user experience on your website. The source code offers a comprehensive understanding of designing and implementing loaders, providing beginners with the tools to make their websites more dynamic and user-friendly.

11. Radio Button

Dive into form elements with the Radio Button mini project. This HTML and CSS project guide beginners through the creation and styling of radio buttons, adding interactivity to user input forms.

12. Blog Card Grid

Enhance the visual appeal of your blog layout with the Blog Card Grid mini project. Using HTML and CSS, beginners can learn to create an organized and stylish grid of blog cards. The accompanying source code breaks down the structure and styling, offering insights into designing captivating blog layouts for a more engaging user experience.

13. Responsive Footer

Complete your website with a polished touch by mastering the art of a Responsive Footer. This mini project focuses on creating a bottom section that adapts seamlessly to various screen sizes.

14. Responsive Navbar

Navigation is made effortless with the Responsive Navbar mini project. Learn to create a navigation bar that adjusts gracefully to different screen sizes using HTML and CSS. The source code provides a step-by-step guide, enabling beginners to implement responsive navigation for an optimal user experience.

15. Switch Button

Add a touch of interactivity to your website with the Switch Button mini project. Using HTML and CSS, beginners can learn to create a toggle switch for various settings.

16. Bottom Tab Bar

Explore mobile-friendly navigation with the Bottom Tab Bar mini project. Using HTML and CSS, beginners can create a sleek bottom navigation bar commonly found in mobile applications. The source code provides insights into the structure and styling, making it easy for users to implement this intuitive navigation feature on their websites.

17. To Do List

Organize tasks efficiently with the To-Do List mini project. Using HTML and CSS, beginners can learn the basics of creating a dynamic task list with checkboxes.

18. Landing Page

Make a striking first impression with the Landing Page mini project. Learn to design and structure an appealing landing page using HTML and CSS. The source code breaks down the components, empowering beginners to create captivating entry points for their websites or projects.

19. Card Design

Elevate your content presentation with the Card Design mini project. Using HTML and CSS, beginners can explore the art of creating visually appealing cards to showcase information or products.

20. Login and Sign-Up Form

Strengthen your form-building skills with the Login and Sign-Up Form mini project. Using HTML and CSS, beginners can create a comprehensive user authentication system.

21. Neon Button

Add a vibrant and eye-catching element to your website with the Neon Button mini project. This attention-grabbing button design stands out, encouraging user interaction. Elevate the visual appeal of your site and draw attention to important calls-to-action with this electrifying HTML and CSS project.

Improve user interaction and focus with the Modal mini project. This feature allows you to display additional content or prompts in a pop-up window without navigating away from the current page. Enhance user engagement and create a more immersive experience on your website with this versatile HTML and CSS project.

23. Split Text

Bring a creative touch to your website's typography with the Split Text mini project. This eye-catching effect divides text into distinct elements, adding visual interest to headings and other textual content.

24. Product Page

Showcase your products effectively with the Product Page mini project. Learn to structure and style a compelling page using HTML and CSS. The source code breaks down the components, providing beginners with a foundation for creating engaging and informative product pages on their websites.

25. Button with Border Animation

Elevate your button designs with the Button with Border Animation mini project. Using HTML and CSS, beginners can explore the creation of buttons with dynamic border animations.

26. Google WebPage Clone

Hone your web development skills by recreating the iconic Google WebPage. This ambitious mini project uses HTML and CSS to guide beginners through the process of cloning Google's homepage.

27. Glitch Text Effect

Embrace the digital aesthetic with the Glitch Text Effect mini project. Using HTML and CSS, beginners can learn to create text elements with a glitchy, distorted appearance.

28. Apple Website Clone

Learn from the best by cloning Apple's website with this mini project. Using HTML and CSS, beginners can explore the intricacies of designing a modern and sleek webpage.

29. Spinners and Loaders

Optimize the user experience during loading times with the Spinners and Loaders mini project. These visually pleasing loading animations entertain users and signal that content is on its way. Improve user retention and satisfaction by incorporating these stylish loaders, turning potential wait times into engaging interactions.

30. NFT Landing Page

Explore the world of non-fungible tokens (NFTs) with the NFT Landing Page mini project. This project allows you to create a dedicated page for showcasing NFT collections or information. Stay on top of current trends in web development and cater to niche interests by incorporating this HTML and CSS project into your site.

31. Accordion

Enhance your webpage's content organization with the Accordion mini project. Using HTML and CSS, beginners can learn to create collapsible sections, saving space and improving user navigation. Dive into the source code to understand the structure and styling, enabling you to implement accordions seamlessly into your websites.

32. Social Media Icons with Tooltip

Elevate your social media presence with Social Media Icons featuring Tooltips. This mini project focuses on combining HTML and CSS to design and implement icons with interactive tooltips. Explore the source code to understand the principles behind creating visually appealing icons that provide additional information when hovered over.

33. Neobrutalism Sign-up Form

Embrace the modern design trend of neobrutalism with the Neobrutalism Sign-up Form. This mini project uses HTML and CSS to guide beginners through the creation of a sleek and minimalist sign-up form. Dive into the source code to understand the styling techniques, adding a touch of contemporary aesthetics to your web pages.

34. Responsive Card

Master the art of creating cards that adapt to various screen sizes with the Responsive Card mini project. Using HTML and CSS, beginners can learn to design cards that look great on both desktop and mobile devices. Explore the source code to understand responsive design principles, ensuring a polished appearance on all platforms.

35. Circular Grid

Explore a unique layout with the Circular Grid mini project. Using HTML and CSS, beginners can learn to arrange elements in a circular pattern, adding a creative touch to their web pages.

Add a user-friendly rating system to your website with the Rating mini project. Using HTML and CSS, beginners can learn to create interactive star or number-based ratings.

Introduce dynamic elements to your website with the Clock mini project. Using HTML and CSS, beginners can learn to design and implement a digital or analog clock.

38. Glassmorphism Loader

Stay on top of design trends with the Glassmorphism Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a glass-like frosted glass effect. Explore the source code to understand styling techniques, allowing you to incorporate this trendy design element into your websites.

39. Checkout Form

Perfect your e-commerce user experience with the Checkout Form mini project. Using HTML and CSS, beginners can learn to create a comprehensive and visually appealing checkout form.

40. Modern Tooltips

Upgrade your website's tooltips with the Modern Tooltips mini project. Using HTML and CSS, beginners can learn to design and implement tooltips that align with contemporary design trends. Explore the source code to understand styling techniques, adding informative and visually appealing tooltips to your web pages.

41. Product Landing Page

Create a compelling showcase for your products with the Product Landing Page mini project. This feature allows you to present product details, images, and calls-to-action in a visually appealing layout.

42. Neumorphic Button

Embrace the neumorphic design trend with the Neumorphic Button mini project. Using HTML and CSS, beginners can learn to create buttons with a soft and tactile appearance. Dive into the source code to understand styling techniques, adding a touch of modern aesthetics to your web pages.

43. Maintenance Page

Handle website maintenance gracefully with the Maintenance Page mini project. Using HTML and CSS, beginners can learn to design a visually appealing maintenance page that keeps users informed.

44. Neumorphic Gradient Loader

Stay at the forefront of design trends with the Neumorphic Gradient Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a neumorphic design and gradient background.

45. Industrial Web Design

Embrace an industrial aesthetic with the Industrial Web Design mini project. Using HTML and CSS, beginners can learn to design web pages with a rugged and mechanical look. Dive into the source code to understand styling techniques, adding a unique and thematic touch to your web projects.

46. Animated Checkbox

Add a touch of animation to user interactions with the Animated Checkbox mini project. Using HTML and CSS, beginners can learn to create checkboxes with engaging animations.

47. Responsive Grid List

Master the art of designing responsive grid lists with this mini project. Using HTML and CSS, beginners can learn to create lists that adapt gracefully to different screen sizes. Dive into the source code to understand responsive design principles, ensuring a polished appearance on various devices.

48. Marquee

Bring a dynamic touch to your website with the Marquee mini project. Using HTML and CSS, beginners can learn to create scrolling text or images.

49. Filter Menu

Enhance user navigation with the Filter Menu mini project. Using HTML and CSS, beginners can learn to create interactive menus that filter content based on user selections.

50. Comments Section

Encourage user interaction and community engagement with the Comments Section mini project. This project provides a platform for users to share their thoughts and feedback.

Explore the fundamentals of list design with this mini project. Using HTML and CSS, beginners can learn to create well-organized and visually appealing lists. Dive into the source code to understand the principles behind list styling, adding a touch of sophistication to your web pages.

52. Social Media Buttons

Amplify your social media presence with Social Media Buttons. This mini project uses HTML and CSS to guide beginners through the process of designing and implementing buttons that link directly to social media profiles.

53. Neubrutalism Cards

Embrace the neobrutalist design trend with Neubrutalism Cards. This mini project uses HTML and CSS to guide beginners through the creation of cards with a minimalist and raw aesthetic.

54. WhatsApp Web Interface

Replicate the familiar interface of WhatsApp for the web with this mini project. Using HTML and CSS, beginners can explore the structure and styling of a messaging application's web interface.

55. 3D Gradient Card

Add depth to your card designs with the 3D Gradient Card mini project. Using HTML and CSS, beginners can learn to create cards with a three-dimensional appearance and gradient background.

56. Hamburger Menu

Streamline navigation on your website with the Hamburger Menu mini project. Using HTML and CSS, beginners can learn to create a responsive and visually appealing menu that collapses into a hamburger icon on smaller screens.

57. Transitional Buttons

Add a touch of elegance to your buttons with the Transitional Buttons mini project. Using HTML and CSS, beginners can learn to create buttons with smooth transitions between states.

58. Our Services Section

Showcase your offerings effectively with the Our Services Section mini project. Using HTML and CSS, beginners can learn to design and structure a dedicated section highlighting the services offered.

59. Survey Form

Gather valuable insights from users with the Survey Form mini project. Using HTML and CSS, beginners can learn to create a comprehensive and visually appealing survey form.

60. Flower Shop Template

Create a visually stunning online presence for a flower shop with the Flower Shop Template mini project. Using HTML and CSS, beginners can explore the design and structure of a website template tailored for a floral business.

61. YouTube Clone

Embark on a comprehensive web development journey with the YouTube Clone mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified version of the popular video-sharing platform.

62. Fruit Shop

Create a vibrant and visually appealing online presence for a Fruit Shop with the Fruit Shop mini project. Using HTML and CSS, beginners can explore the design and structure of a website template tailored for a fresh produce business.

63. Comment Box

Foster user interaction on your website with the Comment Box mini project. Using HTML and CSS, beginners can learn to design and structure a visually appealing comment section.

64. Gooey Effect Loader

Stay on the cutting edge of design trends with the Gooey Effect Loader mini project. Using HTML and CSS, beginners can learn to create loaders with a gooey, liquid-like effect.

65. Spotify Clone

Immerse yourself in the world of music streaming with the Spotify Clone mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified version of the popular music platform. The source code provides insights into creating a visually appealing interface for music playback and exploration.

66. Social Media Share Buttons

Boost your content's visibility with Social Media Share Buttons. This mini project focuses on using HTML and CSS to design and implement buttons that facilitate easy sharing of content on various social media platforms.

67. Tailwind CSS Accordion

Dive into the world of utility-first CSS with the Tailwind CSS Accordion mini project. Beginners can explore the design and structure of an accordion component using the Tailwind CSS framework. The source code provides insights into creating a responsive and customizable accordion for efficient content organization.

68. Tailwind CSS Timeline

Master the art of creating timelines with the Tailwind CSS Timeline mini project. Using the Tailwind CSS framework, beginners can explore the design and structure of a responsive timeline component.

69. Testimonials

Showcase positive feedback and build trust with the Testimonials mini project. Using HTML and CSS, beginners can learn to design and structure a section dedicated to displaying customer testimonials. Explore the source code to understand the layout and styling, ensuring an impactful presentation of client reviews on your website.

70. Blog Post Layout

Elevate your content presentation with the Blog Post Layout mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing blog post template. The source code offers insights into creating an engaging and well-organized layout for sharing articles on your website.

71. Tag Cloud

Enhance content categorization with the Tag Cloud mini project. Using HTML and CSS, beginners can learn to design and structure a visually appealing tag cloud. Dive into the source code to understand the layout and styling, ensuring an effective and dynamic way to display tags on your web pages.

72. Not Found Page

Handle 404 errors gracefully with the Not Found Page mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing 404 error page. The source code offers insights into creating a user-friendly and informative experience for visitors who encounter missing pages on your website.

73. Simple Search Bar

Enhance user navigation with the Simple Search Bar mini project. Using HTML and CSS, beginners can learn to design and structure a clean and efficient search bar.

74. Range Slider

Master the art of user input with the Range Slider mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing slider component. Dive into the source code to understand the principles behind creating interactive sliders, adding a dynamic element to your web pages.

75. Comic Book Layout

Bring a touch of creativity to your website with the Comic Book Layout mini project. Using HTML and CSS, beginners can explore the design and structure of a visually engaging comic book-inspired layout.

76. Skeleton Loading

Optimize user experience during page loading with the Skeleton Loading mini project. Using HTML and CSS, beginners can learn to design and structure a skeleton loading animation that provides visual feedback while content loads. Dive into the source code to understand the styling techniques, ensuring a smooth transition for users.

77. Coming Soon Page

Build anticipation for your upcoming projects with the Coming Soon Page mini project. Using HTML and CSS, beginners can explore the design and structure of a visually appealing page that teases upcoming content or features. The source code offers insights into creating an attractive and informative coming soon experience for your audience.

78. Pricing Page

Present your product or service offerings effectively with the Pricing Page mini project. Using HTML and CSS, beginners can learn to design and structure a comprehensive pricing page. Explore the source code to understand the layout and styling, ensuring a clear and visually appealing presentation of your pricing tiers.

79. Bank Dashboard

Dive into the world of financial user interfaces with the Bank Dashboard mini project. Using HTML and CSS, beginners can explore the design and structure of a simplified bank dashboard. The source code provides insights into creating a user-friendly and visually appealing platform for managing financial information.

80. Star Rating

Implement a customizable star rating system with the Star Rating mini project. Using HTML and CSS, beginners can learn to design and structure interactive star-based ratings.

81. Bootstrap 5 Navbar

Explore the power of Bootstrap 5 with the Bootstrap 5 Navbar mini project. Using HTML and the Bootstrap framework, beginners can learn to create a responsive and feature-rich navigation bar. Dive into the source code to understand the Bootstrap classes and styling techniques, ensuring a sleek and functional navbar for your web pages.

82. HTML Table

Master the art of data presentation with the HTML Table mini project. Using HTML and CSS, beginners can learn to design and structure a clean and organized table. Explore the source code to understand the principles behind creating responsive and visually appealing tables for displaying various types of data on your web pages.

83. Login Modal Form

Enhance user interactions with the Login Modal Form mini project. Using HTML and CSS, beginners can learn to design a sleek modal form that provides a seamless login experience. Dive into the source code to understand the styling techniques, ensuring an elegant and user-friendly modal for your web pages.

84. Movie Poster Cards

Dive into the world of cinema with the Movie Poster Cards mini project. Using HTML and CSS, beginners can learn to design visually appealing cards showcasing movie posters. Explore the source code to understand styling techniques, ensuring an engaging and attractive presentation of movie information on your web pages.

85. Text Overlay

Elevate your image presentations with the Text Overlay mini project. Using HTML and CSS, beginners can learn to overlay text on images, creating a visually dynamic effect.

86. Sticky Call Button

Improve user accessibility with the Sticky Call Button mini project. Using HTML and CSS, beginners can learn to create a button that remains fixed on the screen, providing quick access to essential actions. Explore the source code to understand the principles behind creating a sticky call button for enhanced user engagement.

87. Weather App Interface

Bring real-time weather information to your website with the Weather App Interface mini project. Using HTML and CSS, beginners can explore the design and structure of an intuitive weather application interface. Dive into the source code to understand styling techniques, ensuring a visually appealing and informative weather display.

88. Tailwind CSS Modern Buttons

Embrace the simplicity and flexibility of Tailwind CSS with the Tailwind CSS Modern Buttons mini project. Beginners can explore the design and styling of modern buttons using the Tailwind CSS framework.

89. Button with Hover Effects

Elevate your button designs with interactive hover effects in the Button with Hover Effects mini project. Using HTML and CSS, beginners can learn to create buttons that respond dynamically to user interactions.

90. Code Snippets

Showcase your code snippets effectively with the Code Snippets mini project. Using HTML and CSS, beginners can learn to design a visually appealing container for displaying code snippets.

91. Underline Hover Effect

Add a subtle but effective hover effect with the Underline Hover Effect mini project. Using HTML and CSS, beginners can learn to create links that underline dynamically upon hovering.

92. Animated Wave Footer

Make a lasting impression with the Animated Wave Footer mini project. Using HTML and CSS, beginners can learn to design a footer with a dynamic wave animation.

93. Animated Wave Banner

Capture attention with the Animated Wave Banner mini project. Using HTML and CSS, beginners can explore the design and structure of a banner with a captivating wave animation. Dive into the source code to understand animation techniques, creating an eye-catching introduction to your web pages.

94. Tailwind CSS Resume

Craft a professional online resume with the Tailwind CSS Resume mini project. Beginners can explore the design and styling of a modern and responsive resume using the Tailwind CSS framework.

95. Blog Card

Enhance your blog layout with the Blog Card mini project. Using HTML and CSS, beginners can learn to design visually appealing cards to showcase blog posts. Explore the source code to understand styling techniques, ensuring an organized and engaging presentation of blog content on your web pages.

96. Tile Spinner

Add a touch of dynamism to your website with the Tile Spinner mini project. Using HTML and CSS, beginners can learn to create a spinner animation that adds visual interest during page loading.

97. Pagination

Improve navigation through content with the Pagination mini project. Using HTML and CSS, beginners can learn to design and structure a pagination system. Explore the source code to understand the layout and styling, ensuring an efficient and user-friendly way to navigate through multiple pages of content on your website.

98. Wooden Toggle Button

Bring a unique aesthetic to your user interface with the Wooden Toggle Button mini project. Using HTML and CSS, beginners can learn to design a toggle button with a wooden texture.

99. Neumorphic Buttons

Embrace the neumorphic design trend with the Neumorphic Buttons mini project. Using HTML and CSS, beginners can learn to create buttons with a soft and tactile appearance.

100. Fire Animation

Conclude your mini project collection with a dynamic touch using the Fire Animation mini project. Using HTML and CSS, beginners can explore the design and structure of a captivating fire animation.

Mastering web development requires a combination of theoretical knowledge and hands-on experience. The collection of 100 HTML and CSS projects presented here offers a practical approach to learning, allowing you to enhance your skills in a structured manner.

Remember, the key to becoming a proficient web developer lies in consistent practice and exploration. As you work through these mini projects, don't hesitate to experiment, modify, and make each project your own. The journey of a web developer is both challenging and rewarding, and these mini projects are your stepping stones to success.

Frequently Asked Questions (FAQs)

1. do i need any special software for these projects.

All you need is a code editor and a web browser. No fancy software is required – just your enthusiasm for coding!

2. How can I get feedback on my projects?

Consider sharing your projects on platforms like GitHub, CodePen, or web development communities to receive constructive feedback.

3. Are these projects suitable for absolute beginners?

Yes, these projects are designed with beginners in mind. Start with simpler ones and gradually progress to more complex projects.

4. Can I modify the projects and add my own features?

Certainly! It's encouraged to personalize the projects and add your unique touch to showcase your creativity.

5. What's the next step after completing these mini projects?

After mastering these mini projects, consider exploring more advanced topics like JavaScript frameworks, backend development, and responsive design principles.

6. How long does it take to finish a mini project?

The beauty of mini projects lies in their bite-sized nature. You can complete some in a few hours, making them perfect for your busy schedule.

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Create a Dashboard with Sliders and Music Player using HTML, CSS, and JavaScript

Learn how to create a responsive dashboard with interactive sliders and a music player using HTML, CSS, and JavaScript. Step-by-step tutorial included.

Crafting an Engaging Pet Food Shop Template: HTML, CSS, JavaScript

May 20, 2024

How to Create a Scrollable Sticky Sidebar with HTML, CSS, and JavaScript

May 18, 2024

Creating a Shopping Cart Concept Using HTML, CSS, Vue, and Slick.js

Creating a Responsive Bootstrap Dashboard: Source Code Included

May 14, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

March 07, 2024

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

March 01, 2024

Create Your Own Bubble Shooter Game with HTML and JavaScript

Learn how to develop a bubble shooter game using HTML and JavaScript with our easy-to-follow tutorial. Perfect for beginners in game development.

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

December 25, 2023

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

December 07, 2023

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

November 17, 2023

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Master the art of color picking with Vibrant.js. This tutorial guides you through building a custom color extractor tool using HTML, CSS, and JavaScript.

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

URL Keeper with HTML, CSS, and JavaScript (Source Code)

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

Learn how to design a modern footer for your website using Tailwind CSS with our detailed tutorial. Perfect for beginners in web development.

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

How to Create a Responsive Footer for Your Website with Bootstrap 5

August 19, 2022

A professional educational platform to give you the best educational content, with a focus on dependability for tech tips, blogging, coding, programming, and much more

Useful Tools

Case converter, word counter, scrollbar generator, find and replace text, slug generator, lorem ipsum generator, related posts.

How to Create a Speed Typing Game with HTML, CSS, and...

Create Effective Signup Form Validation with HTML, CSS,...

3D Gradient Card with Dynamic Hover Effect - CSS

How to Create a Hoverable Drop Down Menu with HTML and...

Experience Certificate Generator in HTML, CSS, and...

How to Add Fixed Social Media Share Buttons to Your...

Designing a Neumorphic Gradient Loading Indicator with...

Build Your Own Movie Theater Booking App: HTML, CSS,...

Scroll-to-Top Button with Progress Indicator Using...

Responsive Details Card Slider with HTML, CSS, and...

HTML and CSS Tips: Creating Engaging UI Comments...

Build a Responsive Screen Distance Measure with HTML,...

Computers Accessories

Kitchen Products

Programming Books

Video Games

Electronic Products

Clothing & Accessories

Smart Watches

Car Accessories

Health Care

Beauty Products

Sports & Outdoors

• Dropdown (4)
• Tailwind (18)
• Marquee (1)
• Notification (2)
• C Sharp (0)
• Countdown (4)
• Context Menu (1)
• Maintenance Page (1)
• Login/Signup Page (2)
• Carousel (12)
• Fun Project (6)
• File Uploader (2)
• Scroll to Top (1)
• Landing Page (49)
• Sign up Form (2)
• Pagination (4)
• Copy to Clipboard (2)
• Hamburger (5)
• Login Form (6)

Python Projects

Convert PNG to JPG Using Python and Tkinter | Download...

Step-by-Step Guide to Creating a Python Calculator GUI...

Create a Paint Application in Python using Tkinter

Creating a User-Friendly Language Converter in Python

Learn Python by Building a Brick Breaker Game | Source...

300+ Most Used Free SVG Icons - Electronics, Direction,...

Get High-Quality SVG Icons of Car Brands Logos for Free

Emoji Copy and Paste: Expressive Emoticons for Every...

Free Download SVG Icons: Bootstrap Icons Collection -...

In this homework, you will be practicing the HTML and CSS that we learned in lecture.

For Part 1 , you are given screenshots and a description of a specific web page to replicate. You will recreate the web page exactly as shown in the provided screenshots.

For Part 2 , you will create your own list-based article with any styling you’d like.

Due Date: Wed, Apr 19, 2017 at 11:59pm (late cutoff: Fri, Apr 21, 2017 at 11:59pm) HW1 Mini: Mini-Homework #1 HW1 Turn-in: Submission Form

Part 0: Getting started

Part 1: beverage listicle: listicle.html, 1. mini-homework.

• Complete the Mini-Homework to review some of the concepts needed to complete this homework.

2. Accept the HW1 assignment

• Follow this link , where HW1 is stored on GitHub Classroom.
• Accept the homework and download the starter code as you did in Homework 0 .

A listicle is a somewhat trendy type of article that uses a list as its thematic structure.

For Part 1, you will create a listicle web page that describes the “4 on-campus beverages you should be drinking” at Stanford. You should create the web page in listicle.html with styles defined in listicle-style.css .

1. Overall appearance

Here is a miniature screenshot of the website you need recreate in this homework:

A full-size screenshot of the entire page (with a screen width of 1280px) is linked below:

• Full-size screenshot

Note that you do not have to type in the contents of the page.

• The text of the article is contained within listicle-content.txt , which is included in your Homework 1 starter code.
• Copy and paste the text of listicle-content.txt into your listicle.html file, then add the HTML tags necessary to style the page.
• The images are also in the images/ directory of the Homework 1 starter code.

2. Section measurements

3. Font faces, sizes, and colors

• The font face is 'Roboto Slab' and the fallback font is serif .
• The font size is 36px .
• The font weight is normal (not bold).
• The font color is white .
• The title is vertical and center aligned to the header image.

• The font face is 'Source Sans Pro' and the fallback font is sans-serif .
• The font size is 18px .
• The font weight for the author name (“Victoria Kirst”) is bold
• The font style for the last updated (“Last updated Apr 7, 2017”) is italic .
• The font color is rgb(51, 51, 51) .
• The line height 24px .
• The gray line under the “Last updated” line is 10px under the text, 2px wide, and the color is #e6e6e6 .

• The font weight is bold .
• The number’s color is rgba(0, 0, 0, 0.25) .
• The title color is rgb(51, 51, 51) .
• The address under the heading is a link and is described in the Links section .
• The line height 32px .

• The phrase “Recommendation:” is bold .

Here is a description of how links should work on your page:

• Each address of the page is a link. The URL for each link is listed in listicle-content.txt .
• The link color is #42b4d6 .
• The link is not bold, and the link is not underlined unless you hover over the link.
• When you hover over the link, the link becomes underlined.
• To remove an underline, you can use CSS property text-decoration: none;
• To add an underline, you can use CSS property text-decoration: underline;
• Note: To reference the image from the css/ folder, the path needs to be ../images/header.jpg
• The background does not repeat.
• The background’s size is set to cover .
• The background position is anchored to the top .
• Its height is 500px .
• Note: You can achieve this using the following CSS rule: background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(../images/header.jpg);
• Note: To reference the image from the css/ folder, the path needs to be ../images/vrk.png
• Its width is 100px .
• It has rounded corners with radius 100% .
• It has a white border that is 1px thick.

HTML and CSS style requirements

For full credit, please abide by the following:

• Use HTML and CSS we’ve learned in class. You should be able to complete this homework using HTML and CSS we’ve learned in class through lecture 6 / Apr 14. While you are not strictly forbidden from using HTML/CSS we haven’t talked about in class, if you use it incorrectly or if you make poor stylistic choices, you may be marked down.
• Do not use JavaScript . There’s no need to use JavaScript in this assignment.
• Respect Separation of Concerns . Your HTML should describe the content of your page, and your CSS should describe your page’s appearance.
• Do not use an ordered list element ( ol ) to create the list layout. There’s nothing wrong with doing this, per se, but it involves some fairly esoteric CSS that we did not cover in class. We recommend you write out the numbers “1.”, “2.”, etc. in the HTML instead of using ol .
• Follow the best practices that were described in lecture and in the mini-homework.
• Reduce redundancy in CSS. Try not to have too many redundant styles, if there are ways to use inheritance or special selectors to concisely define style rules.
• Match the given appearance as closely as possible. It’s fine if your web page is off from our description by a few pixels here and there, but noticeable differences may result in a lower homework score.
• Use descriptive names, consistent spacing, and otherwise follow good code hygiene.

Part 2: Your Listicle: my-list.html

Design your own listicle! You should write the content in my-list.html and the style in my-list-style.css .

• Cannot be an exact line-for-line copy of listicle.html
• Must have at least 3 items in your list
• Must correctly use display: flex at least once.
• You can, but do not have to, refer to listicle-style.css .

You can spend as much or as little time on this part as you want, provided that your page does fall within the guidelines above.

• Note: The example linked above is simple but not actually best practice. You can check out this article to try a more sophisticated implementation.
• CSS animations: When the real Squarespace demo loads, notice how the text animates in. We haven’t talked about how to do that yet. We will talk about CSS animations in class in a few weeks, but if you want to get a head start, try experimenting with some CSS animations on your page.

Upload your completed homework to your GitHub repository and publish them, in the same way that you did with Homework 0 .

Turn in the link to your GitHub repository and links to your two completed web pages via this form:

• Turn in Homework 1

40 Web Development Projects For Beginners — HTML CSS

Niemvuilaptrinh

Bits and Pieces

Using multiple libraries for web design will somewhat increase page load time as well difficult to apply to many different projects.

So today I will introduce to you components or effects built with pure HTML and CSS. It will help you use it for many different types of web projects as well as increase your skills in HTML and CSS.

And now let’s go in together and find out.

💡 Once you have created these components, you can extract their HTML + CSS + JavaScript into components that you can then use Bit to version and publish to your Bit.dev repository, making them shareable with others. Click here to know more.

Learn more about reusing CSS components:

Tutorial: create reusable css components with bit, this tutorial guides you through the process of creating reusable css components with bit and scss. learn how to…, css radio buttons.

And below is the code on Codepen!

Hamburger Menu

Custom checkboxes.

https://codepen.io/Vestride/pen/dABHx

Modal/Popup CSS

Animated gradient ghost button, dropdown menu, accordion css, css image slider, css progress, sidebar menu, loaders kit, hover button, animated background, button hover effect, toggle buttons, circle menu, facebook emoji reactions, pure css text animation, text slider with typing animation in pure css, css text reveal, animate menu css, pure css navigation overlay, tooltip css, pure css accordion, pure css table highlight, pure css custom checkbox, pure css segmented controls, hover effect without js, pure css responsive tabs, pure css gradient text animation effect, pure css blur hover effect, pure css folded-corner effect, css multi-level accordion, pure css select box, drop menu pure css, pure css magic line navbar, responsive pure css tabs.

Through this, I hope the article will provide you with useful CSS tips for developing, web design and if you have any questions just send an email I will respond as soon as possible. Hope you continue to support Please support the website so that I can write more good articles. Have a nice day!

Buy me a Coffee

Build composable web applications

Don’t build web monoliths. Use Bit to create and compose decoupled software components — in your favourite frameworks like React or Node. Build scalable and modular applications with a powerful and enjoyable dev experience.

Bring your team to Bit Cloud to host and collaborate on components together, and speed up, scale, and standardize development as a team. Try composable frontends with a Design System or Micro Frontends , or explore the composable backend with serverside components .

Give it a try →

How We Build Micro Frontends

Building micro-frontends to speed up and scale our web development process..

blog.bitsrc.io

How we Build a Component Design System

Building a design system with components to standardize and scale our ui development process., the composable enterprise: a guide, to deliver in 2022, the modern enterprise must become composable., how to build a composable blog, creating a blog from scratch requires quite a lot. there are a number of moving parts that come together to create a…, meet component-driven content: applicable, composable, since the advent of technologies such as react and angular, we have often come to relate the term ‘component’ in…, building a composable ui component library, how to build component library. react component library, with composable components..

Written by Niemvuilaptrinh

Where you can find programming resources for web development such as HTML, CSS, Javascript, Bootstrap, Programming Resources, Web Design.

More from Niemvuilaptrinh and Bits and Pieces

JavaScript in Plain English

40 Portfolio Templates Free For Web Design

Today we will together learn about beautiful, free portfolio templates for website design and development..

Danusha Navod

7 Node.js Design Patterns Every Developer Should Know

Explore the facade, adapter, singleton, prototype, builder, proxy and factory for modern software design..

Ashan Fernando

5 Essentials for Modern Frontend Architecture

Quick insights to better design your frontend architecture.

Enlear Academy

29 footer examples for website

Welcome back to my blog. today we are going to learn footer snippet by combining html, css, javascript and bootstrap . come on, let’s find…, recommended from medium.

Codewithrandom

E-commerce Website Using HTML, CSS, and JavaScript (Source Code)

E-commerce website using html, css, and javascript.

70+ Best Moderns Free HTML CSS Website Templates

Are you looking for either a simple free but professional html css template to design a showcase site, a langing page or other ….

General Coding Knowledge

Coding & Development

Stories to Help You Grow as a Software Developer

Abdullah Saifullah

My 2.5 Years of Working as a Front end Developer in a Software Company

Hello everyone, i’m excited to share my journey as a front-end developer over the past 2.5 years, particularly my time at kerneltech. i’ll….

ArgyleStreetProgramming

Best Resource to Learn HTML and CSS

Using mdn web docs to learn html.

10 Beginner CSS Tricks

Basic css tips & tricks to up your style game.

monica wambui

What Tech Stack Should I use To Build My Portfolio

Introduction.

Text to speech

Assignment 1: Static Web: HTML/CSS

Due Sunday, February 7 11:59pm ET

Accept the Github Classroom assignment and clone this repo that contains stencil code for Assignment 1.

Introduction

This is a multi-part assignment with the objective of making you comfortable working with HTML and CSS. By the end of this assignment, you will have styled some rectangular blocks and created a simple version of Twitter's home page.

If this assignment seems overwhelming to you, please come see a TA at TA hours to talk through some strategies for tackling it. We expect this assignment to be a time-consuming assignment as we cover a lot of fundamental techiniques. But with a good strategy, it can be finished in a reasonable amount of time.

Note: Only CSS and HTML will be used for this assignment. If you want to use JavaScript (or libraries such as jQuery) then feel free to, but we will only be grading correctness on your CSS and HTML.

If you can, Start Early!

Specifications

Now that you understand some of the basics of HTML and CSS, let’s take a look at how to align HTML elements. There are multiple ways to align HTML elements, but in this part, we recommend using flexboxes as they are widely used in modern web development (for example BootstrapV4 is built on top of flexboxes).

Refer to this great webpage on how to use flexboxes: CSS Flexbox Guide .

Also feel free to use online resources such as Stack Overflow, MDN, W3, and Google for reference.

As you can see, there are 9 rectangles. The styling and makeup of the first two rectangles are already built for you. Your task is to apply stylings and add div elements inside of the next 7 green rectangular blocks to create a webpage that looks like this:

For the third row, the red and blue end rectangles should remain the same width, and the green space should shrink.

Possible Approach: Have a div with a red background and a div with a blue background, both with fixed width. Use an appropriate value for Justify Content .

For the fourth row, the blue end rectangle should remain the same width, and the red rectangle should shrink.

Possible Approach: Have a div with a red background and a div with a blue background. Have a fixed width on the blue div. Use Flex Grow .

For the fifth row, the red square should remain the same size, but always remain in the center of the green rectangle.

Hint: Think about how to keep a div fixed size and how to align something in the absolute center of the parent element.

For the sixth row, the blue rectangle should remain the same size, while the red rectangles should shrink. The blue rectangle should remain in the center of the row.

Hint: Use two red divs.

For the seventh row, the red rectangle should remain the same width.

Hint: Nest divs and use background-color: transparent

For the eighth row, the orange rectangles should remain the same size while the green space between them shrinks.

For the ninth row, the green space between the orange rectangles should remain the same width while the orange rectangles narrow.

The examples we provided with the first two rectangular blocks use flexboxes. You are not required to use flexboxes for the next 7 rows, but we recommend it as it will also be useful in part 2 of this assignment.

You should only have to use the div html element to complete this assignment. Also, none of the divs you create inside of the provided wrapper divs should have background-color: green; . But it is valid to specify non-green background colors for any divs, including the wrapper.

• The color of the boxes we used are background-color: red , blue , and orange
• Some width/height values we used are 20px, 40px, 80px

You are not required to use Bootstrap in this part. You can use if you want, but we actually recommend writing plain CSS. Just for this part, inline CSS is acceptable, but you should generally avoid using inline CSS in the future.

Any images you'll need can be found in the part2/images folder, which can be referenced as ./images (when CSS is in its own file, URLs are relative to the CSS file, not the page it is loaded on). All of your HTML should go in the index.html file and all of your CSS should go in the index.css file.

Feel free to go on Twitter and use your browser’s inspect element to see how they do font sizes, font weights, margins, paddings, text colors, and background colors (use inspector). Our solution is a bit different than Twitter’s architecture because twitter’s HTML/CSS setup is way too complicated for a simple web mockup. If you try to copy Twitter’s code instead of creating the HTML elements yourself, you’ll end up spending way more time trying to figure out what each div does and how to decipher their massive styling code base.

Ethics Requirements

A screen reader needs to know in advance what language your website is in in order to function properly.

To help it out, make sure to declare the language of your website in the lang= attribute of the html tag.

Blind and low-sighted users often can’t see images on a site.

• To help them enjoy your site’s content, all images must have alt text.
• The alt text goes in the alt="..." attribute of the image element.
• You should give a basic description of what is in the image. Putting image in the alt attribute does not count!

Blind or low-sighted users may want to “skim through” a page using their screen reader. To make that easier, the page should have a logical hierarchy using different headings to designate different levels of importance.

Note: your Twitter page won’t have that many headings. Just don’t use headings to style things!

If you want a piece of text that isn’t a heading to be big or bold, use HTML elements like em and b tag or CSS to style it rather than the heading attribute.

For people using screen readers to navigate the page, ARIA landmarks are a big help – they can help users skim the page, or to quickly find the content they need. These are attributes that can be added to any element on the page and appear as role= attributes within a div’s opening tag. The ARIA landmarks you are required to include are:

• role=navigation (to designate the navigation menu): add this to the navigation bar.
• role=main (main page content, i.e. the tweets): add this to the div you use to contain your tweets.

Look here for more tips and examples.

Finally, your page should have a skip link (think <a> !) somewhere at the top of the navigation. Skip links are links at the top of the page which allow a user to skip to the main content of the page. They’re important for older browsers and screen readers that may not support ARIA landmark navigation.

• This can be styled any way you like! However, for this project, hide them using display: none; .
• To do this, you’ll have to give the div you will be jumping to an ID, and have the link href="..." attribute point to that div’s ID. For example, if I wanted to jump to a div with the ID myDiv, I would have the following link: <a href=”#myDiv”>Jump to myDiv</a>
• In our case, this means skipping to content-wrapper or content-center , depending on your implementation. More tips and examples can be found here .

We recommend running your page through WAVE’s accessibility checker, which we asked you to add to your Firefox and/or Chrome browsers during lab 1. We’ll be using that tool to test whether your ARIA landmarks and general hierarchy are logical, as well as whether you’ve implemented alt text in your image descriptions.

Note: The Chrome WAVE extension has been a little finicky lately. If you’re having trouble, try running your code on a department machine and/or using Firefox.

For help, take a look at our Accessibility Resource Sheet in Docs or come to TA hours!

Functionality Requirements

In the following, we put together some hints on how to accomplish the functionality requirements. We also encourage you to refer to online resources like MDN and CSSTricks for HTML and CSS properties.

Note: Don't worry about getting the font sizes or font colors exact. That being said, #4AB3F4 is the blue color used in the mockup and #E6ECF0 is the light gray background color.

Twitter's header is fixed which means when you scroll down, the header remains at the top of the webpage. We will require you to implement your header in a similar manner. To do this, use:

• position: fixed; Adding this to an element makes it stick to whatever position you specify
• top: 0; left: 0; These are the positions for the fixed element that will keep the element fixed at the top
• z-index: 100; Adding this to an element makes it positioned above other elements (You could probably make it work with z-index: 5, but we put 100 just to make sure). Elements without a specified z-index have a default z-index of 0. Elements with higher z-indexes are placed over elements with lower z-indexes.

If you decide to use Bootstrap, you may find Navbar Placement to be useful.

Lastly, we require you to have the Twitter logo stay in the middle of the header when you resize the window.

• Home <i class="fas fa-home"></i>
• Moments <i class="fas fa-hashtag"></i>
• Notifications <i class="far fa-bell"></i>
• Messages <i class="far fa-envelope"></i>

The file path of the twitter logo is ./images/twitter-logo.png

content-wrapper

• max-width: 1190px; This sets the maximum width of the element.
• margin: 56px auto; This sets the vertical margins to 56px so that it is below the header and the horizontal margins to automatically center the element.

content-left

• Cover picture (purple)
• Profile picture (orange)
• Profile stats (green)

We require you to create the overlapping effect between the profile picture and cover picture. Usually to sepcify priority in stacked display (think it as layers), you will use z-index .

Bootstrap section for positioning

• The filepath of the cover picture is ./images/ratatouille-banner.png while ./images/ratatouille.jpg is the filepath of the profile picture for Remy and ./images/linguini.png is the filepath of Linguini's profile picture.

content-center

We require that you include the profile picture in every one of the tweets. Additionally, in at least one of the tweets you should have a span tag to change the styling of a single word within the tweet.

border-radius: 50%; or Bootstrap class rounded-circle makes an element a circle.

content-right

If you minimize the width of your browser when on Twitter, you will notice that the content on the right disappears at a certain point. This is done using CSS media queries.

We require you to do the same on your mockup. So, use a media query to make content-right disappear when the window’s width is less than or equal to 1200px.

Other than the explicitly stated requirements for this part, we would like you to make your Twitter mockup generally resemble the solution provided above

If you can, please make your webpage compliant across browsers. But we will be testing your assignment on Chrome.

To access Chrome in CIT machine: From the command-line, type chrome .

General Notes

As a reminder, it's a good idea to run your HTML and CSS syntax through validators. You should also consider using an accessibility checker such as WAVE.

Troubleshooting

There are hundreds of HTML and CSS tags, properties, and values, and CS132 does not expect students to learn each one by heart. However, this assignment and the first lab are intended for you to intuitively understand the languages, and to be proficient at knowing how to tackle a design by the end of the semester.

If you’re having problems, there are many guides on HTML and CSS online (CSSTricks and MDN are your friends), as well as on our resources page.

As always, if you are stuck on a particular part, you can always talk to the friendly TAs or ask questions on course piazza (check your email for a signup link).

As a general rule of thumb, do not expect TAs to be able to solve every web problem you have. Even the most adept web developer can struggle a lot with specific CSS rules to use.

To hand in your code for Assignment 1, upload the directory containing your solution to part 1 and part 2 to Gradescope .

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

Advertisement

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

What Is CSS?

CSS (cascading style sheets) works in conjunction with HTML  and is directly responsible for dictating color, background, text color, font, positioning and additional features to the web browser. CSS is a key component of web development .

Is CSS a Programming Language?

More on Built In Can Low-Code Tools End the Developer Shortage?

HTML vs. CSS: What’s the Difference?

Although HTML and CSS are closely related, CSS determines style whereas HTML determines content and structure.

CSS and HTML work together with different areas of focus to create the webpage a user sees. These differing foci result because CSS is a stylesheet language, whereas HTML is a markup language. So, HTML structures web pages with elements like headers, paragraphs and lists while CSS contains the style information for those structures. While neither HTML or CSS is more complex than the other in terms of syntax, a major difference is that HTML can contain CSS within its code and files, but CSS cannot contain HTML. Both HTML and CSS are mutually containing, however, meaning CSS and HTML share tag names with each other.

What Does Responsive Mean in CSS?

Responsive web design means the CSS uses flexible layouts, images and other techniques to style the page automatically for various screen sizes.

Modern web pages are viewable on multiple devices with variously sized screens and layouts. Additionally, most common laptop and desktop computers allow windows that software and browsers launch to be reshaped into various sizes. This resizing posed a challenge for CSS developers and caused errors in layout and font placement until the development of responsive web design.

Instead of using fixed-width parameters, in responsive web design , CSS uses X- and Y-coordinates on a grid along with mathematical percentages to determine where assets should be placed based on the current size of the window or another reference point, such as a printer. CSS2, an evolution of CSS, incorporated media queries to allow developers to specify triggers for certain styles to take effect. For example, it can present a printer-friendly version of the page when requested. CSS3 took this a step further by introducing query capabilities to respond to the dimensions of a viewport or a device, the portrait or landscape orientation of the device and the screen resolution.

Built In’s expert contributor network publishes thoughtful, solutions-oriented stories written by innovative tech professionals. It is the tech industry’s definitive destination for sharing compelling, first-person accounts of problem-solving on the road to innovation.

Great Companies Need Great People. That's Where We Come In.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Homework for the HTML-CSS Module

CodeYourFuture/HTML-CSS-Homework

Folders and files, repository files navigation, html-css homework.

In this repository you can find all of the homework for the HTML-CSS Module

Code of conduct

Security policy, sponsor this project.