Germanov Dev
Germanov Dev
  • 55
  • 90 300
How to create a fancy day/night switch using HTML, CSS and JavaScript
In this lesson, I show how to redesign the basic ON/OFF switch to a fancy day/night switcher, which I created on day 85 of the 100 Days of Code challenge. You can find the work itself here:
design.germanov.dev/solution85/
The source code available here:
design.germanov.dev/solution85/switch.zip
Because this lesson is based on the ON/OFF switch, that we created on the first lesson, I highly encourage you to watch the first lesson first:
ua-cam.com/video/OhXVBi0IJik/v-deo.html
Переглядів: 311

Відео

Responsive Page Footer design - https://design.germanov.dev/solution61/0:26Responsive Page Footer design - https://design.germanov.dev/solution61/
Responsive Page Footer design - https://design.germanov.dev/solution61/
Переглядів 59 місяців тому
Responsive Page Footer design - design.germanov.dev/solution61/
Custom responsive number input - https://design.germanov.dev/solution68/0:40Custom responsive number input - https://design.germanov.dev/solution68/
Custom responsive number input - https://design.germanov.dev/solution68/
Переглядів 889 місяців тому
Custom responsive number input - design.germanov.dev/solution68/
Custom Range selector widget - https://design.germanov.dev/solution62/0:28Custom Range selector widget - https://design.germanov.dev/solution62/
Custom Range selector widget - https://design.germanov.dev/solution62/
Переглядів 269 місяців тому
Custom Range selector widget - design.germanov.dev/solution62/
How to create a custom switch from scratch using HTML, CSS and JavaScript25:57How to create a custom switch from scratch using HTML, CSS and JavaScript
How to create a custom switch from scratch using HTML, CSS and JavaScript
Переглядів 1339 місяців тому
This is a first video from my #100daysofcode challenge series in frontend web development. During this challenge, I created 100 frontend projects, using different technologies. Now I want to share the knowledge that I got. I am going to show how I created the most interesting works from the challenge by recording video lessons about them. So, if you are interested in a frontend web development,...
Messaging App design - https://design.germanov.dev/solution97/0:30Messaging App design - https://design.germanov.dev/solution97/
Messaging App design - https://design.germanov.dev/solution97/
Переглядів 129 місяців тому
Messaging App design - design.germanov.dev/solution97/
Chat room design: https://design.germanov.dev/solution96/0:42Chat room design: https://design.germanov.dev/solution96/
Chat room design: https://design.germanov.dev/solution96/
Переглядів 139 місяців тому
Chat room design: design.germanov.dev/solution96/
Single Product Page design: https://design.germanov.dev/solution95/0:28Single Product Page design: https://design.germanov.dev/solution95/
Single Product Page design: https://design.germanov.dev/solution95/
Переглядів 710 місяців тому
Single Product Page design: design.germanov.dev/solution95/
Teeth caries detection using YOLOv8 neural network1:00Teeth caries detection using YOLOv8 neural network
Teeth caries detection using YOLOv8 neural network
Переглядів 99511 місяців тому
Teeth caries detection using YOLOv8 neural network
YOLOv8 object detection and segmentation using Rust0:16YOLOv8 object detection and segmentation using Rust
YOLOv8 object detection and segmentation using Rust
Переглядів 86711 місяців тому
YOLOv8 object detection and segmentation using Rust
Remove background from any object using Segment Anything network in Smart Image Cleaner10:11Remove background from any object using Segment Anything network in Smart Image Cleaner
Remove background from any object using Segment Anything network in Smart Image Cleaner
Переглядів 460Рік тому
Remove background from any object using Segment Anything network in Smart Image Cleaner
Touchless quiz web application. Just show fingers to a web camera and AI will do the rest.1:29Touchless quiz web application. Just show fingers to a web camera and AI will do the rest.
Touchless quiz web application. Just show fingers to a web camera and AI will do the rest.
Переглядів 163Рік тому
Touchless quiz web application. Just show fingers to a web camera and AI will do the rest.
YOLOv8 segmentation using Ultralytics API6:28YOLOv8 segmentation using Ultralytics API
YOLOv8 segmentation using Ultralytics API
Переглядів 1,1 тис.Рік тому
YOLOv8 segmentation using Ultralytics API
YOLOv8 segmentation using ONNX Runtime27:12YOLOv8 segmentation using ONNX Runtime
YOLOv8 segmentation using ONNX Runtime
Переглядів 3,3 тис.Рік тому
YOLOv8 segmentation using ONNX Runtime
Using Roboflow to prepare dataset for YOLOv8 instance segmentation4:08Using Roboflow to prepare dataset for YOLOv8 instance segmentation
Using Roboflow to prepare dataset for YOLOv8 instance segmentation
Переглядів 7 тис.Рік тому
Using Roboflow to prepare dataset for YOLOv8 instance segmentation
YOLOv8 instance segmentation web application demo0:38YOLOv8 instance segmentation web application demo
YOLOv8 instance segmentation web application demo
Переглядів 954Рік тому
YOLOv8 instance segmentation web application demo
Automated purchase data entry from paper receipt to MySQL database using AI2:14Automated purchase data entry from paper receipt to MySQL database using AI
Automated purchase data entry from paper receipt to MySQL database using AI
Переглядів 342Рік тому
Automated purchase data entry from paper receipt to MySQL database using AI
Detect objects in videos in a web browser using YOLOv8 neural network and JavaScript.0:30Detect objects in videos in a web browser using YOLOv8 neural network and JavaScript.
Detect objects in videos in a web browser using YOLOv8 neural network and JavaScript.
Переглядів 3,5 тис.Рік тому
Detect objects in videos in a web browser using YOLOv8 neural network and JavaScript.
Contours detection in Smart Image Cleaner1:29Contours detection in Smart Image Cleaner
Contours detection in Smart Image Cleaner
Переглядів 37Рік тому
Contours detection in Smart Image Cleaner
An object detector web service that uses YOLOv8 neural network to detect traffic lights on images.1:18An object detector web service that uses YOLOv8 neural network to detect traffic lights on images.
An object detector web service that uses YOLOv8 neural network to detect traffic lights on images.
Переглядів 4,6 тис.Рік тому
An object detector web service that uses YOLOv8 neural network to detect traffic lights on images.
How to train a YOLOv8 neural network model12:30How to train a YOLOv8 neural network model
How to train a YOLOv8 neural network model
Переглядів 6 тис.Рік тому
How to train a YOLOv8 neural network model
Using the Roboflow to prepare images dataset to train custom YOLOv8 model8:52Using the Roboflow to prepare images dataset to train custom YOLOv8 model
Using the Roboflow to prepare images dataset to train custom YOLOv8 model
Переглядів 30 тис.Рік тому
Using the Roboflow to prepare images dataset to train custom YOLOv8 model
Getting started with YOLOv85:39Getting started with YOLOv8
Getting started with YOLOv8
Переглядів 13 тис.Рік тому
Getting started with YOLOv8
Using different neural networks to remove background from image in Smart Image Cleaner4:52Using different neural networks to remove background from image in Smart Image Cleaner
Using different neural networks to remove background from image in Smart Image Cleaner
Переглядів 85Рік тому
Using different neural networks to remove background from image in Smart Image Cleaner
Smart Image Cleaner Chrome Extension Demo3:09Smart Image Cleaner Chrome Extension Demo
Smart Image Cleaner Chrome Extension Demo
Переглядів 673Рік тому
Smart Image Cleaner Chrome Extension Demo
Smart Image Cleaner demo video7:34Smart Image Cleaner demo video
Smart Image Cleaner demo video
Переглядів 94Рік тому
Smart Image Cleaner demo video
Handwritten phone numbers recognizer0:53Handwritten phone numbers recognizer
Handwritten phone numbers recognizer
Переглядів 502Рік тому
Handwritten phone numbers recognizer
Install Julia and integrate to Jupyter notebooks3:38Install Julia and integrate to Jupyter notebooks
Install Julia and integrate to Jupyter notebooks
Переглядів 1,7 тис.Рік тому
Install Julia and integrate to Jupyter notebooks
Batch image upload feature for Image Reader1:54Batch image upload feature for Image Reader
Batch image upload feature for Image Reader
Переглядів 362 роки тому
Batch image upload feature for Image Reader
The "Convert to path" SmartShape feature can be used to drill holes inside polygons.2:25The "Convert to path" SmartShape feature can be used to drill holes inside polygons.
The "Convert to path" SmartShape feature can be used to drill holes inside polygons.
Переглядів 162 роки тому
The "Convert to path" SmartShape feature can be used to drill holes inside polygons.