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.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

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

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

  • 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

  • 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

  • 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

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

  • layouts

Instagram Post

  • beginner

Replicate a single instagram post using HTML and CSS

Start project
  • 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

  • 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

  • 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

  • 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