Web development is not an easy task for beginners, to create a web project that standout takes lot of effort, time and vast knowledge in various html elements, CSS properties and JavaScript. I list 200+ resources that will help junior web developers to fill the gaps in knowledge they lack in HTML and CSS. These will definitely help developers to create amazing web projects with less effort and quickly. All the resources listed here are free to use. These resources can be used to understand how CSS works which help to learn CSS quickly. Hope this will help you, Happy Coding.
Table of Contents
CSS Filters
The below site help you to generate CSS filter code. You can adjust various parameters like brightness, contrast etc.
——————————————-
Media Query Generators
The below listed sites help to generate CSS media query codes.
——————————————-
CSS Spinner
Free CSS spinners that can be used in your web projects.
1.Loading.io
2.Tobiashlin
3.Icons8.com
——————————————-
Font Generators / Font Mixers
These links help to play with various fonts, mixing them to create beautiful patters, these patters can be copied to your web projects.
——————————————-
Box shadow
Help to create box shadows using css code.
——————————————-
Meta Tag Generator
These links help to generate meta tags based on your inputs.
——————————————-
Free Favicon Maker
Favicons are small 16×16 icon files that are displayed next to the URL of your site in a browser’s address bar, the below sites helps you to create favicons.
——————————————-
Profile Picture Maker
Websites that help to create profile pictures.
——————————————-
Neumorphism
Neumorphism is a design trend which is marked by minimal and realistic-looking UI. A few sites that help to generate css code for the neumorphism design is listed below.
——————————————-
Dual Tone Creator
The below links help to create dual tone effect using css.
——————————————-
Random Animation Generator
——————————————-
Triangle generator
These links help to generate triangle shapes using html and css, you can use the shape by simply copying the code to your project.
——————————————-
Ribbon / Banner generator
The links help to generate ribbons and banners.
——————————————-
Underline generators
These links help to generate underlines and animations that can be applied on underlines in CSS.
——————————————-
Hamburger Menu Icons
The below links help to generate beautiful hamburger menus icon.
1 .Hamburgers
——————————————-
Table Generator
The links help to create beautiful html tables. The links help to generate both the html code for table and CSS code to style the tables based on your preferences.
——————————————-
Button Generators
The below links will help to design various buttons based on your preferences, these links generate CSS code of your designs, which can be copied into your projects. Various hover effect can also be generated using the links.
——————————————-
Flip Switch
——————————————-
Checkbox Generator
——————————————-
Radio Button Generator
——————————————-
Icons
The below links provide with free icon resources, which can be used in web projects.
——————————————-
Color Gradient Resources
These links help to generate color gradients CSS codes, which can be copy pasted into your web projects.
——————————————-
Color Palette Generator
The below links will help to generate color palette, which can make your web project awesome.
——————————————-
SVG Shape Generator
The below links will help to generate svg shapes, you can generate svg codes for the shapes you created. To add the shapes to your project simply copy paste the codes to your project.
——————————————-
SVG Background Generators
The links below will help you to generate beautiful backgrounds in svg format based on your inputs.
——————————————-
Illustration resources
The below resources will help you to get free illustrations for your web projects.
1. Undraw
2. Draw Kit
3. Indian Doodle
4. Poke
5. open Doodles
6. Lukaszadam
7. IRA Design
8. Mixkit
9. Scale
10. Pulse
11. Gee Me
12. Absurd
13. The Noun project
14. Fresh-folk
15. Rawpixel
16. Webpixels : Eye Pop
17. Delesign
18. Manypixels
19. Icon8
20. Humaans
21. Streamline
22. Lucid
23. Ui8
24. Control.Rocks
25. Niceillustrations
26. Pixel True
27. Isometric
28. Story Set
29. Open Peeps
30. Black illustrations
31. Free Illustrations
32. Illlustrations
33. Getillustrations
——————————————-
CSS Animation Resources
The below resources help you to get CSS code to animate various components of your web projects.
1.The App Guruz
2. CSS animate
3.Animatelo
4.All Animation CSS3
5.CSShake
6.CSSAnimation
7.Hover.CSS
8.Infinite
9.It’s Tuesday
10.Magic
11.Micron
12.Motion UI
13.Obnoxious
14.Reboundgen
15.Rocket
16.Wicked CSS
17.Animista
18.Animate.CSS
19.Keyframes
Awesome CSS Layout Resources For Beginners
Kiran Raj R ・ Apr 18 ・ 2 min read
#webdev
#beginners
#productivity
24 HTML Tags you may not know.
Kiran Raj R ・ May 4 ・ 6 min read
#css
#webdev
#productivity
This content was originally published here.