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

Источник

HTML с CSS

CSS экономит много времени. Он может управлять макетом нескольких веб страниц одновременно.

CSS = Стили и Цвета

Что такое CSS?

Каскадные таблицы стилей (CSS) используются для форматирования макета веб страницы.

С помощью CSS вы можете управлять цветом, шрифтом, размером текста, расстоянием между элементами, тем, как элементы расположены и выложены, какие фоновые изображения или цвета фона будут использоваться, различными дисплеями для разных устройств и размеров экрана и многое другое!

Совет: Слово cascading означает, что стиль, примененный к родительскому элементу, будет также применяться ко всем дочерним элементам внутри родительского элемента. Таким образом, если вы установите цвет основного текста на «blue», все заголовки, параграфа и другие текстовые элементы внутри тела также получат тот же цвет (если вы не укажете что-то еще)!

HTML Стили с помощью CSS

CSS — Cascading Style Sheets (Каскадные Таблицы Стилей).

CSS описывает, как HTML элементы будут отображаться на экране, на бумаге, или в других средствах массовой информации.

CSS экономит много времени. Он может контролировать макет нескольких страниц одновременно.

CSS может быть добавлен к элементам HTML 3 способами:

• Встроенный — с помощью атрибута style в HTML элементы
• Внутренний — с помощью элемента в разделе
• Внешний — с помощью внешнего CSS файла

Самый распространенный способ, чтобы добавить CSS, нужно сохранить стили в отдельные файлы CSS. Однако, здесь мы будем использовать встроенные и внутренние стили, потому что это легче продемонстрировать, и проще для Вас, чтобы попробовать это сами.

Совет: Вы можете узнать гораздо больше о CSS в CSS Учебнике.

Встроенный CSS

Встроенный CSS используется, чтобы применить уникальный стиль для одного HTML элемента.

Встроенный CSS использует атрибут стиля элемента HTML.

В данном примере задается синий цвет текста элемента :

Пример

Это синий заголовок

Внутренний CSS

Внутренний CSS стиль используется для одной HTML страницы.

Внутренний CSS определяется в разделе HTML страницы, в элементе :

В следующем примере задается цвет текста всех элементов (на этой странице) до синего цвета, а цвет текста всех элементов

красный. Кроме того, страница будет отображаться с помощью фона «powderblue» :

Пример

Это заголовок

Это параграф.

Внешний CSS

Внешняя таблица стилей используется для нескольких HTML страниц.

Чтобы использовать внешнюю таблицу стилей, нужно добавить ссылку на файл в разделе HTML страницы:

Пример

Это заголовок

Это параграф.

Внешняя таблица стилей может быть написан в любом текстовом редакторе. Файл не должен содержать HTML код, и должен быть сохранен с расширением .css .

Вот как выглядит внешний файл «styles.css» :

Совет: С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб сайта, изменив один файл!

CSS Colors, Fonts и Sizes

Здесь мы продемонстрируем некоторые часто используемые свойства CSS. Вы узнаете о них больше позже.

CSS свойство color определяет цвет текста, который будет использоваться.

CSS свойство font-family определяет семейство шрифтов, который будет использоваться.

CSS свойство font-size определяет размер шрифта, который будет использоваться.

Пример

Свойство Border

CSS свойство border определяет границы вокруг элемента HTML:

Совет: Вы можете определить границу почти для всех HTML элементов.

Пример

Использование свойства CSS border:

Свойство Padding

CSS свойство padding определяет отступ (пробел) между текстом и рамкой:

Пример

Использование свойств CSS border и padding:

Свойство Margin

CSS свойство margin определяет поля (пространства) вне границы:

Пример

Использование свойств CSS border и margin:

Ссылка на внешний CSS

Внешние таблицы стилей могут указать полный URL адрес или относительный путь к текущей веб странице.

Пример

В этом примере используется полный URL адрес для ссылки на таблицу стилей:

Пример

Это пример ссылки на таблицу стилей находится в папке HTML на данном веб сайте:

Пример

Это пример ссылки на таблицу стилей находится в одной папке на той же странице:

Подробнее о путях к файлам вы можете прочитать в главе HTML Путь к файлу.

Подробнее о файлах узнаете в главе HTML Путь к Файлам.

Краткое содержание

• Используйте HTML атрибут style для определения встроенного стиля
• Используйте HTML элемент для определения внутреннего CSS
• Используйте HTML элемент для ссылки на внешний файл CSS
• Используйте HTML элемент для сохранения и элементов
• Используйте CSS свойство color для цвета текста
• Используйте CSS свойство font-family для текста шрифтов
• Используйте CSS свойство font-size для размера текста
• Используйте CSS свойство border для границ
• Используйте CSS свойство padding для пространства внутри границы
• Используйте CSS свойство margin для пространство снаружи границы

Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.

HTML Упражнения

HTML Стиль тегов

Тег	Описание
	Определяет информацию о стиле для HTML документа
	Определяет связь между документом и внешним ресурсом

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Источник