Forem: Code League

CSS Animated Clock SVG Design using Keyframes

Code League — Mon, 10 Aug 2020 10:51:47 +0000

This Project-based Tutorial is suitable for all especially Beginners. In this Tutorial, we'll build a CSS Animated Clock SVG Design using Keyframes.

📕 SVG download link: https://drive.google.com/drive/folders/1YwkJJHoEK4PXNYo5p70Cnocgi08GvR9y?usp=sharing

🧠 Concepts covered in this video:

Modern Web Design
Animations
CSS Keyframes

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Twitter
Instagram

Creative Product Card Design | E-commerce Card using HTML 5 & CSS 3

Code League — Fri, 07 Aug 2020 08:58:28 +0000

This Project-based Tutorial is suitable for all especially Beginners. In this Tutorial, we'll build an Awesome Product Card UI Design | E-commerce Card Using Html5 & CSS3.

📕 Images download link: https://drive.google.com/drive/folders/10skmAWeZsdw5jOk6iHtJE09052VhlZZe?usp=sharing

🧠 Concepts covered in this video:

Flexbox
Modern Web Design
CSS transitions
Transforms

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Twitter
Instagram

Beautiful Social Media icons with Hover Animation using HTML and CSS

Code League — Mon, 03 Aug 2020 16:46:07 +0000

In this Tutorial, we'll build a Beautiful Social Media icons with Hover Animation using HTML and CSS. This Project-based Tutorial is suitable for all especially Beginners.

📕 Images download link: https://drive.google.com/drive/folders/1WErxy_SOmFL8CZg1BWIQP8ped5As2vV-?usp=sharing

🧠 Concepts covered in this video:

Modern Web Design
Flexbox
Animations
CSS transitions
Transforms

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Twitter
Instagram

Two Animated NavBars with Hover Effects using HTML & CSS

Code League — Fri, 31 Jul 2020 16:57:45 +0000

In this Tutorial, we'll build a Two Animated Navigation Bars with Hover Effects using HTML & CSS Flexbox. This Project-based Tutorial is suitable for all especially Beginners.

📕 Images download link: https://drive.google.com/drive/folders/1A8AYloN3DVe2Oz6a9qSFolDnSjz4peLO?usp=sharing

🧠 Concepts covered in this video:

Modern Web Design
Flexbox
Animations
CSS transitions
Transforms

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

Card Layout Design with Hover Effects using HTML & CSS

Code League — Wed, 29 Jul 2020 15:43:29 +0000

In this Tutorial, we'll build Card UI Design with Hover Effects using HTML & CSS. This Project-based Tutorial is suitable for all especially Beginners. The card also has a zooming effect when we hover on it.

📕 Images download link: https://drive.google.com/drive/folders/16JSUYBA304iS9ijkTlw3CKPiD0RDdlaN?usp=sharing

🧠 Concepts covered in this video:

Flexbox
Opacity
CSS transitions
Transforms
Modern Web Design

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

Buttons With Animated Hover Effects using HTML & CSS only

Code League — Sun, 26 Jul 2020 12:28:24 +0000

In this Tutorial, we'll build Buttons With Animated Hover Effects UI Design using HTML & CSS only. This Project-based Tutorial is suitable for all especially Beginners.

📕 Image download link: https://drive.google.com/drive/folders/1txh7ZCKt6bVtdA7VwyNYQI7A8JTLtUYk?usp=sharing

🧠 Concepts covered in this video:

Flexbox
CSS transitions
Transforms
- Modern Web Design

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

Beautiful Responsive Cards UI Design using HTML & CSS

Code League — Sat, 25 Jul 2020 16:39:28 +0000

In this Tutorial, we'll build a Responsive Cards UI Layout with Hover Effect using HTML & CSS. This Project-based Tutorial is suitable for all especially Beginners.

📕 Images download link: https://drive.google.com/drive/folders/1z7xh5-myGD4p69vRfABTptI6jvLITACs?usp=sharing

🧠 Concepts covered in this video:

Modern Web Design
CSS Grid
Flexbox
CSS transitions
Transforms

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

🚀Responsive About Us Modern Design using HTML, CSS Grid & Flexbox

Code League — Tue, 21 Jul 2020 04:57:35 +0000

In this Tutorial, we'll build a Responsive About Us Section using HTML, CSS Grid & Flexbox. This Project-based Tutorial is suitable for all especially Beginners.

🧠 Concepts covered in this video:

Modern Web Design
CSS Grid
Flexbox
Linear Gradient
Transitions

If you are interested in more real-world project-based tutorials then consider checking out the Code League Youtube channel and inspire the tech industry.

Share this video with a friend

Let’s connect:
Instagram
Twitter

Responsive Testimonial Cards UI Design using HTML and CSS only

Code League — Sun, 19 Jul 2020 06:55:18 +0000

In this Tutorial, we'll build Responsive Testimonial Cards Design using HTML and CSS only. This Project-based Tutorial is suitable for all especially Beginners.

🧠 Concepts covered in this video:

Semantic HTML 5
Modern Web Design
CSS Flexbox
Transforms

SUBSCRIBE our Youtube channel if you want to get notified for more real-world project-based tutorials

Share this video with a friend

Let’s connect:
Instagram
Twitter

Animated Product Card using HTML & CSS | Responsive E-commerce UI Design with Hover Effect [Video Format]

Code League — Thu, 09 Jul 2020 16:34:24 +0000

In this Tutorial, we'll build an Animated Product Card using HTML & CSS | Responsive E-commerce UI Design with Hover Effect. This Project-based Tutorial is suitable for all especially Beginners.

🧠 Concepts covered in this video:

Modern Web Design
CSS Grid
Flexbox
Animations
CSS transitions
Transforms

SUBSCRIBE our Youtube channel if you want to get notified for more real-world project-based tutorials

Share this video with a friend

Let’s connect:
Instagram
Twitter

Responsive Image Slider using Pure HTML & CSS only | Full Screen with Navigation Buttons [Video Format]

Code League — Wed, 08 Jul 2020 17:13:24 +0000

In this Tutorial, we'll build a Full Screen Image Slider using Pure HTML & CSS only | Responsive with Navigation Buttons. This Project-based Tutorial is suitable for all especially Beginners.

📕 Concepts covered in this video:

Modern Web Design
CSS Transforms
Animations
CSS transitions
Box Shadows

SUBSCRIBE our Youtube channel if you want to get notified for more real-world project-based tutorials

Share this video with a friend

Let’s connect:
Twitter
Instagram

Landing Page Header with Animated Login Design | HTML CSS Project Tutorial [Video Format]

Code League — Sun, 05 Jul 2020 16:43:43 +0000

In this 2020 Tutorial, we'll build a Hero Header with Login using pure HTML, CSS & a little JavaScript only. This Project-based Landing Page Design is suitable for all especially beginners.

📕 Concepts covered in this video:

Modern Web Design
CSS Flexbox
Animations
CSS transitions
Clip path
JavaScript DOM
ES6+ Syntax

SUBSCRIBE our Youtube channel if you want to get notified for more real-world project-based tutorials

Share this video with a friend

Let’s connect:
Twitter
Instagram