In this video, we will learn how we can create complex animations using CSS Keyframes. We will make use of the @keyframes CSS rule to define the percentage of time through a timing sequence.
Now some of the featured courses on their website are :
1. Learn Responsive Design
This course takes you on a journey through the many facets of modern responsive web design. The first few modules will ease you in with a history of where responsive design came from and a look at the fundamentals of responsive layouts. From there, you’ll learn about responsive images, typography, accessibility and more.
Along the way you’ll find out how to make websites responsive to user preferences and device capabilities. By the end, you’ll also have an understanding of what the future might hold for responsive design.
Each module has demos and self-assessments for you to test your knowledge.
This course is created for beginner and intermediate designers and developers. A basic understanding of HTML and CSS should be enough. You don’t need to know any JavaScript. If you’re completely new to making websites, there’s an introduction to HTML and another course to help you learn CSS.
2. Learn Forms
This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you’ll learn how an HTML form works and how to use them effectively in your projects. Use the menu pane by the Learn Forms logo to navigate the modules.
You’ll learn how to build a basic HTML form, about HTML form elements, styling forms, help users re-entering data, ensuring the form is accessible, and secure, how to test your forms, and about specific form types.
Each module is full of interactive demos and self-assessments for you to test your knowledge.
This course is suitable for beginners and advanced HTML developers. The first few modules help you get started with building HTML forms, the other modules give more detail. You can go through the series from start to finish to get a general understanding of HTML forms, or pick a specific module you want to learn more about.
3. Learn Progressive Web Apps
This course covers the fundamentals of Progressive Web App development into easy-to-understand pieces. Over the following modules, you’ll learn what a Progressive Web App is, how to create one or upgrade your existing web content, and how to add all the pieces for an offline, installable app. Use the menu pane by the “Learn PWA” logo to navigate the modules.
You’ll learn PWA fundamentals like the Web App Manifest, Service Workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.
Each module includes interactive demos and self-assessments for you to test your knowledge. You will be able to test and try demos on your mobile phone, tablet, or laptop while playing with the code to understand the fundamentals of what makes a Progressive Web App.
This course is created for a beginner and advanced web developers alike. You can go through the series from start to finish to get a general understanding of PWA from top to bottom, or you can use it as a reference for specific subjects. For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along. Check out Learn CSS, and the HTML and JavaScript courses on MDN.
4. Learn CSS
This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you’ll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the “Learn CSS” logo to navigate the modules.
You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.
Each module is full of interactive demos and self-assessments for you to test your knowledge. In addition to learning through reading and demos, there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.
This course is created for beginner and advanced CSS developers alike. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out the intro to HTML course from MDN to learn all about how to write markup and link your stylesheets.
So this is it for this article. Thanks for reading.
If you enjoy my articles, consider following me on Twitter for more interesting stuff :
⚡Twitter : https://twitter.com/The_Nerdy_Dev
Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.
I recently started to create a Full Web Developer Course on my YouTube Channel and recently finished with the HTML and the CSS Section of this FREE course. More videos will be up on upload.
HTML Section
CSS Section
JavaScript Section
This section covers the basics of JavaScript along with the modern features that the language offers. We cover concepts like :
Demystifying Async Await, From Promises to Async Await
Scopes in JavaScript, Closures
Symbols in JavaScript
Iterators and Generators in JavaScript
The Concept of Pure and Impure Functions in JavaScript
Understanding Hoisting in JavaScript
AND MORE….
A lot of exercises and projects were made in this section of the course.
Here are the Projects that we made in this JavaScript Section :
Building COVID-19 Tracker Application using JavaScript and Mapbox
Making a Todo List Application in JavaScript using Custom Events
Implementation of Infinite Scroll in JavaScript
10 JavaScript Projects in 2 Hours
Node.js Section COMING SOON
MongoDB Section COMING SOON
Make sure to subscribe to the channel for more such videos. A lot of AWESOME videos are coming this month… So make sure to SUBSCRIBE to the channel for more amazing videos.
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
2. Foundation
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
Bulma is the modern CSS framework that just works. Bulma is a free, open source framework that provides ready-to-use frontend components that you can easily combine to build responsive web interfaces.
Link :
https://bulma.io
4. Tailwind CSS
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Link :
https://tailwindcss.com/
5. UIkit
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
So this is it for this article. Thanks for reading. Don’t forget to leave a like if you loved the article. Also share it with your friends and colleagues.