Практика html css javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

100+ mini web projects using HTML, CSS and JavaScript.

License

solygambas/html-css-javascript-projects

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

100 Projects In 100 Days — HTML, CSS & JavaScript

100+ mini web projects using HTML, CSS and JavaScript.

#	Project	Live Demo
001	Expanding Cards	Live Demo
002	Progress Steps	Live Demo
003	Rotating Navigation Animation	Live Demo
004	Hidden Search Widget	Live Demo
005	Blurry Loading	Live Demo
006	Scroll Animation	Live Demo
007	Split Landing Page	Live Demo
008	Form Wave	Live Demo
009	Sound Board	Live Demo
010	Dad Jokes	Live Demo
011	Event Keycodes	Live Demo
012	FAQ Collapse	Live Demo
013	Random Choice Picker	Live Demo
014	Animated Navigation	Live Demo
015	Incrementing Counter	Live Demo
016	Drink Water	Live Demo
017	Movie App	Live Demo
018	Background Slider	Live Demo
019	Theme Clock	Live Demo
020	Button Ripple Effect	Live Demo
021	Drag N Drop	Live Demo
022	Drawing App	Live Demo
023	Kinetic Loader	Live Demo
024	Content Placeholder	Live Demo
025	Sticky Navbar	Live Demo
026	Double Vertical Slider	Live Demo
027	Toast Notification	Live Demo
028	GitHub Profiles	Live Demo
029	Double Click Heart	Live Demo
030	Auto Text Effect	Live Demo
031	Password Generator	Live Demo
032	Good Cheap Fast	Live Demo
033	Notes App	Live Demo
034	Animated Countdown	Live Demo
035	Image Carousel	Live Demo
036	Hoverboard	Live Demo
037	Pokedex	Live Demo
038	Mobile Tab Navigation	Live Demo
039	Password Strength Background	Live Demo
040	3D Background Boxes	Live Demo
041	Verify Account UI	Live Demo
042	Live User Filter	Live Demo
043	Feedback UI Design	Live Demo
044	Custom Range Slider	Live Demo
045	Netflix Mobile Navigation	Live Demo
046	Quiz App	Live Demo
047	Testimonial Box Switcher	Live Demo
048	Random Image Feed	Live Demo
049	Todo List	Live Demo
050	Insect Catch Game	Live Demo
051	Video Background	Live Demo
052	Portfolio with CSS Grid	Live Demo
053	Touch Slider	Live Demo
054	CSS Loaders	Live Demo
055	Glass Dashboard	Live Demo
056	Image Comparison Slider	Live Demo
057	Parallax Background with SVG	Live Demo
058	3D Product Card	Live Demo
059	Form Validator	Live Demo
060	Movie Seat Booking	Live Demo
061	Custom Video Player	Live Demo
062	Exchange Rate Calculator	Live Demo
063	DOM Array Methods	Live Demo
064	Menu Slider & Modal	Live Demo
065	Hangman Game	Live Demo
066	Meal Finder	Live Demo
067	Expense Tracker	Live Demo
068	Music Player	Live Demo
069	Infinite Scroll Posts	Live Demo
070	Typing Game	Live Demo
071	Speech Text Reader	Live Demo
072	Memory Cards	Live Demo
073	Lyrics Search App	Live Demo
074	Relaxer App	Live Demo
075	Breakout Game	Live Demo
076	New Year Countdown	Live Demo
077	Sortable List	Live Demo
078	Speak Number Guessing Game	Live Demo
079	Creative Agency Website	Live Demo
080	Health Dashboard	Live Demo
081	Animated SVG	Live Demo
082	Parallax Landing Page	Live Demo
083	Full-Screen Image Slider	Live Demo
084	Fluid Image Lightbox	Live Demo
085	Sneaker Shop	Live Demo
086	Coming Soon Page	Live Demo
087	Sliding Sign In & Sign Up Form	Live Demo
088	Promo Code	Live Demo
089	One Color UI	Live Demo
090	Tooltip	Live Demo
091	Chat Interface	Live Demo
092	Music Streaming Service	Live Demo
093	Creative Portfolio	Live Demo
094	Laptop UI	Live Demo
095	Headphones Product Page	Live Demo
096	Cloud Hosting Service	Live Demo
097	Terminal Style Landing Page	Live Demo
098	Magazine Layout	Live Demo
099	Parallax Website	Live Demo
100	Hulu Webpage Clone	Live Demo

This repository is mostly based on 2 courses by Brad Traversy (2020):

The other projects are adapted from various YouTube channels:

• Brad Traversy — Traversy Media
• Shaun Pelling — The Net Ninja
• Simo Edwin — Dev Ed
• Gary Simon — DesignCourse
• Kyle Cook — Web Dev Simplified
• Kevin Powell
• Florin Pop

Источник

29 Projects To Help You Practice HTML CSS Javascript 2021

Today we will go into learning about UI Page projects to increase design ability and how to apply HTML, CSS, Javascript to actual website development!

Responsive Social Platform UI

You can see the results below.

Fox News Templates

You can see the results below.

Netflix Landing Page Clone

You can see the results below.

Book Store UI

You can see the results below.

Project Management Dashboard UI

You can see the results below.

Microsoft Homepage Clone

You can see the results below.

Task Manager UI with CSS Grid

You can see the results below.

File Sharing Web App

You can see the results below.

Messaging App UI with Dark Mode

You can see the results below.

Booking App UI

You can see the results below.

Job Search Platform UI

You can see the results below.

Skateboard Video Platform

You can see the results below.

Instagram re-design

You can see the results below.

VideoCall App UI

You can see the results below.

Gym Website — Tailwind Starter Kit

You can see the results below.

Task Management Dashboard UI

You can see the results below.

Internal Video Platform UI

You can see the results below.

Gmail Redesign

You can see the results below.

Chat App UI

You can see the results below.

Responsive-Webpage

You can see the results below.

Dashboard Design with Flexbox

You can see the results below.

Services Section

You can see the results below.

Spotify Artist Page UI

You can see the results below.

Twitter Client UI in CSS + HTML

You can see the results below.

Responsive Movie App UI

You can see the results below.

Twitch Redesign Mockup

You can see the results below.

Task Management UI

You can see the results below.

Facebook Profile Page UI Concept

You can see the results below. Related Articles:
HTML Practice Projects for Beginners
Front End Developer Tools
Free Coding Practice Sites

Top comments (17)

3 likes Like Comment button

Men thanks for this amazing resources

3 likes Like Comment button

3 likes Like Comment button

Thank you cool projects, but what about semantic code? No html5 in 2021 year?

3 likes Like Comment button

Amazing job! Nice ideas to practice.

2 likes Like Comment button

2 likes Like Comment button

Wow, this is so good, nice job.

2 likes Like Comment button

Conteúdo muito bom, obrigado

2 likes Like Comment button

2 likes Like Comment button

Great post, Thanks for giving this information.
English to Malayalam typing
Tutubox

2 likes Like Comment button

Holy smokes, where did you find so many great looking designs and the time to code them? The is one of the best collection of designs I’ve seen.

2 likes Like Comment button

1 like Like Comment button

/Sree-Nee/ Aspiring Polymath in Tech & Design. Ask me about Design Systems, Developer Experience, Front-End Engineering or Accessibility.

Excellent curated collection!

1 like Like Comment button

1 like Like Comment button

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

For further actions, you may consider blocking this person and/or reporting abuse

Read next

Introduction to Windows GUI Programming with C++: Building Your First Window

13 CSS Tricks that will give you an adrenaline rush🤯

Organizing a Large Number of Scripts in Package.json

bright inventions — Jun 28

Creating a type safe dictionary in TypeScript

More from Niemvuilaptrinh

Once suspended, haycuoilennao19 will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, haycuoilennao19 will be able to comment and publish posts again.

Once unpublished, all posts by haycuoilennao19 will become hidden and only accessible to themselves.

If haycuoilennao19 is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Niemvuilaptrinh.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag haycuoilennao19:

haycuoilennao19 consistently posts content that violates DEV Community’s code of conduct because it is harassing, offensive or spammy.

Unflagging haycuoilennao19 will restore default visibility to their posts.

DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey.

Built on Forem — the open source software that powers DEV and other inclusive communities.

Made with love and Ruby on Rails. DEV Community © 2016 — 2023.

We’re a place where coders share, stay up-to-date and grow their careers.

Источник