Skip to content

FarmerAbdulAlim/learn-css-by-building-100-projects

Repository files navigation

50 CSS Projects for Beginners from easy to hard.

Project No. Project Name Video Explanation Live Demo
01 Responsive Image Grid Watch Now Live Demo
02 A Beautiful Page Using Linear Gradients Watch Now Live Demo
03 A Beautiful Animated Login Form Watch Now Live Demo
04 Watch Now Live Demo
05 Watch Now Live Demo
06 Watch Now Live Demo
07 Watch Now Live Demo
08 Watch Now Live Demo
09 Watch Now Live Demo
10 Watch Now Live Demo
11 Watch Now Live Demo
12 Watch Now Live Demo
13 Watch Now Live Demo
14 Watch Now Live Demo
15 Watch Now Live Demo
16 Watch Now Live Demo
17 Watch Now Live Demo
18 Watch Now Live Demo
19 Watch Now Live Demo
20 Watch Now Live Demo
21 Watch Now Live Demo
22 Watch Now Live Demo
23 Watch Now Live Demo
24 Watch Now Live Demo
25 Watch Now Live Demo
26 Watch Now Live Demo
27 Watch Now Live Demo
28 Watch Now Live Demo
29 Watch Now Live Demo
30 Watch Now Live Demo
31 Watch Now Live Demo
32 Watch Now Live Demo
33 Watch Now Live Demo
34 Watch Now Live Demo
35 Watch Now Live Demo
36 Watch Now Live Demo
37 Watch Now Live Demo
38 Watch Now Live Demo
39 Watch Now Live Demo
40 Watch Now Live Demo
41 Watch Now Live Demo
42 Watch Now Live Demo
43 Watch Now Live Demo
44 Watch Now Live Demo
45 Watch Now Live Demo
46 Watch Now Live Demo
47 Watch Now Live Demo
48 Watch Now Live Demo
49 Watch Now Live Demo
50 Watch Now Live Demo

01. Responsive Image Grid

Difficulty: Easy(2/10)

You Will Learn

  • CSS Grid Layout
  • How to do responsive of a collection of images.

Project Description

This project shows how to utilize CSS Grid Layout to responsive a collection of images like pinterest.

Project Screenshot

Click the image to view Live Project

Responsive Image Grid

Live Project Link

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

Project Source Codes

Go to Top

02. A Beautiful Page Using Linear Gradients

Difficulty: Easy(2/10)

You Will Learn

  • CSS Linear Gradients
  • How to create a beautiful page using linear gradients.

Project Description

This project shows how to utilize CSS Linear Gradients to create a beautiful simple page.

Project Screenshot

Click the image to view Live Project

Responsive Image Grid

Live Project Link

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

Project Source Codes

Go to Top

03. A Beautiful Animated Login Form

Difficulty: Easy(3/10)

You Will Learn

  • CSS 2D and 3D Animation.
  • How to use css tricks to create a beautiful animated form.

Project Description

This is a login page built with only HTML and CSS. After completing this project, you'll learn how to use css animations and some commonly used property to create a beautiful login form. Probably you know all of the css properties and their definations, but maybe you don't know how to use them to create some beautiful UI. This project is gonna teach the way!

Project Screenshot

Click the image to view Live Project

Animated Login Form

Live Project Link

Live Project Link

Video Explanation

Coming Soon...

Project Source Codes

Project Source Codes

Go to Top

Releases

No releases published

Packages

No packages published