Practice Html and css building interactive projects

What to build with Html and css

Practice and develop your coding skills by building real live interactive autograded projects with solutions and video tutorials

  • node

  • html-css

  • ejs

Create a form in Node.js

  • beginner

Create a form using the EJS (Embedded JavaScript templates) and Express.js to render the HTML/CSS, validate using Node

Start project
  • bootstrap

  • html-css

  • reactjs

Personal Portfolio with React

  • easy

Steps to create your first personal porfolio using React.js

Start project
  • javascript

  • html-css

  • vanilla-js

Battleship with Vanilla.js

  • intermediate

Use your DOM knowledge, HTML/CSS and Javascript to create a battleship game for one person only

Start project
  • javascript

  • html-css

  • vanilla-js

Sorting Cards with Select

  • intermediate

Practice building algorithms by doing a selection-sorting algorithm and displaying it on a website

Start project
  • javascript

  • html-css

  • sorting-algorithms

Bubble Sorting Cards

  • intermediate

Practice building algorithms by doing a bubble-sorting algorithm and displaying it on a website

Start project
  • javascript

  • html-css

  • reactjs

The Meetup.com Clone using react.js

  • intermediate

Use React and HTTP Fetch to create a Meetup.com clone

Start project
  • bootstrap

  • javascript

  • html-css

Use JS to validate an HTML Form

  • beginner

Use Javascript to validate the inputs of an HTML form (on submit)

Start project
  • html-css

  • git

  • github

Building a website collaborative

  • easy

Build website among a team of several collaborators

Start project
  • javascript

  • html-css

Spotify Landing Page

  • intermediate

Replicate a professional real-life landing page using bootstrap

Start project
  • html-css

CSS Drawing Goku

  • hard

Use your CSS knowledge to draw Goku using Position and Display properties.

Start project
  • javascript

  • html-css

  • Conditions

Conditional Profile Card Generator

  • beginner

Practice conditions, render a profile card based on a series of variables that could change in value during runtime like: username, avatar, etc.

Start project
  • javascript

  • html-css

  • the-dom

Code an Excuse Generator in Javascript

  • beginner

Disneyland for procrastinators. Learning Javascript? This excuse generator tutorial takes no more than 20 lines of code and can save you for the rest of your life!

Start project
  • bootstrap

  • javascript

  • html-css

Landing Page with React

  • easy

Create a simple landing page using React.js components

Start project
  • javascript

  • html-css

  • the-dom

Random Card Generator

  • beginner

Use your CSS/HTML/JS skills to randomly draw a poker card on every website refresh.

Start project
  • html-css

  • vanilla-js

Landing Page with Javascript

  • intermediate

Build a real life beautiful landing page without any framework and collecting leads

Start project
  • javascript

  • html-css

  • events

Todolist with Vanilla JS (no framework)

  • easy

Create a simple todo web app using vanilla js

Start project
  • html-css

  • resume-building

  • layouts

Build your resume in HTML/CSS

  • beginner

Practice HTML and CSS by building your Resume.

Start project
  • javascript

  • html-css

  • reactjs

Todolist Application Using React

  • easy

Create a simple todo web app using the React.js framework

Start project
  • javascript

  • html-css

  • events

Pop Balloons using HTML/CSS and a little Javascript

  • easy

Practice your entry-level skills in Javascript, The DOM and HTML/CSS by building a Pop Balloons Game.

Start project
  • html-css

Create a HTML5 form

  • beginner

Create a HTML5 form with all the typical inputs

Start project
  • html-css

  • layouts

Build a Digital Postcard with HTML/CSS

  • beginner

Replicate this postcard with CSS and HTML

Start project
  • html-css

  • layouts

Instagram Post

  • beginner

Replicate a single instagram post using HTML and CSS

Start project
  • bootstrap

  • html-css

  • layouts

Instagram Photo Feed with Bootstrap

  • easy

This is an improved version of the first instagram exercise, now using bootstrap.

Start project
  • html-css

  • layouts

  • flex-box

Simple Instagram Photo Feed with HTML/CSS

  • beginner

Very simple instagram simulation to understand the basics of CSS and HTML5 and how to use them together to create a website.

Start project
  • html-css

  • layouts

  • flex-box

Product Page in plain HTML/CSS

  • easy

Create an eCommerce Product Landing Page using standard HTML/CSS, no bootstrap or any other css framework.

Start project