32 HTML And CSS Projects For Beginners (With Source Code)

assignments for html and css

updated Dec 4, 2023

If you want to feel confident in your front-end web developer skills, the easiest solution is to start building your own HTML and CSS projects from scratch.

As with any other skill, practicing on simple, realistic projects helps you build your skills and confidence step-by-step.

But if you are new to HTML and CSS, you may be wondering:

Where can I find ideas for beginner-level HTML and CSS projects?

Even if you are just starting out with HTML and CSS, there are some fun and easy projects you can create.

Whether you are new to learning web development or have some experience under your belt, this guide is the perfect place to start improving your skills.

In this article, I’ll walk you through 32 fun HTML and CSS coding projects that are easy to follow. We will start with beginner-level projects and then move on to more demanding ones.

If you want to become a professional front-end developer, the projects below will help you expand your portfolio.

When it’s time to apply for your first entry-level job, you can showcase your skills to potential employers with a portfolio packed with real-life project examples.

Let’s get started!

Please note: This post contains affiliate links to products I use and recommend. I may receive a small commission if you purchase through one of my links, at no additional cost to you. Thank you for your support!

What are HTML and CSS?

HTML and CSS are the most fundamental languages for front-end web development.

Learning them will allow you to:

  • Build stunning websites
  • Start a coding blog
  • Make money freelancing

Let’s take a quick look at both of them next:

What is HTML?

HTML or HyperText Markup Language is the standard markup language for all web pages worldwide.

It’s not a “typical” programming language – like Python or Java – since it doesn’t contain any programming logic. HTML can’t perform data manipulations or calculations, for example.

Instead, HTML allows you to create and format the fundamental structure and content of a web page.

You will use HTML to create:

  • Page layouts (header, body, footer, sidebar)
  • Paragraphs and headings
  • Input fields
  • Checkboxes and radio buttons
  • Embedded media

Thus, HTML only allows you to determine the structure of a web page and place individual content elements within it.

For more details, check out my post on what HTML is and how it works .

You can’t format the look and feel of your web page with HTML, though.

Your HTML web page will look dull and boring. Sort of like this:

The first HTML WWW website ever built

The example above is the first web page every built for the WWW , by the way.

This is how websites used to look in the ’90s. But we’ve come a long way since then – luckily.

To make your HTML content visually appealing and professional-looking, you need another language: CSS. Let’s look at that next.

What is CSS?

CSS or Cascading Style Sheets is a style sheet language that allows you to adjust the design and feel of your HTML content.

Thus, you can turn your pure-HTML pages into stunning, modern websites with CSS. And it’s super easy to learn, too!

Here’s how it works:

CSS allows you to target individual HTML elements and apply different styling rules to them.

For example, here’s a CSS rule that targets H2 headings, their font-size property, and sets it to a value of 24px:

You can use CSS to adjust:

  • Backgrounds
  • Fonts and text styling
  • Spacings (paddings, margins)
  • CSS animations
  • Responsiveness (media queries)

If you want to create stunning websites and become a front-end web developer, CSS is one of the first tools you must learn and master.

For more details, check out my post on what CSS is and how it works .

learning to code working on laptop

Why build HTML and CSS projects?

Practicing on realistic, hands-on projects is the best way to learn how to create something useful and meaningful with HTML and CSS.

The more projects you build, the more confident you will feel in your skills.

To build a web page from scratch , you need a basic understanding of how HTML works. You should be comfortable with writing the necessary HTML code to create a page without copying a boilerplate or following a tutorial.

Thus, if you want to become a front-end web developer , building HTML and CSS projects will teach you how to use these two languages in real life.

Therefore, practising your skills with the projects in this article will give you a competitive edge against anyone who’s simply following tutorials and copy-pasting other people’s code.

Finally, building HTML and CSS projects helps you build a professional portfolio of real-world projects.

When it’s time to start applying for your first job, you will have 10 to 20 cool projects to showcase your skills to potential employers. Not bad!

32 HTML and CSS projects: Table of contents

Here’s an overview of the HTML and CSS projects we’ll go through:

Beginner project: CSS radio buttons

Beginner project: css toggle buttons, beginner project: hamburger menu, beginner project: pure css sidebar toggle menu, beginner project: animated css menu, beginner project: custom checkboxes, beginner project: pure css select dropdown, beginner project: modal/popup without javascript, beginner project: animated gradient ghost button, beginner project: css image slider, basic html & css website layout, tribute page, survey page with html forms, sign-up page / log-in page, job application form page, landing page, product landing page, interactive navigation bar, responsive website header, restaurant menu, restaurant website, parallax website, custom 404 error page, personal portfolio website, blog post layout.

  • Photography website

Music store website

Discussion forum website.

  • Event or conference website

Technical documentation website

Online recipe book, website clone.

Share this post with others!

HTML and CSS projects for beginners with source code – Mikke Goes Coding

This quick project is a great example of what you can do with pure CSS to style radio buttons or checkboxes:

See the Pen CSS radio buttons by Angela Velasquez ( @AngelaVelasquez ) on CodePen .

☝️ back to top ☝️

This HTML and CSS project teaches you how to create custom CSS toggle buttons from scratch:

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh ( @himalayasingh ) on CodePen .

Every website needs a menu, right?

This hamburger menu is beautiful and clean, and you can build it with just HTML and CSS:

See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan ( @erikterwan ) on CodePen .

Placing your website navigation inside a sidebar toggle is an easy way to clean up the overall look and feel of your design.

Here’s a modern-looking solution to a pure-CSS sidebar toggle menu:

See the Pen PURE CSS SIDEBAR TOGGLE MENU by Jelena Jovanovic ( @plavookac ) on CodePen .

If you want to build a more dynamic, interactive website navigation, try this animated CSS menu:

See the Pen Animate menu CSS by Joël Lesenne ( @joellesenne ) on CodePen .

Styling your checkboxes to match the overall design is an easy way to elevate the look and feel of your website.

Here’s an easy HTML and CSS practice project to achieve that:

See the Pen Pure CSS custom checkboxes by Glen Cheney ( @Vestride ) on CodePen .

Standard select dropdowns often look dull and boring. Here’s a quick CSS project to learn how to create beautiful select dropdowns easily:

See the Pen Pure CSS Select by Raúl Barrera ( @raubaca ) on CodePen .

Modals and popups often use JavaScript, but here’s a pure HTML and CSS solution to creating dynamic, interactive modals and popups:

See the Pen Pure css popup box by Prakash ( @imprakash ) on CodePen .

Ghost buttons can look great if they fit the overall look and feel of your website.

Here’s an easy project to practice creating stunning, dynamic ghost buttons for your next website project:

See the Pen Animated Gradient Ghost Button Concept by Arsen Zbidniakov ( @ARS ) on CodePen .

This image slider with navigation buttons and dots is a fantastic HTML and CSS project to practice your front-end web development skills:

See the Pen CSS image slider w/ next/prev btns & nav dots by Avi Kohn ( @AMKohn ) on CodePen .

Now, before you start building full-scale web pages with HTML and CSS, you want to set up your basic HTML and CSS website layout first.

The idea is to divide your page into logical HTML sections. That way, you can start filling those sections with the right elements and content faster.

For example, you can break up the body of your page into multiple parts:

  • Header: <header>
  • Navigation: <nav>
  • Content: <article>
  • Sidebar: <aside>
  • Footer: <footer>

HTML web page structure example

Depending on your project, you can fill the article area with a blog post, photos, or other content you need to present.

This layout project will serve as a starting point for all your future HTML and CSS projects, so don’t skip it.

Having a template like this will speed up your next projects, because you won’t have to start from scratch.

Here are two tutorials that will walk you through the steps of creating a basic website layout using HTML and CSS:

  • https://www.w3schools.com/html/html_layout.asp
  • https://www.w3schools.com/css/css_website_layout.asp

Building a tribute page is fantastic HTML and CSS practice for beginners.

What should your tribute page be about?

Anything you like!

Build a tribute page about something you love spending time with.

Here are a few examples:

  • a person you like
  • your favorite food
  • a travel destination
  • your home town

My first HTML-only tribute page was for beetroots. Yes, beetroots. I mean, why not?

Beetroot Base HTML Page

HTML and CSS concepts you will practice:

  • HTML page structure
  • basic HTML elements: headings, paragraphs, lists
  • embedding images with HTML
  • CSS fundamentals: fonts and colors
  • CSS paddings, margins, and borders

Here’s a helpful tutorial for building a HTML and CSS tribute page .

Whether you want to become a full-time web developer or a freelance web designer, you will use HTML forms in almost every project.

Forms allow you to build:

  • Contact forms
  • Login forms
  • Sign up forms
  • Survey forms

Building a survey page allows you to practice HTML input tags, form layouts, radio buttons, checkboxes, and more.

Pick any topic you like and come up with 10 pieces of information you want to collect from respondents.

Perhaps an employee evaluation form? Or a customer satisfaction form?

  • form elements: input fields, dropdowns, radio buttons, labels
  • styling for forms and buttons

Here’s an example survey form project for inspiration:

See the Pen Good Vibes Form by Laurence ( @laurencenairne ) on CodePen .

Let’s practice those HTML forms a bit more, shall we?

For this project, you will build a sign-up or log-in page with the necessary input fields for a username and a password.

Because we can create a user profile on almost every website, forms are absolutely essential for allowing people to set their usernames and passwords.

Your forms will collect inputs from users and a separate back-end program will know how to store and process that data.

Creating a clean and clear sign-up page can be surprisingly difficult. The more you learn about HTML and CSS, the more content you want to create to showcase your skills. But the thing is: a sign-up page needs to be as clean and easy-to-use as possible.

Thus, the biggest challenge with this project is to keep it simple, clear, and light.

Here’s an example project to get started with:

See the Pen Learn HTML Forms by Building a Registration Form by Noel ( @WaterNic10 ) on CodePen .

For more inspiration, check out these 50+ sign-up forms built with HTML and CSS .

Using a HTML form is the best way to collect information from job applicants.

You can also generate and format a job description at the top of the page.

Then, create a simple job application form below to collect at least 10 pieces of information.

Use these HTML elements, for example:

  • Text fields
  • Email fields
  • Radio buttons

Here’s an example job application page you can build with HTML and CSS:

See the Pen Simple Job Application Form Example by Getform ( @getform ) on CodePen .

One of your first HTML and CSS projects should be a simple landing page.

Your landing page can focus on a local business, an event, or a product launch, for example.

Landing pages play an important role for new businesses, marketing campaigns, and product launches. As a front-end developer, you will be asked to create them for clients.

For this project, create a simple HTML file and style it with CSS. Be sure to include a headline, some text about the company or its services, and a call-to-action (CTA) button.

Make sure that your landing page is clean and clear and that it’s easy to read.

If you build a landing page for a new product, highlight the product’s key benefits and features.

To get started, follow this freeCodeCamp tutorial to build a simple landing page . You will need JavaScript for a few features. If you are not familiar with JavaScript, leave those features out for now and come back to them later.

For more inspiration, check out these HTML landing page templates .

Switch landing page template – HTML and CSS projects for beginners

A product landing page is a page that you build to promote a specific product or service.

For example, if you want to sell your ebook about how to use CSS to build an animated website, then you would create a product landing page for it.

Your product landing page can be very simple to start with. When your skills improve, add some complexity depending on what kind of information you need to present.

One of the most iconic product landing pages is the iPhone product page by Apple, for example:

Apple iPhone product landing page example

Of course, the iPhone landing page is technically complex, so you won’t build it as your first project. But still, it’s a good place to find inspiration and new ideas.

The best way to design your first product landing page is to create a simple wireframe first. Sketch your page layout on paper before you start building it.

Wireframes help you maintain a clear overview of your HTML sections and elements.

To get started, browse through these product landing page examples for some inspiration .

Building an interactive navigation bar will teach you how to create an animated menu with dropdowns using HTML and CSS.

This is another great project for beginners, because it will teach you how to create menus using HTML and CSS. You’ll also learn how to style them with different colors, fonts, and effects.

You’ll also learn how to use anchors and pseudo-classes to create the menu navigation, as well as how to create the dropdown menus from scratch.

If you aren’t familiar with CSS media queries yet, building a responsive navigation bar is a smart way to learn and practice them.

CSS media queries allow you to create a responsive navigation menu that changes its size and layout depending on screen width.

To get started, check out this tutorial on how to build an interactive navigation bar with HTML and CSS .

One of the best ways to practice your HTML and CSS skills is to create custom website headers. This is a great project to add to your portfolio website, as it will show off your skills and help you attract new clients.

There are a number of different ways that you can create a stylish and responsive website header. One option is to use a premade CSS framework such as Bootstrap or Foundation. Alternatively, you can create your own custom styles by hand.

No matter which option you choose, be sure to make your header mobile-friendly by using media queries. This will ensure that your header looks great on all devices, regardless of their screen size or resolution.

To get started, check out this simple example for a responsive HTML and CSS header .

If you’re looking to get into web development, one of the best HTML and CSS projects you can build is a simple restaurant menu.

Align the different foods and drinks using a CSS layout grid.

Add prices, images, and other elements you need to give it a professional, clean look and feel.

Choose a suitable color palette, fonts, and stock photos.

You can also add photos or a gallery for individual dishes. If you want to add an image slider, you can create one with HTML and CSS, too.

Here’s an example of a very simple restaurant menu project:

See the Pen Simple CSS restaurant menu by Viszked Tamas Andras ( @ViszkY ) on CodePen .

Once you’ve built your restaurant menu with, it’s time to tackle a more complex HTML and CSS project.

Building a real-life restaurant website is a fun way to practice a ton of HTML and CSS topics.

Not only will you learn the basics of creating a beautiful, professional web page, but you also get a chance to practice responsive web design, too.

And if you’re looking to land your first front-end web developer job, having a well-designed business website in your portfolio will help you stand out from the crowd.

Restaurant website example project with HTML and CSS

Make sure your website matches the restaurant’s menu and target clientele. A fine-dining place on Manhattan will have a different website than a simple (but delicious!) diner in rural Wisconsin.

Here are a few key details to include on your restaurant website:

  • Clear navigation bar
  • Restaurant details
  • Menu for food and drinks
  • Location and directions
  • Contact details
  • Upcoming events

To get started, check out this free tutorial on how to build a restaurant website with HTML and CSS .

To build a parallax website, you will include fixed background images that stay in place when you scroll down the page.

Although the parallax look isn’t as popular or modern as it was a few years back, web designers still use the effect a lot.

The easiest way to build a parallax HTML and CSS project is to start with a fixed background image for the entire page.

After that, you can experiment with parallax effects for individual sections.

Create 3-5 sections for your page, fill them with content, and set a fixed background image for 1-2 sections of your choice.

Word of warning: Don’t overdo it. Parallax effects can be distracting, so only use them as a subtle accent where suitable.

Here’s an example project with HTML and CSS source code:

See the Pen CSS-Only Parallax Effect by Yago Estévez ( @yagoestevez ) on CodePen .

404 error pages are usually boring and generic, right?

But when a visitor can’t find what they’re searching for, you don’t want them to leave your website.

Instead, you should build a custom 404 error page that’s helpful and valuable, and even fun and entertaining.

A great 404 page can make users smile and – more importantly – help them find what they are looking for. Your visitors will appreciate your effort, trust me.

For some inspiration, check out these custom 404 page examples .

Any web developer will tell you that having a strong portfolio is essential to landing your first job.

Your portfolio is a chance to show off your skills and demonstrate your expertise in front-end web development.

And while there are many ways to create a portfolio website, building one from scratch using HTML and CSS will give you tons of valuable practice.

Your first version can be a single-page portfolio. As your skills improve, continue adding new pages, content, and features. Make this your pet project!

Remember to let your personality shine through, too. It will help you stand out from the crowd of other developers who are vying for the same jobs.

Introduce yourself and share a few details about your experience and future plans.

Employers and clients want to see how you can help them solve problems. Thus, present your services and emphasize the solutions you can deliver with your skills.

Add your CV and share a link to your GitHub account to showcase your most relevant work samples.

Make sure to embed a few key projects directly on your portfolio website, too.

Finally, let your visitors know how to get in touch with you easily. If you want, you can add links to your social media accounts, too.

In this project, you’ll create a simple blog post page using HTML and CSS.

You’ll need to design the layout of the page, add a title, a featured image, and of course add some content to your dummy blog post.

You can also add a sidebar with a few helpful links and widgets, like:

  • An author bio with a photo
  • Links to social media profiles
  • List of most recent blog posts
  • List of blog post categories

Once your HTML structure and content are in place, it’s time to style everything with CSS.

Photography website with a gallery

If you’re a photographer or just enjoy taking pictures, then this project is for you.

Build a simple photo gallery website using HTML and CSS to practice your web design skills.

Start with the basic HTML structure of the page, and figure out a cool layout grid for the photos. You will need to embed the photos and style everything beautiful with CSS.

My tip: Use CSS Flexbox and media queries to create a responsive galleries that look great on all devices.

Here’s a full tutorial for building a gallery website with HTML and CSS:

If you love music, why not practice your HTML and CSS skills by building a music store web page?

Before you start, make a thorough plan about your website structure. What’s the purpose of your music store? What genres will you cover?

Pick a suitable color palette, choose your fonts, and any background images you want to use.

My tip: If you feature album cover images, keep your colors and fonts as clean and simple as possible. You don’t want to overpower the album covers with a busy web page with tons of different colors and mismatching fonts.

Create a user-friendly menu and navigation inside the header. Fill the footer with helpful links for your store, career page, contact details, and newsletter form, for example.

Building a music store website with HTML and CSS is a great opportunity to practice your skills while you are still learning.

Start with very basic features, and add new ones as your skills improve. For example, you can add media queries to make your website responsive.

A forum is a great way to create a community around a topic or interest, and it’s also a great way to practice your coding skills.

In this project, you’ll create a simple forum website using HTML and CSS.

You’ll need to design the layout of the site, add categories and forums, and set up some initial content.

Of course, you should start with creating the basic layout and structure with HTML first. You will need a navigation bar, at least one sidebar, and an area for the main content.

To make your discussion forum website more interesting, add new content and remember to interlink related threads to make the site feel more realistic.

Event or conference web page

Creating a web page for an event is a fun HTML and CSS project for beginners.

You can either pick a real event and build a better landing page than the real one, or come up with an imaginary conference, for example.

Make sure to include these elements:

  • Register button
  • Venue details
  • Dates and schedule
  • Speakers and key people
  • Directions (how to get there)
  • Accommodation details

Divide the landing page into sections, and create a header and a footer with menus and quick links.

Come up with a suitable color palette, pick your fonts, and keep your design clean and clear.

Every programming language, software, device and gadget has a technical documentation for helpful information and support.

Creating a technical documentation website with just HTML and CSS allows you to build a multi-page site with hierarchies, links, and breadcrumbs.

The main idea is to create a multi-page website where you have a sidebar menu on the left, and the content on the right.

The left-hand side contains a vertical menu with all the topics your documentation covers.

The right-hand side presents the description and all the details for each individual topic.

For simplicity, start with the homepage and 2–3 subpages first. Come up with a clean layout and make sure your links are working properly.

Then, start expanding the website with additional sub-pages, content, and elements.

  • HTML hyperlinks and buttons

Creating an online recipe book as an HTML and CSS project requires a similar setup than the previous project example.

You will need to create a homepage that serves as a directory for all your recipes. Then, create a separate subpage for each recipe.

If you want to challenge yourself, add recipe categories and create separate directory pages for each of them.

  • embedding recipe photos

One of the best ways to practice HTML and CSS is to clone an existing web page from scratch.

Use your browser’s inspecting tools to get an idea of how the page is built.

As with any HTML and CSS project, start by creating the basic page template with:

Then, divide your page into sections, rows, and columns.

Finally, fill your page with individual elements like headings, paragraphs, and images.

Once the HTML content is in place, use CSS to style your page.

Start with something simple, like the PayPal login page.

Then move on to more demanding cloning projects, such as a news website. Try the BBC homepage, for example.

Where to learn HTML and CSS?

There are no prerequisites required for you to learn HTML and CSS.

Both languages are easy to learn for beginners, and you can start building real-life projects almost right away.

Here are a few courses to check out if you want to learn HTML and CSS online at your own pace:

1: Build Responsive Real World Websites with HTML5 and CSS3

Build Responsive Real-World Websites with HTML and CSS – Udemy

Build Responsive Real World Websites with HTML5 and CSS3 was my first online web development course focused 100% on HTML and CSS.

You don’t need any coding or web development experience for this course. But if you have watched some online tutorials but you’re not sure how to create a full-scale website by yourself, you are going to love it.

2: The Complete Web Developer Course 2.0

The Complete Web Developer Course 2.0 – Udemy

The Complete Web Developer Course 2.0 changed my life back when I started learning web development.

This course takes you from zero to knowing the basics of all fundamental, popular web development tools. You’ll learn:

  • HTML and CSS
  • JavaScript and jQuery
  • and much more

3: Modern HTML & CSS From The Beginning (Including Sass)

Modern HTML & CSS From The Beginning (Including Sass) – Udemy

I’m a big fan of Brad Traversy, and I really can’t recommend his Modern HTML & CSS From The Beginning course enough.

Even if you have never built a website with HTML and CSS before, this course will teach you all the basics you need to know.

4: The Complete 2023 Web Development Bootcamp

The Complete 2023 Web Development Bootcamp – Udemy

One of my most recent favorites, The Complete 2023 Web Development Bootcamp by Dr. Angela Yu is one of the best web development courses for beginners I’ve come across.

If you’re not quite sure what area or language to specialize in, this course is the perfect place to try a handful of tools and programming languages on a budget.

5: Learn HTML (Codecademy)

Learn HTML – Codecademy

Learn HTML is a free beginner-level course that walks you through the fundamentals with interactive online lessons.

Codecademy also offers a plethora of other web development courses. Check out their full course catalog here .

6: Responsive Web Design (freeCodeCamp)

Responsive Web Design Curriculum – freeCodeCamp

The Responsive Web Design certification on FreeCodeCamp is great for learning all the basics of web development from scratch for free.

You start with HTML and CSS to get the hang of front-end web dev fundamentals. Then, you start learning new tools and technologies to add to your toolkit, one by one.

Also, check out these roundups with helpful web development courses:

  • 27 Best Web Development Courses (Free and Paid)
  • 20+ Web Development Books for Beginners
  • 120+ Free Places to Learn to Code (With No Experience)
  • 100+ Web Development Tools and Resources

Final thoughts: HTML and CSS project ideas for beginners

There you go!

When it comes to learning HTML and CSS, practice really makes perfect. I hope you found a few inspirational ideas here to start building your next project right away.

Learning HTML and CSS may seem intimidating at first, but when you break it down into small, less-intimidating projects, it’s really not as hard as you might think.

HTML and CSS are easy to learn. You can use them to create really cool, fun projects – even if you are new to coding.

Try these beginner-level HTML and CSS project ideas to improve your front-end web development skills starting now. Do your best to build them without following tutorials.

Remember to add your projects to your portfolio website, too.

It’s possible to learn how to code on your own, and it’s possible to land your first developer job without any formal education or traditional CS degree.

It all boils down to knowing how to apply your skills by building an awesome portfolio of projects like the ones above.

So, which project will you build first? Let me know in the comments below!

Once you feel comfortable with HTML and CSS, it’s time to start learning and practising JavaScript .

To get started, check out my guide with 20+ fun JavaScript projects ideas for beginners . I’ll see you there!

Happy coding! – Mikke

Share this post with others:

About mikke.

assignments for html and css

Hi, I’m Mikke! I’m a blogger, freelance web developer, and online business nerd. Join me here on MikkeGoes.com to learn how to code for free , build a professional portfolio website , launch a tech side hustle , and make money coding . When I’m not blogging, you will find me sipping strong coffee and biking around town in Berlin. Learn how I taught myself tech skills and became a web dev entrepreneur here . And come say hi on Twitter !

Leave a reply:

Download 15 tips for learning how to code:.

GET THE TIPS NOW

Sign up now to get my free guide to teach yourself how to code from scratch. If you are interested in learning tech skills, these tips are perfect for getting started faster.

Learn to code for free - 15 coding tips for beginners – Free ebook

The Online Coding & Design School With A

  • Entry Level Tech Jobs
  • Front End Developer
  • Full Stack Developer
  • UI/UX Designer
  • Learn to Code
  • Get Hired in Tech

The Best HTML and CSS Projects for Beginners

Add them to your portfolio, practice your skills, and start earning money with HTML & CSS.

The best HTML & CSS projects for beginners

If you’re a beginner to code and just started learning HTML and CSS, you may be wondering what practice projects you can do to build your portfolio and hone your abilities. You might even ask whether or not you can actually do anything with just these two languages! The good news is that there are many types of projects out there that beginners can use to practice coding, build skills, study, and even start earning money .

The first website I built — the final project of a video lesson series on an online coding platform — was made purely with HTML and CSS. Even though it was a basic static web page for a fake bakery that would never be seen or hosted anywhere, I was thrilled.

I had created something that wasn’t there before, using code. As an English major, using language in this tangible way was new to me, and these languages made it possible. The experience motivated me to continue going — I’m still studying today, even after years of working as a software engineer .

In this article we’ll go over how you can also use HTML and CSS to build projects and explore the tech industry, even if you’re just starting your journey into the tech space.

Table of Contents

  • What can I build with HTML & CSS?
  • 7 Best HTML & CSS Projects for Beginners

Where else can I practice?

  • Can I make money with just HTML & CSS?
  • What should I learn next?

woman in glasses with hand on face, thinking

Is Tech Right For You? Take Our 3-Minute Quiz!

You Will Learn: If a career in tech is right for you What tech careers fit your strengths What skills you need to reach your goals

Take The Quiz!

What can I build with HTML and CSS?

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the foundation of websites in that they provide structure and styling to a web page. With HTML, you can add non-interactive elements such as text and images, and include interactive elements such as links, buttons, and videos.

CSS enables you to style a web page and make websites responsive. This is possible with media queries, which were introduced in CSS3.

(HTML is on its fifth iteration, so you’ll see it referred to as HTML5, while CSS is on its third.)

Since the addition of media queries, it’s possible to check the width and height of the current device, as well as the orientation (landscape or portrait). That means you can make a site mobile responsive using just these two languages.

It’s also possible to create animations using CSS by gradually changing an element’s properties. And you can even create flashy scrolling effects (known as “ parallax “).

While working on HTML and CSS practice projects can help you build beautiful websites, for more complex sites, you would most likely want to use JavaScript. With JavaScript, you can fetch data from a database, handle different states of an application, and easily add interactive elements like a slider.

However, there’s still a LOT you can do. Let’s take a look at some great project ideas to try out.

(Back to top.)

7 Best HTML CSS Projects for Beginners

If you want to learn HTML and CSS skills and start making money, here are some great practice projects to help you get started.

1. Build a Portfolio or Simple Personal Website

A simple website is useful for showcasing your projects to potential employers and as practice writing markup and creating stylesheets. A website builder like WordPress or Squarespace could help you get started — you can even add custom CSS to personalize it and challenge your abilities. You can keep the design simple if you want to focus on diving into the markup and styling.

2. Make your resume interactive

This is for your own brand as well — building an interactive resume from scratch is one way to show you know your foundational knowledge while also making your resume fun. This article on dev.to by Alvaro Montoro walks you through how to do this from start to finish.

3. Create an Email Newsletter

There are job opportunities focused on email building that require knowledge of HTML and CSS. You can use an email newsletter service like MailChimp and customize the designs.

Here are some ideas on what emails to create for practice:

  • Build an email newsletter to share your journey into tech with lessons you’ve learned and projects you’ve built with friends and family
  • Launch an email newsletter of upcoming events in the area or your favorite local spots

Here are some roles and freelance email-related jobs to look for:

  • Email designer
  • Email developer
  • HTML developer

4. Make a static responsive website

People visit websites from various devices, which means they’re viewing the content on different screen sizes. A responsive website has content formatted according to screen size using CSS media queries and HTML. It is important to know how to do this, so take that personal website or homepage, portfolio, or mock site and make it work across all different viewport sizes.

Here are some ideas of what websites to make for practice:

  • A web page for a make-believe restaurant
  • A biographical page about your favorite author
  • A simple marketing landing page for a friend or family member’s business or to display his or her personal work

Here are some ideas of what freelance opportunities to look for to create a static responsive website:

  • Find a project where you customize a WordPress or Squarespace site
  • Offer your services to a restaurant looking to have an online presence with a static website and menu pages

This is also an opportunity to learn Flexbox to build a grid system that easily collapses based on the screen size.

5. Build a form

Knowing how to put interactive controls together to build a form is extremely useful in web development. You use buttons, inputs, forms, and HTML elements to allow for user input. This is also a chance to show your UX and UI skills by making the form accessible, making decisions about placeholder helper text, and creating labels for form fields.

6. Create an animation

An animation? With just HTML and CSS? Yep, it’s possible! You can put your CSS knowledge to the test by creating shapes and animations to break down data or to make your website feel more interactive. For example, you can use an animation when a user hovers over an element.

Here are some ideas for animations to create:

  • Hover interactions for your personal site to let the user know where they are
  • An animation to greet your users

7. Contribute to an open source project

Even with just these two languages, you can contribute to an open source project, which is a great way to get real world experience while honing your skills. For ideas on how to get started, learn more here: How to Contribute to Your First Open Source Project

You can find projects to contribute to on hosting sites like GitHub.

  • Skillcrush (that’s us!) offers a free coding camp ⛺️ that introduces HTML and CSS. You can get started immediately, and write your first HTML within minutes.
  • freeCodeCamp is great because they provide project-oriented work that is essential for building a portfolio or personal site.
  • Udemy has this free course on their online platform.
  • The Odin Project provides a primarily self-directed free course. The activities are sourced from YouTube videos, freeCodeCamp tutorials, and other blogs.

There are plenty of places to learn to code online for free . Once you’ve gotten your feet wet, check out Skillcrush’s comprehensive and personalized Break Into Tech program. It’s a zero-to-job curriculum for total beginners in tech looking to start a new career, with fast tracks in front end development and design.

Can I make money with just HTML and CSS?

Let’s look at the next question that might be on your mind — is it possible to actually start making money with only these two fundamental skills? Is this knowledge really valuable in a tech scene where everyone seems to know how to use them?

Yes! You may not find an extensive list of job titles, but it is possible to find work that matches your skill level. In fact, these skills, along with your other skills like design or marketing, can be the entryway to your career in technology, especially with a few practice projects already under your belt, and you can learn more languages as you go.

Find Work Building Emails

One way to earn money is to work on emails. Not writing emails — formatting them, designing them, and coding up your work.

Individuals and organizations use email newsletters and campaigns to communicate with their readers and/or users. These emails can be formatted to be in line with a larger brand. They also usually need to be responsive, meaning the content works and is nicely formatted on all devices, including: mobile phones, desktops, and tablets of all sizes.

With your knowledge, you may be qualified to apply for HTML Email Developer or Email Marketing Specialist jobs. A good eye for web design is also helpful for these roles.

Look for Website Maintenance Jobs

Teams also need people who know HTML and CSS to keep websites updated and operating smoothly. If you know these two languages, there are opportunities to create content for the web, aid in web project management, and provide support for a website’s smooth operation.

Here is a list of website-related job titles where knowledge of these two languages (and experience with the practice projects above) comes in handy:

  • Website Content & Support Specialist
  • Website Project Manager
  • WordPress developer
  • Website editor

Apply for Entry-Level Front End Developer Jobs

Knowing these two languages gives you opportunities to get your foot in the door to learn more about the tech space and grow your skill set on the job, including access to entry level front end jobs or junior web developer jobs.

In these positions, you would learn a lot more. You would be expected to learn programming languages (such as JavaScript, for example) and be able to make a larger contribution to the website and app creation and operation process.

What skills should I learn next?

Learning is an integral part of working in tech, whether it’s expanding or diving deeper into your current abilities. With that in mind, there are a lot of different paths you can take after getting used to working with HTML and CSS (and making some projects!).

One of the more uniquely named frameworks out there — Sass — may be a good way to level-up your CSS. Sass is an extension language that allows you to write properties and use CSS rules while also allowing for variables and reusable blocks. This is a great way to work off of your current knowledge and learn some basic programming concepts, such as using variables.

If you really enjoyed picking the colors, fonts, and visual layout for web pages while writing markup and creating stylesheets, you may want to dive deeper into User Interface (UI) design.

As a UI designer, you determine the format and style of a website, app, or product as well as have an impact on how that project works for the end user. Learning how to lay out a web page in programs like Adobe Photoshop and making icons in Illustrator is a good starting point in your design journey.

User Experience, or UX design may also be of interest to you. User Experience is the segment of design that focuses on how a user actually uses a product and how he or she feels about it. There are several different types of roles in the UX space.

While learning HTML and CSS, If you discover that you enjoy looking through lines of code and writing code then learning a programming language like JavaScript or Python may be your next step. JavaScript is dynamic and expansive in its utility, and adding it to your tech chops makes you a stronger candidate for more development roles. Python is a great language to learn if you’re interested in building web apps or curious about data science and machine learning.

There’s definitely many different paths to acquiring tech abilities. Having HTML and CSS in your tech toolbelt (as well as HTML and CSS practice projects in your portfolio), you’re well on your way to a career in tech.

Author Image

Neely Kartha

Category: Blog , Coding Languages and Tools , Entry Level Tech Jobs , Front End Developer , Full Stack Developer , HTML and CSS , Learn to Code

Related Articles

What is advanced CSS

If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

To log in and use all the features of Khan Academy, please enable JavaScript in your browser.

Unit 2: Intro to HTML/CSS: Making webpages

About this unit, intro to html.

  • Welcome to the web! (Opens a modal)
  • HTML basics (Opens a modal)
  • Quick tip: HTML tags (Opens a modal)
  • Challenge: Write a Poem (Opens a modal)
  • HTML: Text emphasis (Opens a modal)
  • Challenge: You can learn text tags (Opens a modal)
  • HTML: Lists (Opens a modal)
  • Challenge: Wishlist (Opens a modal)
  • HTML: Images (Opens a modal)
  • Challenge: A picture-perfect trip (Opens a modal)

Intro to CSS

  • CSS Basics (Opens a modal)
  • Quick tip: Selecting by tag name (Opens a modal)
  • Challenge: Colorful creature (Opens a modal)
  • CSS: Selecting by id (Opens a modal)
  • Challenge: Seasonal ids (Opens a modal)
  • CSS: Selecting by class (Opens a modal)
  • Challenge: Apples and bananas classes (Opens a modal)
  • Project: Travel webpage (Opens a modal)
  • Using simple CSS selectors 4 questions Practice

More HTML tags

  • HTML links (Opens a modal)
  • Challenge: Links for learning (Opens a modal)
  • HTML internal links (Opens a modal)
  • Challenge: Jump around (Opens a modal)
  • HTML tables (Opens a modal)
  • Challenge: The dinner table (Opens a modal)
  • HTML comments (Opens a modal)
  • Project: Recipe book (Opens a modal)

CSS text properties

  • CSS Zen Garden (Opens a modal)
  • CSS font-family property (Opens a modal)
  • Challenge: Fancy font families (Opens a modal)
  • CSS font-size property (Opens a modal)
  • Challenge: Great big font sizes (Opens a modal)
  • CSS font styles and shorthand (Opens a modal)
  • Challenge: Famous font formats (Opens a modal)
  • More CSS text properties (Opens a modal)
  • CSS inheritance (Opens a modal)
  • Project: Blog (Opens a modal)
  • Using CSS text properties 4 questions Practice

Web development tools

  • Using the browser developer tools (Opens a modal)
  • Developing webpages outside of Khan Academy (Opens a modal)
  • Hosting your website on a server (Opens a modal)
  • Hosting your website on Github (Opens a modal)
  • CSS grouping elements (Opens a modal)
  • Challenge: Group the groupers (Opens a modal)
  • CSS width, height, and overflow (Opens a modal)
  • Challenge: The overflowing ocean (Opens a modal)
  • CSS box model (Opens a modal)
  • Challenge: The boxer model (Opens a modal)
  • CSS position (Opens a modal)
  • Challenge: Position planet (Opens a modal)
  • CSS in the wild: Google Maps (Opens a modal)
  • CSS floating elements (Opens a modal)
  • Challenge: Floating clouds (Opens a modal)
  • Planning your webpage (Opens a modal)
  • Project: Event invite (Opens a modal)
  • Using CSS layout properties 5 questions Practice

More CSS selectors

  • Using multiple CSS classes (Opens a modal)
  • Challenge: A classy gallery (Opens a modal)
  • Combining CSS class and element selectors (Opens a modal)
  • Challenge: Classes of elements (Opens a modal)
  • CSS descendant selectors (Opens a modal)
  • Challenge: Descendants of Khan (Opens a modal)
  • Grouping CSS selectors (Opens a modal)
  • CSS dynamic pseudo-classes (Opens a modal)
  • Challenge: Grouped animals (Opens a modal)
  • CSS specificity (Opens a modal)
  • CSS specificity rules 4 questions Practice

Other ways to embed CSS

  • Using inline CSS styles (Opens a modal)
  • Using external stylesheets (Opens a modal)

Further learning

  • Webpage design (Opens a modal)
  • HTML validation (Opens a modal)
  • What to learn next (Opens a modal)
  • Validating HTML 4 questions Practice

Introduction to HTML and CSS

Foundations course, introduction.

So here it is: it’s time to actually start making things . This section will teach you the basics of HTML and CSS, the two foundational building blocks of pretty much everything on the web.

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

  • Get a basic overview of HTML, CSS and how they work together.

HTML and CSS

HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great!

Many great resources out there keep referring to HTML and CSS as programming languages , but if you want to get technical, labeling them as such is not quite accurate, because they are only concerned with presenting information. They are not used to program any logic. JavaScript, which you will be learning in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. The following lessons focus on giving you the tools you need to be successful once you get to the JavaScript content as you continue through our curriculum!

  • Read HTML vs CSS vs JavaScript . It’s a quick overview of the relationship between HTML, CSS, and JavaScript.

Knowledge check

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

  • What do HTML and CSS stand for?
  • Between HTML and CSS, which would you use for putting paragraphs of text on a webpage?
  • Between HTML and CSS, which would you use for changing the font and background color of a button?
  • What is the difference between HTML, CSS and JavaScript?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

This FreeCodeCamp article goes into a little more depth than the assigned one. It covers things we’ll be teaching explicitly in later lessons though, so don’t worry about memorizing any of the details.

Bookmark DevDocs.io . Read the “Welcome” message. Massive API documentation collection that even works offline. An essential collection of reference material for everything covered and more. (Maintained by FreeCodeCamp )

Support us!

The odin project is funded by the community. join us in empowering learners around the globe by supporting the odin project.

CSS tutorial starting with HTML + CSS

Step 1: writing the html, step 2: adding some colors, step 3: adding fonts, step 4: adding a navigation bar, step 5: styling the links, step 6: adding a horizontal line, step 7: putting the style sheet in a separate file, further reading.

assignments for html and css

  • Online Degree Explore Bachelor’s & Master’s degrees
  • MasterTrack™ Earn credit towards a Master’s degree
  • University Certificates Advance your career with graduate-level learning
  • Top Courses
  • Join for Free

Johns Hopkins University

HTML, CSS, and Javascript for Web Developers

Taught in English

Some content may not be translated

Financial aid available

1,083,526 already enrolled

Gain insight into a topic and learn the fundamentals

Yaakov Chaikin

Instructor: Yaakov Chaikin

Coursera Plus

Included with Coursera Plus

(16,046 reviews)

Skills you'll gain

  • Css Frameworks
  • Cascading Style Sheets (CSS)

Details to know

assignments for html and css

Add to your LinkedIn profile

See how employees at top companies are mastering in-demand skills

Placeholder

Earn a career certificate

Add this credential to your LinkedIn profile, resume, or CV

Share it on social media and in your performance review

Placeholder

There are 5 modules in this course

Do you realize that the only functionality of a web application that the user directly interacts with is through the web page? Implement it poorly and, to the user, the server-side becomes irrelevant! Today’s user expects a lot out of the web page: it has to load fast, expose the desired service, and be comfortable to view on all devices: from a desktop computers to tablets and mobile phones.

In this course, we will learn the basic tools that every web page coder needs to know. We will start from the ground up by learning how to implement modern web pages with HTML and CSS. We will then advance to learning how to code our pages such that its components rearrange and resize themselves automatically based on the size of the user’s screen. You’ll be able to code up a web page that will be just as useful on a mobile phone as on a desktop computer. No “pinch and zoom” required! Last but certainly not least, we will get a thorough introduction to the most ubiquitous, popular, and incredibly powerful language of the web: Javascript. Using Javascript, you will be able to build a fully functional web application that utilizes Ajax to expose server-side functionality and data to the end user.

Introduction to HTML5

In this module we will learn the basics of HTML5. We'll start with instructional videos on how to set up your development environment, go over HTML5 basics like valid document structure, which elements can be included inside other elements and which can not, discuss the meaning and usefulness of HTML5 semantic tags, and go over essential HTML5 tags.

What's included

18 videos 7 readings 12 quizzes

18 videos • Total 120 minutes

  • Course Introduction • 3 minutes • Preview module
  • Welcome to Module 1: Introduction to HTML5 • 1 minute
  • Development Environment Setup, Part 1 • 3 minutes
  • Development Environment Setup, Part 2: MacOS • 8 minutes
  • Development Environment Setup, Part 2: Windows • 6 minutes
  • Development Environment Setup, Part 3: Github and Browser Sync • 17 minutes
  • Resources for Asking Questions • 5 minutes
  • Lecture 1: What is HTML? • 7 minutes
  • Lecture 2: Relevant History of HTML • 10 minutes
  • Lecture 3: Anatomy of an HTML Tag • 5 minutes
  • Lecture 4: Basic HTML Document Structure • 6 minutes
  • Lecture 5: HTML Content Models • 6 minutes
  • Lecture 6: Heading Elements (and some new HTML5 semantic comments) • 7 minutes
  • Lecture 7: Lists • 5 minutes
  • Lecture 8: HTML Character Entity References • 7 minutes
  • Lecture 9: Creating Links • 9 minutes
  • Lecture 10: Displaying Images • 6 minutes
  • Module 1 Wrap-Up • 0 minutes

7 readings • Total 38 minutes

  • How Grading and Being Late on Assignments Works • 10 minutes
  • Recommended Books • 10 minutes
  • CHECK OUT MY SITE! • 10 minutes
  • ALL of the EXAMPLE SOURCE CODE for this Course • 3 minutes
  • Frequently Asked Questions (FAQ) • 1 minute
  • Frequently Asked Questions • 2 minutes
  • CONNECT WITH ME! • 2 minutes

12 quizzes • Total 360 minutes

  • Optional Practice Quiz • 30 minutes
  • Module 1 Quiz • 30 minutes

Introduction to CSS3

A lot of people "tinker" with CSS. In this module, we'll take you from the very basics of CSS3 to some fairly advanced concepts like floating and CSS rule conflict resolution. We'll go over the 'box model', background property, etc. We'll finish off the module with learning about Responsive Design using our own CSS code as well as start introducing Twitter Bootstrap with its essential Grid System.

27 videos 4 readings 14 quizzes 1 peer review

27 videos • Total 188 minutes

  • Welcome to Module 2: Introduction to CSS3 • 0 minutes • Preview module
  • Lecture 11: Power of CSS • 5 minutes
  • Lecture 12: Anatomy of a CSS Rule • 4 minutes
  • Lecture 13: Element, Class, and ID Selectors • 9 minutes
  • Lecture 14: Combining Selectors • 9 minutes
  • Lecture 15: Pseudo-Class Selectors • 9 minutes
  • Lecture 16: Style Placement • 5 minutes
  • Lecture 17, Part 1: Conflict Resolution • 8 minutes
  • Lecture 17, Part 2: Conflict Resolution • 6 minutes
  • Lecture 18, Part 1: Styling Text • 6 minutes
  • Lecture 18, Part 2: Styling Text • 5 minutes
  • Lecture 19, Part 1: The Box Model • 10 minutes
  • Lecture 19, Part 2: The Box Model • 7 minutes
  • Lecture 19, Part 3: The Box Model • 5 minutes
  • Lecture 20: The background Property • 6 minutes
  • Lecture 21: Positioning Elements by Floating • 10 minutes
  • Lecture 22, Part 1: Relative and Absolute Element Positioning • 7 minutes
  • Lecture 22, Part 2: Relative and Absolute Element Positioning • 3 minutes
  • Lecture 23, Part 1: Media Queries • 4 minutes
  • Lecture 23, Part 2: Media Queries • 9 minutes
  • Lecture 24, Part 1: Responsive Design • 7 minutes
  • Lecture 24, Part 2: Responsive Design • 11 minutes
  • Lecture 25, Part 1: Introduction to Twitter Bootstrap • 5 minutes
  • Lecture 25, Part 2: Introduction to Twitter Bootstrap • 7 minutes
  • Lecture 26, Part 1: The Bootstrap Grid System • 9 minutes
  • Lecture 26, Part 2: The Bootstrap Grid System • 9 minutes
  • Module 2 Wrap-Up • 0 minutes

4 readings • Total 11 minutes

  • Recommended Books • 5 minutes
  • New Tutorials - here is how... • 2 minutes

14 quizzes • Total 420 minutes

1 peer review • total 60 minutes.

  • Module 2 Coding Assignment • 60 minutes

Coding the Static Restaurant Site

Ready for some REAL fun? This module is it! We'll go over some basics of interacting with a client when managing a web site project and then go visit a real client at their place of business (a Chinese restaurant), help the owner figure out what she wants in a site, and get acquainted with the restaurant in general. We'll spend the rest of the module building a real web site for this business from scratch and you'll get to sit next to me and watch as the site comes together.

24 videos 3 readings 5 quizzes 1 peer review

24 videos • Total 201 minutes

  • Welcome to Module 3: Coding the Static Restaurant Site • 0 minutes • Preview module
  • Lecture 27, Part 1: Visit with the Client • 10 minutes
  • Lecture 27, Part 2: Visit with the Client (Field Trip) • 9 minutes
  • Lecture 28: Design Overview • 9 minutes
  • Lecture 29: Some Ground Rules and Overview of Setup • 10 minutes
  • Lecture 30, Part 1: Coding Basics of Navbar Header • 9 minutes
  • Lecture 30, Part 2: Coding Basics of Navbar Header • 7 minutes
  • Lecture 31: Coding Button for Future Collapsible Menu • 6 minutes
  • Lecture 32, Part 1: Coding Nav Menu Buttons • 11 minutes
  • Lecture 32, Part 2: Coding Nav Menu Buttons • 3 minutes
  • Lecture 33, Part 1: Fixing Navbar Layout, Text, and Dropdown Menus • 7 minutes
  • Lecture 33, Part 2: Fixing Navbar Layout, Text, and Dropdown Menus • 4 minutes
  • Lecture 34: Coding the Jumbotron • 11 minutes
  • Lecture 35, Part 1: Coding Navigation Tiles • 11 minutes
  • Lecture 35, Part 2: Coding Navigation Tiles • 13 minutes
  • Lecture 36, Part 1: Coding the Footer • 10 minutes
  • Lecture 36, Part 2: Coding the Footer • 3 minutes
  • Lecture 37, Part 1: Coding the Menu Categories • 14 minutes
  • Lecture 37, Part 2: Coding the Menu Categories • 6 minutes
  • Lecture 38, Part 1: Coding the Single Menu Category Page • 11 minutes
  • Lecture 38, Part 2: Coding the Single Menu Category Page • 13 minutes
  • Lecture 38, Part 3: Coding the Single Menu Category Page • 7 minutes
  • Lecture 39: Testing the Mobile Version on a Real Phone • 4 minutes
  • Module 3 Wrap-Up • 0 minutes

3 readings • Total 9 minutes

5 quizzes • total 150 minutes.

  • Module 3 Coding Assignment • 60 minutes

Introduction to Javascript

What fun would a web site be if there was no functionality to it? In this module, we are going to concentrate on learning the fundamentals of the Javascript language. A lot of even seasoned developers “tinker” with Javascript without really understanding how the language works. That leads to viewing the language as more of a nuisance instead of a powerful tool. That is why we are going to concentrate not only on the “how” but also on the “why”, so you are empowered by the Javascript language features, not confused by them. We’ll cover just about everything - from common language constructs and Javascript types to objects, functions, arrays, closures, and scope isolation.

24 videos 3 readings 9 quizzes 1 peer review

24 videos • Total 150 minutes

  • Welcome to Module 4: Introduction to Javascript • 1 minute • Preview module
  • Lecture 40, Part 1: Adjusting Development Environment for Javascript Development • 5 minutes
  • Lecture 40, Part 2: Where to Place Javascript Code • 5 minutes
  • Lecture 41, Part 1: Defining Variables, Function, and Scope • 8 minutes
  • Lecture 41, Part 2: Defining Variables, Function, and Scope • 4 minutes
  • Lecture 42, Part 1: Javascript Types • 5 minutes
  • Lecture 42, Part 2: Javascript Types • 4 minutes
  • Lecture 43, Part 1: Common Language Constructs • 8 minutes
  • Lecture 43, Part 2: Common Language Constructs • 4 minutes
  • Lecture 43, Part 3: Common Language Constructs • 7 minutes
  • Lecture 44: Handling Default Values • 4 minutes
  • Lecture 45, Part 1: Creating Objects Using 'new Object()' Syntax • 7 minutes
  • Lecture 45, Part 2: Creating Objects Using Object Literal Syntax • 5 minutes
  • Lecture 46: Functions Explained • 8 minutes
  • Lecture 47, Part 1: Passing Variables by Value vs. by Reference • 6 minutes
  • Lecture 47, Part 2: Passing Variables by Value vs. by Reference • 7 minutes
  • Lecture 48: Function Constructors, prototype, and the 'this' Keyword • 12 minutes
  • Lecture 49: Object Literals and the 'this' Keyword • 6 minutes
  • Lecture 50, Part 1: Arrays • 8 minutes
  • Lecture 50, Part 2: Arrays • 4 minutes
  • Lecture 51: Closures • 6 minutes
  • Lecture 52, Part 1: Fake Namespaces • 6 minutes
  • Lecture 52, Part 2: Immediately Invoked Function Expressions (IIFEs) • 8 minutes
  • Module 4 Wrap-Up • 0 minutes

9 quizzes • Total 270 minutes

  • Module 4 Coding Assignment • 60 minutes

Using Javascript to Build Web Applications

In this module, we are going to take all those newly learned Javascript language skills and learn how to utilize them within the context of a web page. We’ll start by learning how to properly manipulate the web page components using the Javascript Document Object Model API. We will then move on to learning one of the most popular ways of serving up data to a web site - Ajax. We'll learn about the protocol that the language of the web speaks in (HTTP), how to set up and handle Ajax requests and responses, as well as how to process JSON data. We'll finish the module by connecting our restaurant web site from Module 3 to a real backend service that will allow us to pull the data for the restaurant menu dynamically from the server without having to reload the entire page.

17 videos 6 readings 3 quizzes 1 peer review

17 videos • Total 138 minutes

  • Welcome to Module 5: Using Javascript to Build Web Applications • 0 minutes • Preview module
  • Lecture 53, Part 1: DOM Manipulation • 6 minutes
  • Lecture 53, Part 2: DOM Manipulation • 11 minutes
  • Lecture 54: Handling Events • 9 minutes
  • Lecture 55: The 'event' Argument • 6 minutes
  • Lesson 56: HTTP Basics • 12 minutes
  • Lesson 57, Part 1: Ajax Basics • 5 minutes
  • Lesson 57, Part 2: Ajax Basics • 13 minutes
  • Lesson 57, Part 3: Ajax Basics • 6 minutes
  • Lecture 58: Processing JSON • 9 minutes
  • Lecture 59: Fixing Mobile Nav Menu Automatic Collapse • 6 minutes
  • Lecture 60: Dynamically Loading Home View Content • 9 minutes
  • Lecture 61, Part 1: Dynamically Loading Menu Categories View • 8 minutes
  • Lecture 61, Part 2: Dynamically Loading Menu Categories View • 10 minutes
  • Lecture 62: Dynamically Loading Single Category View • 13 minutes
  • Lecture 63: Changing 'active' Button Style Through Javascript • 6 minutes
  • Course Wrap-Up • 1 minute

6 readings • Total 15 minutes

  • Check out the final deployed site • 2 minutes

3 quizzes • Total 90 minutes

  • Module 5 Coding Assignment • 60 minutes

Instructor ratings

We asked all learners to give feedback on our instructors based on the quality of their teaching style.

assignments for html and css

The mission of The Johns Hopkins University is to educate its students and cultivate their capacity for life-long learning, to foster independent and original research, and to bring the benefits of discovery to the world.

Recommended if you're interested in Mobile and Web Development

assignments for html and css

Coursera Project Network

Build a Portfolio Website with HTML, CSS, and JavaScript

Guided Project

assignments for html and css

Learn HTML and CSS

assignments for html and css

Learn JavaScript

assignments for html and css

Introduction to Front-End Development

Why people choose coursera for their career.

assignments for html and css

Learner reviews

Showing 3 of 16046

16,046 reviews

Reviewed on Jul 4, 2022

I am so happy for you and thankful to the entire corsara team for helping me and many others like me gain online skills today https://www.coursera.org/account/accomplishments/certificate/YXXPJTHFEXE8

Reviewed on Jul 11, 2020

An excellent course for beginners. 5th week was a bit rushed i.e JSON,Ajax and jquery. So i had a really hard time getting grasp of them and took a star out of my review. Otherwise wonderful tutor.

Reviewed on Aug 19, 2023

A very detailed and comprehensive course with lots of skills to acquire and knowledge to gain. I would recommend it to every person since web development is skill with lots of demand in global market.

New to Mobile and Web Development? Start here.

Placeholder

Open new doors with Coursera Plus

Unlimited access to 7,000+ world-class courses, hands-on projects, and job-ready certificate programs - all included in your subscription

Advance your career with an online degree

Earn a degree from world-class universities - 100% online

Join over 3,400 global companies that choose Coursera for Business

Upskill your employees to excel in the digital economy

Frequently asked questions

When will i have access to the lectures and assignments.

Access to lectures and assignments depends on your type of enrollment. If you take a course in audit mode, you will be able to see most course materials for free. To access graded assignments and to earn a Certificate, you will need to purchase the Certificate experience, during or after your audit. If you don't see the audit option:

The course may not offer an audit option. You can try a Free Trial instead, or apply for Financial Aid.

The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.

What will I get if I purchase the Certificate?

When you purchase a Certificate you get access to all course materials, including graded assignments. Upon completing the course, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. If you only want to read and view the course content, you can audit the course for free.

What is the refund policy?

You will be eligible for a full refund until two weeks after your payment date, or (for courses that have just launched) until two weeks after the first session of the course begins, whichever is later. You cannot receive a refund once you’ve earned a Course Certificate, even if you complete the course within the two-week refund period. See our full refund policy Opens in a new tab .

Is financial aid available?

Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.

More questions

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.

Screenshot of Part1 at the beginning

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:

Screenshot of Part1 when finished

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.

Twitter page overview

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 page parts dimensions

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.

Twitter how Navbar Link looks like

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

How the left content will look like

  • 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

How the center content will look like

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 Exercises
  • HTML Interview Questions
  • HTML Attributes
  • HTML Examples
  • HTML Cheat Sheet
  • HTML Color Picker
  • HTML Formatter
  • HTML Projects

Related Articles

  • Solve Coding Problems
  • 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
  • Top React Projects to build in 2024
  • 7 Best React Project Ideas For Beginners in 2022
  • 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.   

Top-10-Projects-For-Beginners-To-Practice-HTML-and-CSS-Skills

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

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...

author

  • Web-Projects
  • Web Technologies
  • ChatGPT vs LLaMA: Detailed Comparison [Latest 2024]
  • The Future of Virtual Presence: AI Avatars Set to Attend Meetings on Your Behalf
  • Mumbaikars Can Now Check City Development Status Through Metaverse
  • 10 Best ChatGPT Prompts for Lawyers 2024
  • Dev Scripter 2024 - Biggest Technical Writing Event By GeeksforGeeks

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

HTML Tutorial

Html graphics, html examples, html references, html styles - css.

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS = Styles and Colors

What is css.

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Advertisement

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color: 

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Use of CSS color, font-family and font-size properties:

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Use of CSS border property: 

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Use of CSS border and padding properties:

The CSS margin property defines a margin (space) outside the border.

Use of CSS border and margin properties:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

This example uses a full URL to link to a style sheet:

Try it Yourself »

This example links to a style sheet located in the html folder on the current web site: 

This example links to a style sheet located in the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths .

Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial .

HTML Exercises

Test yourself with exercises.

Use CSS to set the background color of the document (body) to yellow.

Start the Exercise

HTML Style Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Get Certified

COLOR PICKER

colorpicker

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

assignments for html and css

40 Web Development Projects For Beginners — HTML CSS

Niemvuilaptrinh

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..

Niemvuilaptrinh

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

40 Portfolio Templates Free For Web Design

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..

Best-Practices for API Authorization

Chameera Dulanga

Best-Practices for API Authorization

4 best practices for api authorization.

Top 5 Node.js Features Every Developer Should Know

Danusha Navod

Top 5 Node.js Features Every Developer Should Know

Explore node.js worker threads, cluster, http2, streams api and repl.

33 Blog Card CSS For Web Design

Geek Culture

33 Blog Card CSS For Web Design

Blog card is a component that displays your posts on your blog page. it includes many components such as creation date and time, title…, recommended from medium.

CSS tools for 2023

Mehdi Aoussiad

10 Useful CSS Generator Tools That You Should Use in 2023

Excellent list of css tools to help you boost your productivity as a web developer..

Web Development Trends For 2024

Web Development Trends For 2024

The ever-shifting landscape of digital innovation can feel like a relentless race, a whirlwind of challenges and opportunities. your pains….

assignments for html and css

General Coding Knowledge

assignments for html and css

Coding & Development

assignments for html and css

Stories to Help You Grow as a Software Developer

assignments for html and css

Front End Developer Roadmap - 2024

Are you eager to embark on a journey into the world of front-end development do you aspire to transform your creative ideas into….

10 essential VS Code tips & tricks for greater productivity

Developer Rivex

10 essential VS Code tips & tricks for greater productivity

Openconvo open in visual studio code..

Here’s What I’ve Learned From My First Frontend Project

Eric van Rees

Here’s What I’ve Learned From My First Frontend Project

Here are some of the learning experiences from my first front-end project. i hope these short “takeaways” will help you when learning….

Responsive Design with Tailwind CSS

Theodore John.S

Responsive Design with Tailwind CSS

🌐 unleash tailwind css’s responsive powers. 🚀 craft responsive wonders effortlessly. dive into tailwind css mastery #tailwindcss….

Text to speech

The 8 Best HTML and CSS Projects for Beginners

Looking for some inspiration to practice your newfound HTML & CSS skills? Look no further.

Whether they count as programming languages or not, there’s little doubt that HTML and CSS—along with JavaScript—form the cornerstone of the World Wide Web. Fortunately, they are some of the easiest technologies to learn and showcase.

As an aspiring web developer, how do you practice and demonstrate your skills? First, you need one or more projects to test your abilities and foster the learning process beyond just learning the syntax.

These eight projects are perfect for you to hone your HTML and CSS skills and show off what you’ve learned.

1. Personal Website

Homepage of a personal website

Building a personal website is among the most popular yet challenging projects for HTML and CSS beginners. It is a well-rounded project that tests most skills acquired during your learning process. Moreover, a personal website is an excellent place to display your CV and link your GitHub account .

Many beginners use software like SquareSpace or WordPress to handle the more technical aspects of website building. Using these tools, you can focus on honing your markup and styling skills. Or you can build a website from scratch and challenge all your skills.

A personal website can serve as a portfolio for all your work. The header is perfect for introducing yourself, showing contact information, and linking other works. Similarly, the footer can contain links to social media accounts and further information about you and your services.

2. Tribute Page

A tribute page

A tribute page is a single-page website outlining the qualities of someone you consider an idol or role model. This project only requires fundamental HTML and CSS skills and is one of the simplest tasks you can use to showcase your abilities.

A tribute page's most prominent feature is the subject's picture. As such, proper positioning of this image requires technical skills, design skills, and an eye for detail. You must choose the right background colors to complement the image.

The subject's name is just as important as the image, often highlighted with unique fonts and colors in the header. In addition, a tribute page contains one or two paragraphs about the subject, links, and public contact information.

3. Survey Form

A survey form

A survey form project will test your knowledge and proficiency in interactive controls. It covers the full range of UI/UX, including receiving and submitting user input. Furthermore, you will use HTML elements like radio buttons, text fields, checkboxes, and labels in this project.

Your survey form does not need to ask real-life questions or store responses in a database. Instead, you can use placeholder text to demonstrate your command of proper webpage structure. Furthermore, you can make a responsive form that adjusts its contents based on screen size.

4. Landing Page

A landing page

A landing page is another single-page website specially designed for marketing campaigns. It aims to attract customers to a company or generate leads. As such, a landing page is often the first point of contact with search engine-optimized websites.

You can use analytics to determine how effective your landing page is. Designing the landing page to ensure maximum engagement is of utmost importance. A landing page is one of the more challenging projects for beginners, despite its simplicity.

You’ll need creative skills for this project, making the most of the various HTML elements at your disposal. You’ll need a mastery of CSS to cater for complex layouts on different devices.

Your landing page must be interactive and responsive enough to captivate your audience and generate user activity.

5. Event Page

An event page

At first glance, an event page seems like any static webpage project on this list. However, its defining feature is a register button for visitors interested in attending the event. Another standout feature is links for the venue, itinerary, and speakers.

This project tests your ability to fit a lot of information into a limited space. Consequently, your webpage must clearly state the event's purpose and benefits, if applicable. You can also include relevant images of the venue, speakers, and event theme.

An event page requires you to know how to use HTML and CSS to partition your page into sections. In addition, the header should contain an interactive menu, and the footer should display supplementary information.

6. Restaurant Website

A restaurant website

A restaurant website must use the right combination of colors to make food and drinks look more appealing to customers. You can also make the website interactive to increase customer engagement. For example, hovering over a meal’s image can display a menu card containing the price and availability.

This project provides an opportunity to challenge your layout skills. For instance, you can use image sliders to showcase the restaurant's menu options. Alternatively, you can use CSS grid or flexbox to align the food items. Simple animations on buttons and images can also give your website an exciting look.

A restaurant website may require skills beyond simple HTML and CSS, such as jQuery and @keyframes.

7. Clone of Video-Sharing Site

Clone of youtube website

A website clone is often considered the ultimate test of your HTML and CSS skills, taking more time and effort to complete than any other project. Video-sharing sites like YouTube and Netflix are popular candidates for website cloning due to their complexity and professional look.

The cloning process begins with screenshots of the website’s user interface, particularly the interactive elements. Then, you use all the skills at your disposal to replicate the look and feel of the various parts of the website.

Your clone site should include features like search engines, comment sections, channels, and payment plans. You can also embed an HTML5 video background to mimic the video-playing functionalities of these websites.

This project provides an insight into the thought process of large, professional web development teams. What's more, you can use the Inspect tool on your web browser to peek at the HTML and CSS source code for these sites.

8. Parallax Website

A parallax website

Parallax scrolling is a widespread effect on modern websites where the background elements move at different speeds from foreground elements when scrolling. Despite its visually stunning appearance, a parallax website is one of the easiest projects for beginners.

To get the best parallax effect, divide your webpage into three or four sections, each with a different background image. The key ingredient to making a parallax website is the background-attachment: fixed CSS property on the appropriate images.

Some beginners use online website builders like Wix, WordPress, and Elementor to create parallax websites quickly. However, these tools undermine the challenge and learning process of creating a parallax effect from scratch.

Next Steps in Your Web Development Journey

HTML and CSS are just two of the many technologies you can use to create interactive websites. As a result, choosing a stack to focus on is often overwhelming and confusing for beginners.

Luckily, one programming language stands out as the king of web development. JavaScript may be more challenging to master than HTML and CSS, but the rewards are immense. Learning JavaScript allows you to use frameworks like React, Angular, and Vue.js, saving time and effort when creating a stunning website.

Programming Tricks

  • HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

  • Skip to main content
  • Skip to search
  • Sign up for free

CSS fundamentals

CSS enables you to add style to your web pages including color, text, positioning and layout, and animation. In our first CSS module, we cover all the fundamental language mechanics you need to understand how CSS works.

General resources:

  • Learn HTML and CSS , Scrimba

3.1 Basic CSS syntax

Learning outcomes:

  • The purpose of CSS — style, layout, and provide other visual enhancements to web pages (such as animation).
  • Declarations.
  • Properties (including custom properties).
  • Values (including shorthand values).
  • At-rules and descriptors.
  • Understand also therefore that HTML has nothing to do with styling.
  • Use this to reinforce the idea of separating semantics and structure (semantic HTML) from presentation (CSS), and not using presentational markup.
  • Study CSS resets, first to prove that browser styles exist and show what a page looks like when they are removed, but also as a technique for providing a blank canvas for developers to build styles on top of.
  • Why external stylesheets are usually the best option.
  • What is CSS?
  • Getting started with CSS
  • How CSS is structured
  • How CSS works

3.2 Selectors

  • IDs are unique per document — you should use an ID to select one specific element.
  • You can have multiple classes per element, and these can be used to layer on styles as required.
  • IDs and classes should be used sparingly where they make sense for selections, but you shouldn't use them for everything — keep your HTML as clean and uncluttered as possible.
  • Selector lists.
  • Attribute selectors.
  • Combinators.
  • Pseudo-classes and pseudo-elements.
  • CSS Selectors
  • CSS Selectors – Cheat Sheet for Class, Name, Child Selector List , freeCodeCamp (2022)

3.3 The box model

  • Block and inline elements.
  • width and height .
  • The alternative box model accessed via box-sizing: border-box , and why this is easier to understand (and how it differs from) the standard box model.
  • Margin collapsing.
  • Basic display values, and how they affect box behavior — block , inline , inline-block , and none .
  • The box model
  • Box Model , web.dev (2019)

3.4 Handling conflicts in CSS

  • Understand how rules can conflict in CSS.
  • Inheritance.
  • The cascade.
  • Specificity.
  • Source order.
  • Importance.
  • Cascade, specificity, and inheritance

3.5 Values and units

  • Numbers, lengths, and percentages.
  • Ems and rems.
  • Strings and identifiers.
  • Understand what absolute and relative units are, and the difference between them.
  • CSS values and units
  • Intrinsic size.
  • Setting absolute and percentage sizes.
  • min- / max-width and min- / max-height .
  • Viewport units.
  • Sizing items in CSS
  • Handling different text directions > Logical properties

3.7 Backgrounds and borders

  • Basic background styling — colors and images.
  • Background image size, repeat, position, and attachment.
  • The general concept of what a background gradient is.
  • Linear gradients.
  • (Radial, conic, and repeating gradients are more advanced and in-depth coverage is not required at this stage.)
  • Accessibility considerations of backgrounds — ensure good contrast.
  • Border basics — border-width , border-style , border-color , and border shorthand (e.g. border-top and border ).
  • border-radius for rounded corners.
  • Backgrounds and borders

3.8 Overflow

  • Understand what overflow is.
  • Control overflow with overflow properties.
  • Overflowing content

3.9 Styling form elements

  • Basic styling of easy-to-style form elements, like <input type="text"> .
  • Using CSS resets to overcome <input> font styling inheritance and box styling default differences.
  • System styles are applied to some form elements, making consistent styling difficult across browsers.
  • More complex form elements have internal (shadow DOM) elements that define the structure of their inner workings. These are often impossible to access and style individually.
  • Using appearance: none to work around system styling for <input> types like search , checkbox , and radio .
  • Mitigating issues with difficult-to-style types such as datetime-local , color , etc.
Notes : Conforming to this curriculum module doesn't require having foolproof, conclusive answers to every possible form styling problem. Some form elements are difficult to style, as the resources make clear. However, you should at least be able to handle a wide range of form styling needs and understand the issues around some of the more difficult styling issues.
  • Images, media, and form elements
  • Styling web forms
  • Advanced form styling

3.10 Debugging CSS

  • Use the HTML validator to see if you have any invalid markup on your page — this could be causing your CSS to not apply as desired.
  • Use the CSS validator to check for badly-formed CSS code. A missing semi-colon can cause a whole section of CSS declarations to not apply.
  • Use browser developer tools to inspect the CSS that is applied to HTML elements on a page.
  • Modify the applied CSS to figure out what changes are needed to get what you want. This includes enabling and disabling declarations, modifying values, and adding new declarations.
  • Use layout inspection tools to inspect the box model, grids, flexbox, and other layout features (see also CSS Layout ).
  • Use responsive design mode tools to check responsive layouts (see also 5.5 Responsive design specifics ).
  • Debugging CSS
  • Handling common HTML and CSS problems
  • Firefox > Examine and edit CSS , Firefox Source Docs
  • Firefox > Responsive design mode , Firefox Source Docs
  • Chrome > View and change CSS , developer.chrome.com)

HTML Projects for Beginners: 10 Easy Starter Ideas

Danielle Richardson Ellis

Published: December 11, 2023

Are you eager to level up your HTML skills? Embarking on HTML projects for beginners is an excellent way to start. As someone who once stood where you are now, I can confidently say that the journey from HTML novice to proficiency is both thrilling and immensely rewarding. It's not just about learning a language; it’s about creating and bringing your ideas to life. 

woman learning html projects for beginners

In my early days of exploring web development, HTML was the cornerstone that laid the foundation for my career. Now, with several years of experience in web development and a passion for being a resource for beginners, I understand the importance of starting with practical, easy-to-follow projects.

In this blog, I'm excited to share with you a curated list of HTML projects that are perfect for beginners. These projects are designed not only to increase your understanding of HTML but also to spark your creativity and enthusiasm for web development.

Download Now: 25 HTML & CSS Hacks [Free Guide]

Table of Contents

  • Understanding the Basics
  • Project 1: Personal Portfolio Page
  • Project 2: Simple Blog Layout
  • Project 3: Landing Page
  • Project 4: eCommerce Page
  • Project 5: Recipe Page
  • Project 6: Technical Documentation 
  • Project 7: Small Business Homepage 
  • Project 8: Simple Survey Form
  • Project 9: Event Invitation Page
  • Project 10: Parallax Website

The Road Ahead in Web Development

Understanding the basics: what is html.

Before I dive into the exciting world of HTML projects, I want to share why grasping the basics of HTML is crucial. HTML , which stands for HyperText Markup Language, is the foundational building block of the web. It’s not a programming language, but a markup language that I use to define the structure and layout of a web page through various elements and tags.

To me, HTML is like creating a framework for web content, similar to how an architect designs a building's blueprint. You would use tags to mark up text, insert images, create links, and lay out web pages in a format that browsers can understand and display. These tags , the basic units of HTML, help differentiate between headings, paragraphs, lists, and other content types, giving the web its versatile and user-friendly nature.

html projects for beginners: wireframe example

Every web developer starts somewhere, and for many, including myself, that starting point is HTML. It's a language that empowers me to create, experiment, and develop various digital experiences . So, as we embark on these beginner projects, remember that you're not just learning a new skill. You are stepping into a world full of endless possibilities and opportunities.

10 HTML Projects for Beginners: Your Journey Starts Here

As a web developer passionate about teaching, I‘m thrilled to guide you through this series. This section is crafted to progressively enhance your skills, offering a blend of creativity and learning. I’ve seen firsthand how these projects can transform beginners into confident creators, and I‘m excited to see the unique and innovative web experiences you’ll bring to life. Let's embark on this adventure together, turning code into compelling digital stories!

Project 1: Creating a Personal Portfolio Page

One of the best ways to start your HTML journey is by creating a personal portfolio page. This project allows you to introduce yourself to the world of web development while learning the basics of HTML. It’s not just about coding; it’s about telling your story through the web.

The objective here is to craft a web page that effectively portrays your personal and professional persona. This includes detailing your biography, showcasing your skills, and possibly even including a portfolio of work or projects you've completed. This page will be a cornerstone in establishing your online presence and can evolve as you progress in your career.

See the Pen HTML Project 1 by HubSpot ( @hubspot ) on CodePen .

  • Showcase and Evolve : I'm selecting projects that best represent my abilities, and I plan to continually update my portfolio as I develop new skills.
  • Simplicity and Clarity : My focus is on creating a clear, user-friendly layout that makes navigating my story and achievements effortless for visitors.

Project 2: Building a Simple Blog Layout

After creating a personal portfolio, the next step in your HTML journey is to build a simple blog layout. This project will introduce you to more complex structures and how to organize content effectively on a webpage.

The goal of this project is to create a basic blog layout that includes a header, a main content area for blog posts, and a footer. This layout serves as the foundation for any blog, providing a clear structure for presenting articles or posts.

See the Pen HTML Project 2 by HubSpot ( @hubspot ) on CodePen .

  • Consistency is Key : In designing the blog, I'm focusing on maintaining a consistent style throughout the page to ensure a cohesive look.
  • Content First : My layout will prioritize readability and easy navigation, making the content the star of the show.

Project 3: Designing a Landing Page

For the third project, let's shift gears and focus on creating a landing page. A landing page is a pivotal element in web design, often serving as the first point of contact between a business or individual and their audience. This project will help you learn how to design an effective and visually appealing landing page.

The objective is to create a single-page layout that introduces a product, service, or individual, with a focus on encouraging visitor engagement, such as signing up for a newsletter, downloading a guide, or learning more about a service.

See the Pen HTML Project 3 by HubSpot ( @hubspot ) on CodePen .

  • Clear Call to Action : I'm ensuring that my landing page has a clear and compelling call to action (CTA) that stands out and guides visitors towards the desired engagement.
  • Visual Appeal and Simplicity : My focus is on combining visual appeal with simplicity, making sure the design is not only attractive but also easy to navigate and understand.

Project 4: Crafting an eCommerce Page

Creating an eCommerce page is an excellent project for web developers looking to dive into the world of online retail. This project focuses on designing a web page that showcases products, includes product descriptions, prices, and a shopping cart.

The aim is to build a user-friendly and visually appealing eCommerce page that displays products effectively, providing customers with essential information and a seamless shopping experience. The page should include product images, descriptions, prices, and add-to-cart buttons.

See the Pen HTML Project 4 by HubSpot ( @hubspot ) on CodePen .

  • Clarity and Accessibility : In designing the eCommerce page, my priority is to ensure that information is clear and accessible, making the shopping process straightforward for customers.
  • Engaging Product Presentation : I'll focus on presenting each product attractively, with high-quality images and concise, informative descriptions that entice and inform.

25 html and css coding hacks

Project 5: Developing a Recipe Page

One of the best ways to enhance your HTML and CSS skills is by creating a recipe page. This project is not only about structuring content but also about making it visually appealing. A recipe page is a delightful way to combine your love for cooking with web development, allowing you to share your favorite recipes in a creative and engaging format.

The aim of this project is to design a web page that effectively displays a recipe, making it easy and enjoyable to read. This includes organizing the recipe into clear sections such as ingredients and instructions, and styling the page to make it visually appealing. The recipe page you create can serve as a template for future culinary postings or a personal collection of your favorite recipes.

See the Pen HTML Project 5 by HubSpot ( @hubspot ) on CodePen .

  • Clarity and Simplicity : My focus is on presenting the recipe in an organized manner, ensuring that the ingredients and instructions are easy to distinguish and follow.
  • Engaging Visuals : I plan to use appealing images and a thoughtful layout, making the page not just informative but also a delight to the eyes.

Project 6: Creating a Technical Documentation 

Implementing a responsive navigation menu is a crucial skill in web development, enhancing user experience on various devices. This project focuses on creating a navigation menu that adjusts to different screen sizes, ensuring your website is accessible and user-friendly across all devices.

The goal is to create a navigation menu that adapts to different screen sizes. This includes a traditional horizontal menu for larger screens and a collapsible " hamburger " menu for smaller screens. Understanding responsive design principles and how to apply them using HTML and CSS is key in this project.

See the Pen HTML Project 6 by HubSpot ( @hubspot ) on CodePen .

  • Flexibility is Key : I'm focusing on building a navigation menu that's flexible and adapts smoothly across various devices.
  • Simplicity in Design : Keeping the design simple and intuitive is crucial, especially for the mobile version, to ensure ease of navigation.

Project 7: Building a Small Business Homepage 

Creating a homepage for a small business is a fantastic project for applying web development skills in a real-world context. This project involves designing a welcoming and informative landing page for a small business, focusing on user engagement and business promotion.

The aim is to create a homepage that effectively represents a small business, providing key information such as services offered, business hours, location, and contact details. The design should be professional, inviting, and aligned with the business's branding.

See the Pen HTML Project 7 by HubSpot ( @hubspot ) on CodePen .

  • Clarity and Accessibility : My priority is ensuring that key information is presented clearly and is easily accessible to visitors.
  • Brand Consistency : I plan to incorporate design elements that are in line with the business's branding, creating a cohesive and professional online presence.

Project 8: Setting Up a Simple Survey Form

Creating a simple survey form is a valuable project for practicing form handling in HTML and CSS. It's a fundamental skill in web development, essential for gathering user feedback, conducting research, or learning more about your audience.

The objective of this project is to create a user-friendly survey form that collects various types of information from users. The form will include different types of input fields, such as text boxes, radio buttons, checkboxes, and a submit button. The focus is on creating a clear, accessible, and easy-to-use form layout.

See the Pen HTML Project 8 by HubSpot ( @hubspot ) on CodePen .

  • Simplicity in Design : I'm aiming for a design that's straightforward and intuitive, ensuring that filling out the form is hassle-free for users.
  • Responsive Layout : Ensuring the form is responsive and accessible on different devices is a key consideration in its design.

Project 9: Creating an Event Invitation Page

Designing an event invitation page is a fantastic way to combine creativity with technical skills. This project involves creating a web page that serves as an online invitation for an event, such as a conference, workshop, or party.

The aim is to create a visually appealing and informative event invitation page. This page should include details about the event like the date, time, venue, and a brief description. The focus is on using HTML and CSS to present this information in an engaging and organized manner.

See the Pen HTML Project 9 by HubSpot ( @hubspot ) on CodePen .

  • Visual Impact : I'm aiming for a design that captures the essence of the event, making the page immediately engaging.
  • Clear Information Hierarchy : Organizing the event details in a clear and logical manner is crucial for effective communication.

Project 10: Building a Parallax Website

Creating a parallax website involves implementing a visual effect where background images move slower than foreground images, creating an illusion of depth and immersion. It's a popular technique for modern, interactive web design.

The objective of this project is to create a website with a parallax scrolling effect. This will be achieved using HTML and CSS, specifically focusing on background image positioning and scroll behavior. The key is to create a visually engaging and dynamic user experience.

See the Pen HTML Project 10 by HubSpot ( @hubspot ) on CodePen .

  • Balance in Motion : While implementing parallax effects, I'll ensure the motion is smooth and not overwhelming, to maintain a pleasant user experience.
  • Optimized Performance : I'll be mindful of optimizing images and code to ensure the parallax effect doesn't hinder the site's performance.

As we reach the end of our journey through various web development projects, it's clear that the field of web development is constantly evolving, presenting both challenges and opportunities. From creating basic HTML pages to designing dynamic, interactive websites, the skills acquired are just the beginning of a much broader and exciting landscape.

Embracing New Technologies: The future of web development is tied to the ongoing advancements in technologies. Frameworks like React, Angular, and Vue.js are changing how we build interactive user interfaces. Meanwhile, advancements in CSS, like Flexbox and Grid, have revolutionized layout design, making it more efficient and responsive.

Focus on User Experience: As technology progresses, the emphasis on user experience (UX) will become even more crucial. The success of a website increasingly depends on how well it engages users, provides value, and creates meaningful interactions. Web developers must continuously learn about the latest UX trends and apply them to their work.

The Rise of Mobile-First Development: With the increasing use of smartphones for internet access, mobile-first design is no longer an option but a necessity. This approach involves designing websites for smaller screens first and then scaling up to larger screens, ensuring a seamless experience across all devices.

Web Accessibility and Inclusivity: Making the web accessible to everyone, including people with disabilities, is a growing focus. This includes following best practices and guidelines for web accessibility, ensuring that websites are usable by everyone, regardless of their abilities or disabilities.

Performance and Optimization: As users become more demanding about performance, optimizing websites for speed and efficiency will continue to be a priority. This includes minimizing load times, optimizing images and assets, and writing efficient code.

Emerging Trends: The integration of artificial intelligence and machine learning in web development is on the rise, offering new ways to personalize user experiences and automate tasks. Additionally, the development of Progressive Web Apps (PWAs) is blurring the lines between web and mobile apps, offering offline capabilities and improved performance.

Continuous Learning: The only constant in web development is change. Continuous learning and adaptation are key to staying relevant in this field. Whether it's learning new programming languages, frameworks, or design principles, the ability to evolve with the industry is critical for any web developer.

As you continue on your path in web development, remember that each project is a step towards mastering this ever-changing discipline. Embrace the challenges, stay curious, and keep building, for the road ahead in web development is as exciting as it is limitless.

coding-hacks

Don't forget to share this post!

Related articles.

15 Essential HTML Certifications

15 Essential HTML Certifications

4 Ways to Get a URL for an Image

4 Ways to Get a URL for an Image

The What, Why, & How of Making a Favicon for Your Website

The What, Why, & How of Making a Favicon for Your Website

How to Create a Landing Page in HTML

How to Create a Landing Page in HTML

5 Easy Ways to Insert Spaces in HTML

5 Easy Ways to Insert Spaces in HTML

How to Use HTML Picture Tag

How to Use HTML Picture Tag

Everything You Need to Know about HTML Navigation Bars (+Code)

Everything You Need to Know about HTML Navigation Bars (+Code)

The HTML details Tag: Simple Examples for Web Designers

The HTML details Tag: Simple Examples for Web Designers

How to Use the hr Tag in HTML: Your Guide to Web Page Dividers

How to Use the hr Tag in HTML: Your Guide to Web Page Dividers

HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]

HTML Projects for Beginners: How to Create a Personal Portfolio Page [Step-by-Step]

Tangible tips and coding templates from experts to help you code better and faster.

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

Paper exams, AI-proof assignments: Wisconsin college professors adjust in a world with ChatGPT

assignments for html and css

Something about the student's writing seemed off to Sam Harshner. The syntax was sophisticated. The topic choice was advanced. All this from a student who'd barely spoken in the first few days of Harshner's Writing and Argumentation class last fall.

Harshner, who teaches in Marquette University's political science department, ran the work through an online artificial intelligence detector. It came back all red.

Harshner ran his other students' work through the AI detector. He said eight of the 40 assignments, or 20%, came back with an 85% chance or higher of AI-generated work. The facts hit him like a gut punch.

"Honestly, like, you want to think what you're doing matters," Harshner said. "You want to think that at least in some part all the work you're putting in actually impacts people's lives."

AI is disrupting colleges across the country, offering shortcuts for students and uncomfortable questions for professors. Tools like ChatGPT can, in a matter of seconds, solve math problems, write papers and craft code on command.

"It’s entirely changed the way I teach," Harshner said.

Harshner's writing-intensive course was previously heavy on take-home essays. He now has students write their papers during class. Not only does he outline an AI ban on his syllabi but he also has students sign a contract agreeing not to use it, even for generating ideas or paper outlines.

"You have to take steps to, you know, kind of push back on this," Harshner said, adding he believes AI is a "threat to higher education in real, meaningful ways."

College instructors rethink lesson plans

Not everyone is as alarmed as Harshner. Other instructors admit they've come across ChatGPT-written work students passed off as their own. But they believe the vast majority of students aren't outsourcing their assignments.

Even so, many are tweaking how they teach.

Some run assignments through ChatGPT to see how well the chatbot performs, and then make adjustments. Others incorporate AI into coursework to expose students to the tools of the future — and to highlight their limitations.

Gabriel Velez, a Marquette professor in the department of education policy and leadership, was surprised how few of his students knew about ChatGPT when he demonstrated it in class.

"The freshmen we're getting now, they've gone 12 years of education without using AI," he said. "I don't think just because it's become quickly available that they're going to jump ship and 100% dive into it."

Velez's own research supports this. He anonymously surveyed nearly 500 Marquette students last fall on their use of AI. Preliminary results found 66% of respondents said they don't use AI tools at all. Those who have said they most often turned to it when hitting a writing block or to generate ideas — a start rather than a crutch.

Another Marquette professor, Jacob Riyeff, used to ask students to write short summaries of readings ahead of class discussion. Deemed too tempting for students to turn to AI to complete the work, the English professor now hands out physical copies of readings and asks students to underline and analyze the text by hand.

"If it’s going to be really easy to cut corners, how are we setting students up for success?" Riyeff asked.

AI isn't a two-minute talking point during syllabus week in Riyeff's class. He said he has multiple discussions about his stance on AI with students throughout the semester.

"I want them to understand why I take this approach pedagogically," he said. "It's not 'because Dr. Riyeff says so.' That’s not the way to change hearts and minds, especially when they’re hearing lots of hype about this."

Eric Ely, who teaches in the Information School at the University of Wisconsin-Madison, has made some of his assignments more personal, asking students to write about topics that connect to their own lives. In a new assignment this semester, he has students engage with an AI chatbot and document the process.

"Part of my job is to prepare students for life after college, right?" he said. "This is the world that we're living in, and so I feel like I would be doing a disservice to students if I would not talk about this or limit or completely prohibit the use."

Ely sets clear expectations for which assignments students can and cannot use AI. For the most part, he believes students abide by the rules and turn in their own work. But he and his teaching assistants have talked about how sometimes it can be hard to tell.

Can professors easily detect AI-generated work?

The more Elena Levy-Navarro played around with ChatGPT, the more her worry about how well it could complete her assignments faded.

The chatbot's essays lacked specifics. Its arguments were vague. And when the UW-Whitewater English professor asked it about neo-Nazism, a topic often discussed in her class on 1930s fascism, the chatbot demurred . There were other tells, too, like when it cites nonexistent sources.

"I feel fairly confident I could tell if they’re using ChatGPT," Levy-Navarro said.

Levy-Navarro hasn't yet come across work she suspected was AI-generated, and that's why she hasn't dramatically changed her teaching approach. Her assignments often require close readings of literary texts.

Another English professor, Chuck Lewis at Beloit College, has come across a few cases of chatbot-produced work. It's important to craft assignments that are meaningful and engaging to students, he said.

Lewis predicted the standard five-paragraph essay to be "doomed." He believes he's created "relatively AI-proof" assignments.

The Milwaukee Journal Sentinel tested it out , asking Lewis and other instructors for one of their class assignments. The newspaper told them some of the homework would be done honestly and some would be handled by ChatGPT. But the professors weren't told who did the work until after giving a grade.

The Journal Sentinel's experiment found ChatGPT earned one A, two B's and two incompletes.

More: Can ChatGPT pass college assignments? We tested it out, with help from Wisconsin professors

For UW-Madison professor Dietram Scheufele, the big question isn't what AI can — or cannot — do for college students.

There's a commercial interest in improving the accuracy of AI, he said. Eventually, the idea of coding from scratch will disappear. Using AI to assist in the writing process will be the new normal.

"What I’m much more concerned about is the fundamental disruption to our social system and how we prepare students for that," said Scheufele, whose research includes technology policy, misinformation and social media. "The question for universities right now is why this degree will be worth something 40 years from now."

Is cheating on the rise?

John Zumbrunnen, the vice provost of teaching and learning at UW-Madison, said the most-asked question he gets about AI is whether the university has or will have a policy on it.

UW-Madison does not, meaning students navigate at least four different class policies per semester. In some cases, individual assignments will have their own AI expectations. That's why it's important, he said, for instructors to offer grace in this new world.

"The answer in the teaching and learning space cannot be one-size-fits-all," he said earlier this month at a UW Board of Regents meeting.

Riyeff, the Marquette English professor, serves as the university's academic integrity director. He said he hasn't seen an overwhelming increase in the number of AI-related plagiarism cases.

Still, some instructors said they have second-guessed their students while grading papers.

"I’m trying not to be suspicious all the time," Riyeff said. "It’s one of the challenges in this moment."

Contact Kelly Meyerhofer at  [email protected] or 414-223-5168. Follow her on X (Twitter) at  @KellyMeyerhofer .

an image, when javascript is unavailable

Phil Mattingly Snares Chief Domestic Correspondent Role Following CNN A.M. Shuffle

By Brian Steinberg

Brian Steinberg

Senior TV Editor

  • Kate O’Brian Will Oversee All Scripps News Operations 15 hours ago
  • Paramount Global Sees $1 Billion Charge in Q1 for Layoffs, Restructuring 15 hours ago
  • Jimmy Fallon Picks His Favorite ‘Tonight Show’ Moments With Nicole Kidman, Kevin Hart, Emma Stone and More 20 hours ago

Phil-Mattingly-CNN

Phil Mattingly is discovering that mornings aren’t the only place where one can rise and shine at CNN .

The journalist, recently named co-anchor of a morning program that CNN subsequently scuttled , has been named chief domestic correspondent at the Warner Bros,. Discovery-backed network. In his new role. Mattingly will deliver enterprise reporting across CNN’s platforms and schedule while filling in for other anchors when circumstances warrant. He will also take part in CNN’s coverage during the 2024 conventions and during coverage of special political events.

“Phil Mattingly is one of the strongest political journalists and anchors we have at CNN,” said Mark Thompson, Chairman and Chief Executive Officer of CNN Worldwide, in a statement. “As a 2016 campaign correspondent, Capitol Hill correspondent, Senior White House Correspondent and Chief White House Correspondent, Phil has risen to every challenge CNN has thrown at him. He’s the perfect choice to become CNN Anchor, Chief Domestic Correspondent and to play a central role in our coverage of one of the most momentous election cycles in American history.”

Mattingly and Poppy Harlow have both been in discussions with CNN about new roles following the network’s decision to cancel their version of “CNN This Morning,” and replace it with programs already led by Kasie Hunt and the trio of Kate Bolduan, John Berman and Sara Sidner . Harlow remains in talks about a future position, according to people familiar with the matter.

Mattingly joined CNN in December of 2015 as a New York-based correspondent, then spent 2016 covering Republican presidential candidates Chris Christie, John Kasich and Donald Trump, which included a series of investigative pieces into Trump’s business history, finances and taxes. Previously, Mattingly worked at Bloomberg Television in Washington, where he served as a national political correspondent and before that, as the network’s White House correspondent.

He graduated from The Ohio State University in 2006, where he was a scholar varsity athlete. He received his Master’s Degree in journalism from Boston University in 2008.

More From Our Brands

Survivor groups call on music industry to address sexual abuse, millennials will become the ‘richest generation in history,’ a new report says, caitlin clark’s record-breaking jersey could fetch $200k, the best mattress protectors, according to sleep experts, chicago fire recap: was #brettsey wedding a satisfying farewell, verify it's you, please log in.

Quantcast

Leap Day 2024: Deals and freebies at Krispy Kreme, Wendy’s and more

  • Updated: Feb. 28, 2024, 4:32 p.m. |
  • Published: Feb. 27, 2024, 5:30 p.m.

Krispy Kreme Leap Day 2024

Several businesses are offering free food and deals you can get on Leap Day in 2024, including a deal from Krispy Kreme. Krispy Kreme

  • Katherine Rodriguez | NJ Advance Media for NJ.com

Leap Day is Feb. 29, 2024.

It happens once every four years and is an extra day added to the Gregorian Calendar to account for the Earth taking slightly more than a 365-day calendar year to revolve around the sun, according to Brittanica.

If there were no leap days, each season would start a quarter of a day later, leading to shifting weather patterns and solstice dates.

Some restaurants, retailers and fast food chains have even decided to capitalize on the Leap Day phenomenon by offering free food and deals.

Here is a roundup of those deals and freebies that you can find on or around Leap Day for 2024:

7-Eleven : Get 10 mini tacos for $2.59 with 7NOW delivery .

Chipotle : Rewards members get free guac with their digital orders when they order on the Chipotle app and Chipotle.com on Thursday, Feb. 29 using code EXTRA24 .

Chuck E. Cheese : Children under 52 inches tall can get free All-Day Jump Passes when they visit locations with Chuck E. Cheese Trampoline Zones.

Dunkin’ : Dunkin’ Rewards members can get a $2 Medium Cinnamon Vanilla Coffee through the Dunkin’ mobile app AND earn 4X points on all app orders on Leap Day.

Hooters : HootClub Rewards members with the app downloaded and a Hooters of America restaurant location favorited will can get one appetizer for $2.29. The available appetizers for the deal include cheese sticks, fried pickles, chips and queso, lots-a-tots, cheese and pretzels and twelve buffalo shrimp.

Insomnia Cookies : “Leaplings” (people born on Leap Day) can get four free cookies and a birthday party in their local store when they show their I.D.

Krispy Kreme : All customers can buy Original Glazed doughnuts for $2.29 when they buy any regularly priced dozen. People whose birthdays are on Leap Day can also get a free Original Glazed dozen when they show proof of their birthday.

Legal Sea Foods : People who dine in at Legal Sea Foods locations (except for airports) can get two 1-pound steamed lobsters for $29 on Feb. 29.

Paris Baguette : Get a medium hot or iced coffee for 29 cents when you make a purchase on Feb. 29.

Staples : Staples will offer passport photos for free via its app on Feb. 29.

Wendy’s : You can get a free Cinnabon Pull-Apart until 10:30 a.m. local time at Wendy’s on Feb. 29.

Our journalism needs your support. Please subscribe today to NJ.com .

Katherine Rodriguez can be reached at [email protected] . Have a tip? Tell us at nj.com/tips .

If you purchase a product or register for an account through a link on our site, we may receive compensation. By using this site, you consent to our User Agreement and agree that your clicks, interactions, and personal information may be collected, recorded, and/or stored by us and social media and other third-party partners in accordance with our Privacy Policy.

Olympic gymnastics champ Suni Lee will have to wait to get new skill named after her

assignments for html and css

Suni Lee will have to wait to have her new skill on uneven bars named after her.

The reigning Olympic champion was not assigned to the World Cup in Baku, Azerbaijan, as she'd hoped. Lee didn't get any international assignments Tuesday, though she could still be sent to the Pacific Rim Championships later in the spring.

Lee had wanted to go to the World Cup so she could do her new skill — a release move where she launches herself off the top bar and does a full twisting forward somersault in a laid-out position before catching the bar again — and get it named after her. A gymnast has to do a skill at an internationally recognized meet for it to be added to the Code of Points, the sport's scoring system.

But Chellsie Memmel, the technical lead for the U.S. women's team, had signaled Friday that it wasn't a given Lee would be assigned to Baku.

"If we're sending someone just to do two events, who isn't currently on the national team, they need to place high," Memmel said.

OPINION: Suni Lee's rough Winter Cup day is reminder of what makes her a great

Lee did two events at last weekend's Winter Cup , her first meet since she withdrew from the world team selection camp last September because of a kidney ailment that severely limited her training. She fell twice on uneven bars, including on her new skill, and again on balance beam.

But she looked great during training, and there is every expectation she'll be back in top form with more time in the gym. She'd only been training full-time again for about six weeks before Winter Cup.

"I hope they do" send Lee to Baku, longtime coach Jess Graba said Saturday. "If they don't, then we go back and we train and we do other things."

IMAGES

  1. 43 How To Practice Html Css And Javascript

    assignments for html and css

  2. HTML Practical Assignment, HTML Assignments for Students With Code

    assignments for html and css

  3. 05: Advanced CSS

    assignments for html and css

  4. 7 Projects to practice HTML & CSS skills for beginners

    assignments for html and css

  5. Creating A Page Using Html And Css Tutorial Blog Assignmentshark

    assignments for html and css

  6. Creating a Page Using HTML and CSS Tutorial

    assignments for html and css

VIDEO

  1. HTML CSS PROGRAM

  2. HTML and CSS

  3. HTML CSS PART 1

  4. html and css

  5. HTML and CSS Tutorial For Beginners: END THANK FOR WATCHING

  6. HTML , CSS tutorial

COMMENTS

  1. 32 HTML And CSS Projects For Beginners (With Source Code)

    In this project, you'll create a simple blog post page using HTML and CSS. You'll need to design the layout of the page, add a title, a featured image, and of course add some content to your dummy blog post. You can also add a sidebar with a few helpful links and widgets, like: An author bio with a photo.

  2. CSS Exercises

    W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

  3. 10 HTML and CSS Code Challenges for Beginners

    Here are 10 HTML and CSS code challenges that'll help you take your skills to the next level. To get started, just pick a challenge, open up a workspace, and start coding. Note that while these challenges are designed for beginners, you'll still need to have a basic understanding of HTML and CSS. If you need a refresher, use the courses below:

  4. The Best HTML and CSS Projects for Beginners

    If you want to learn HTML and CSS skills and start making money, here are some great practice projects to help you get started. 1. Build a Portfolio or Simple Personal Website. A simple website is useful for showcasing your projects to potential employers and as practice writing markup and creating stylesheets.

  5. HTML and CSS in depth

    There are 3 modules in this course. In this course, you'll use software development tools like HTML to build attractive web pages that work well—and you'll use structured semantic data to control how websites appear to the end user. You will then dive deeper into CSS by applying increasingly specific styling to various elements.

  6. Intro to HTML/CSS: Making webpages

    Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, and more. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

  7. Practice Projects in HTML & CSS

    Challenge Project: Build a Website Design System. HTML & CSS • Web Development • Web Design Build a style guide for your web projects, including custom fonts, colors, text styles, and more. Less guidance, 180 min. Practice Project.

  8. Introduction to HTML and CSS

    HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS ...

  9. Starting with HTML + CSS

    It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites.

  10. CSS basics

    CSS is a style sheet language. CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red: css. p { color: red; } Let's try it out! Using a text editor, paste the three lines of CSS (above) into a new file. Save the file as style.css in a directory named styles.

  11. Learn to style HTML using CSS

    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 ...

  12. HTML, CSS, and Javascript for Web Developers

    24 videos • Total 150 minutes. Welcome to Module 4: Introduction to Javascript • 1 minute • Preview module. Lecture 40, Part 1: Adjusting Development Environment for Javascript Development • 5 minutes. Lecture 40, Part 2: Where to Place Javascript Code • 5 minutes.

  13. HTML/CSS projects to learn programming

    Learn programmingwith curated HTML/CSS projects. Bridge the gap between theory and real-world code by working on curated HTML/CSS projects. Use DevProjects as practice or enhance your portfolio with these fun HTML/CSS project ideas. From beginner HTML/CSS projects to more advanced ones, find your next coding project now.

  14. Assignment 1

    Assignment 1: Static Web: HTML/CSS. Due Sunday, February 7 11:59pm ET Setup. 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 ...

  15. Top 10 Projects For Beginners To Practice HTML and CSS Skills

    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.

  16. HTML Styles CSS

    What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

  17. 40 Web Development Projects For Beginners

    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.

  18. HTML CSS Exercises: Practice and Solution

    Sharpen your skills with these HTML CSS Exercises from w3resource. Alongside studying HTML and CSS tutorials from w3resource, you need to practice HTML and CSS extensively to hone your Frontend Development skills. Here is a list of exercises we published till now. Subscribe to our RSS feed for more exercises. HTML Basic Exercises [HTML Tags and ...

  19. The 8 Best HTML and CSS Projects for Beginners

    1. Personal Website. Building a personal website is among the most popular yet challenging projects for HTML and CSS beginners. It is a well-rounded project that tests most skills acquired during your learning process. Moreover, a personal website is an excellent place to display your CV and link your GitHub account.

  20. HTML Assignment| HTML Exercise and Examples

    HTML; CSS; Java Script; PHP; React JS; Node JS; Assignment. MS Office; HTML; CSS; Bootstrap; Java Script; JQuery; AngularJs; Project; Blog; Home; HTML Lab Assignments; HTML Assignment and HTML Examples for Practice. UNIT - 1 Text Formatting Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5- India. UNIT - 2 Working with Image

  21. CSS fundamentals

    Learning outcomes: Use the HTML validator to see if you have any invalid markup on your page — this could be causing your CSS to not apply as desired.; Use the CSS validator to check for badly-formed CSS code. A missing semi-colon can cause a whole section of CSS declarations to not apply. Use browser developer tools to inspect the CSS that is applied to HTML elements on a page.

  22. HTML-CSS Exercises Part-I: Practical Exercises

    HTML-CSS Practical [15 exercises with solution] 1. Using HTML, CSS create a styled checkbox with animation on state change. Go to the editor. Click me to see the solution. 2. Using HTML, CSS change the styling of text selection. Go to the editor. Click me to see the solution.

  23. Projects in HTML & CSS

    Challenge Project: Build a Website Design System. HTML & CSS • Web Development • Web Design Build a style guide for your web projects, including custom fonts, colors, text styles, and more. Less guidance, 180 min. Practice Project.

  24. HTML Projects for Beginners: 10 Easy Starter Ideas

    Project 4: Crafting an eCommerce Page. Creating an eCommerce page is an excellent project for web developers looking to dive into the world of online retail. This project focuses on designing a web page that showcases products, includes product descriptions, prices, and a shopping cart. Objective.

  25. Paper exams, AI-proof assignments: Wisconsin college professors adjust

    He said eight of the 40 assignments, or 20%, came back with an 85% chance or higher of AI-generated work. The facts hit him like a gut punch. "Honestly, like, you want to think what you're doing ...

  26. CNN's Phil Mattingly Snares Chief Domestic Correspondent Role

    CNN named Phil Mattingly chief domestic correspondent, giving the journalist a new role following an overhaul of its morning schedule

  27. Leap Day 2024: Deals and freebies at Krispy Kreme, Wendy's and more

    Here's a roundup of the best free or discounted food, activities and products you can get on Leap Day in 2024. Skip to Article. Set weather. Back To Main Menu Close. Customize Your Weather.

  28. Suni Lee is not assigned to World Cup; new skill will have to wait

    Suni Lee will have to wait to have her new skill on uneven bars named after her. The reigning Olympic champion was not assigned to the World Cup in Baku, Azerbaijan, as she'd hoped.