4Geeks logo
4Geeks logo
About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

Learn Html and css

Lessons, exercises, and projects about Html and css

Browse our list of curated database of projects, exercises and lessons to learn HTML and CSS

  • html-css

  • front-end

  • layouts

What is Front-End Development

Read lesson
  • html-css

  • web-development

Before Starting Full Stack Development

Read lesson
  • html-css

  • layouts

Build a Digital Postcard with HTML/CSS

  • beginner

Replicate this postcard with CSS and HTML

Start project
  • html-css

  • javascript

  • sorting-algorithms

Bubble Sorting Cards

  • intermediate

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

Start project
  • html-css

Create a HTML5 form

  • beginner

Create a HTML5 form with all the typical inputs

Start project
  • bootstrap

  • html-css

Bootstrap Tutorial: Learn Bootstrap 5 in 10 minutes

Read lesson
  • html-css

  • javascript

  • 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
  • html-css

Learn the basics of HTML Interactively

  • easy

Learn the most popular HTML Tags and how to used them with real life interactive examples, automatic grading and video solutions

Start exercise
  • html-css

  • javascript

  • the-dom

Learn how to manipulate The DOM with JS

  • easy

Step by step, go over all the most important DOM concepts and methods: Use javascript to manipulate styles, html elements.

Start exercise
  • html-css

  • javascript

  • 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
  • html-css

  • git

  • github

Building a website collaborative

  • easy

Build website among a team of several collaborators

Start project
  • html-css

CSS Drawing Goku

  • hard

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

Start project
  • html-css

  • javascript

  • the-dom

Random Card Generator

  • beginner

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

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

What is HTML? It's time to learn HTML and its structure

Read lesson
  • html-css

  • javascript

  • events

Todolist with Vanilla JS (no framework)

  • easy

Create a simple todo web app using vanilla js

Start project
  • html-css

  • javascript

  • vanilla-js

Sorting Cards with Select

  • intermediate

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

Start project
  • html-css

  • web-development

  • debugging

Debugging CSS Code

Debugging css code faster and more efficiently. Save more than 50% of your debugging time when coding CSS.

Read lesson
  • bootstrap

  • html-css

Bootstrap Tutorial: Learn Bootstrap 4 in 10 minutes

Read lesson
  • html-css

  • layouts

Instagram Post

  • beginner

Replicate a single instagram post using HTML and CSS

Start project
  • bootstrap

  • html-css

Learn Bootstrap Tutorial

  • easy

A complete tutorial list of small targeted exercises that will show the most usefull things you need to learn about bootstrap

Start exercise
  • html-css

  • layouts

Build Website Layouts with CSS

  • easy

Learn how to build layouts with an interactive and auto-graded tutorial.

Start exercise
  • html-css

  • javascript

  • 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

  • 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
  • html-css

  • javascript

  • 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
  • html-css

  • inputs

  • forms

Understanding HTML Input HTML Text Area and Forms...

HTML Forms, HTML input and HTML text-area are really easy to understand, and they are the ONLY way to make interactive websites without AJAX. These very basic concepts represent 90% of everything you will ever need to know about forms .

Read lesson
  • html-css

  • layouts

  • box-model

CSS Layouts: Create and Build Layouts with CSS

Read lesson
  • html-css

  • vanilla-js

Landing Page with Javascript

  • intermediate

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

Start project
  • bootstrap

  • html-css

  • forms

Use JS to validate an HTML Form

  • beginner

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

Start project
  • html-css

  • debugging

Debugging HTML Code

Read lesson
  • 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

Learn CSS Interactively

  • easy

Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.

Start exercise
  • html-css

  • javascript

Learn how to use and interact with HTML Forms

Form validations, inputs, textarea, date inputs, etc.

Start exercise
  • html-css

  • resume-building

  • layouts

Build your resume in HTML/CSS

  • beginner

Practice HTML and CSS by building your Resume.

Start project
  • html-css

  • reactjs

  • javascript

The Meetup.com Clone using react.js

  • intermediate

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

Start project
  • html-css

  • javascript

Spotify Landing Page

  • intermediate

Replicate a professional real-life landing page using bootstrap

Start project
  • bootstrap

  • html-css

  • reactjs

Landing Page with React

  • easy

Create a simple landing page using React.js components

Start project