Skip to content

This repository ๐ŸŒŸ includes some small projects based on HTML, CSS ( basically Sass), and a few of them also include JavaScript as well. All these mini-projects are tutorial-based with little modifications, so I have linked down the Youtube playlist that wraps up most of the tutorials for these projects.

Notifications You must be signed in to change notification settings

theiconik/webD-practice-projects

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

WebD-Practice-Projects

1. Wander

This project is simply a template for the homepage of a travel website and the great thing about this project is it looks pretty dope since there's an aerial footage of a seashore playing in the background.

Screen Recording (07-01-2021 02-21-14)

2. AnimBar

A super cool looking navigation sidebar using HTML, CSS (Sass) and also using Sass module implementation. So in case you only need, sidebar CSS code there's a Sass module for it named as "_animbar.scss".

Screen Recording (08-01-2021 03-47-45)

2. Sai-inUp

A Sassy looking SignIn/SignUp page made using mostly Sass (ofcourse, HTML) and a very little bit of JavaScript. Basically the difficult part is to create the layout of this project and understanding the logic behind the animation. Here's how it looks!

Screen Recording (10-01-2021 03-47-27)

3. Starbucks-CoffeeTime

A clean and awesome aesthetic landing page for Starbucks. Also this project is responsive, and yes you know what, Starbucks was coming to my city (Kanpur) while i was making this page, so I mailed them that you can use my design to kind off message out the people of Kanpur, that you have finally got setup in the city! Just kidding, I didn't do that!

Starbucks-CoffeeTime

Screen Recording (13-01-2021 22-53-26)

4. Nike-Hover

Basically, a very very minimal website but pretty cool card animation which can be used for giving details about a product, when hovered over it as I have done. So, as the name suggests the product name is Hover (Studs) by Nike.

Screen Recording (15-01-2021 22-56-39)

5. GameZon

So, Glassomorphism UI was quite trending, so @developedbyed came up with this project tutorial and yeah, I really liked this trend and watching his tutorial created (and tweaked a little bit part) this mini web project which I guess looks supercool!

GameZon

Webp net-resizeimage

6. PfGlass

PfGlass, short name for Portfolio Glass! So name says it all! Continuing one more project on Glassomorphism UI, I made a card with my basic intro and added cool animations like moving gradient background and vanilla-tilt. So this mini project is kind animation oriented.

PfGlass

Screen Recording (19-01-2021 00-17-24)

6. Heaven

So basically, I saw the small clip of moving clouds and beautiful background and thought of making it! Seemed difficult on the clip, but as I started doing it was pretty easy! Location Courtesy: Nainital. Do visit it's a good place!

Screen Recording (20-01-2021 18-12-12)

7. RGB

Starting Javascript projects part with this DOM Manipulation based mini project that changes background with a random gradient on a click. That's why name Random Gradient Background (RGB).

Screen Recording (24-01-2021 18-42-39)

8. INDIANFlag

As the name says, it's basically my country, INDIA's flag. So it was our Republic Day, so I was kind of checking out GSap and tried to make this pretty cool intro animation of the Indian flag on the website.

9. Aged

This is just a simple JS web app which simply tells you how many days you have survived after taking user's birth year as the input. I know it's super easy but I was thinking of trying Materialize CSS Framework, so built this easy project using that!

Screen Recording (28-01-2021 21-58-30)

10. Rock-Paper-Scissor

Yeah, name says it all! It's that our famous nostalgic game we used to play when we didn't have internet and we used to go to school.

PKK Game

Screen Recording (28-01-2021 21-59-57)

About

This repository ๐ŸŒŸ includes some small projects based on HTML, CSS ( basically Sass), and a few of them also include JavaScript as well. All these mini-projects are tutorial-based with little modifications, so I have linked down the Youtube playlist that wraps up most of the tutorials for these projects.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published