Ihatesignup
New Member
Hi community,
everyone starts small, but even the experienced web developer makes his life easier by using resources that are freely accessible on the Internet.
Here are some of them...
CSS helper
Bear CSS is a handy little tool for web designers. It generates a CSS template with all the HTML elements, classes and IDs defined in your markup.
www.cssmatic.com
A collection of different CSS generators for e.g. gradients, border radius etc. So it is more for beginners who are not yet able to program or style fluently with CSS.
For me the very best site to learn everything from A-Z about CSS3 and to find examples. It is ideal for beginners, but also for professionals to refresh their knowledge.
www.css3maker.com
Another collection of CSS3 helpers and code generators that is very extensive and is more for beginners.
Ready scripts
codyhouse.co
One of my personal favorite sites when it comes to good ideas and finished snippets. There you will find high-quality code snippets and templates for free.
tympanus.net
Here you have a large selection of ready-made scripts, templates and experiments that you can use for your own projects.
Codepen is not only a playground for creating code snippets, but you can also find lots of code snippets for your own project there.
Code beautifier and optimizer
I don't need to say anything more about the code beautification tools, because they do exactly that, they improve and beautify your code.
ctrlq.org
beautifier.io
Resources for icons and images
www.iconfinder.com
There you can search and find icons for your project and many of them are free to use.
www.iconarchive.com
Another good source for icons.
www.prodraw.net
An icon and favicon generator
www.freepik.com
One of the best sources to get free stock images and vector graphics.
Tutorials and things to know
tympanus.net
There you will find detailed instructions on common web development and web design techniques.
1stwebdesigner.com
A super comprehensive tutorial to convert Photoshop PSD files into HTML templates. You can find tons of other good tutorials on this site.
developers.google.com
Uncle Google's knowledge and example database. Here the webmaster will find everything worth knowing about web design but unfortunately also a lot of blahhh blahh. Just Google, so extensive that it hurts 
Development environment, editor
www.koding.com
Koding provides developers and team managers with an interface to streamline development workflows in the cloud without sacrificing freedom and creativity.
github.com
GitHub is not only ideal for hosting and administering projects, but also offers extensive projects, templates or tutorials that you can enrich yourself with 
www.layoutit.com
A bootstrap editor to create new templates. Everything is drag & drop and super easy to handle.
Have fun with your next project.

everyone starts small, but even the experienced web developer makes his life easier by using resources that are freely accessible on the Internet.
Here are some of them...
CSS helper
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
bearcss.com
The ultimate CSS tools for web designers | CSSmatic


Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
Toptal's CSS3 Generator Tool allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.

Ready scripts

CodyHouse | Web Design Nuggets
CodyHouse is an arsenal of production-ready components and tools that empower web designers to craft digital experiences faster and better.
Playground | Codrops
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.

Codepen is not only a playground for creating code snippets, but you can also find lots of code snippets for your own project there.
Code beautifier and optimizer
I don't need to say anything more about the code beautification tools, because they do exactly that, they improve and beautify your code.

Online Code Beautifier for JavaScript, JSON, HTML, CSS and PHP
With Code Beautifier, you can pretty-print and syntax highlight source code written in JavaScript, JSON, Python, HTML, CSS, PHP and other programming languages.

Online JavaScript beautifier

Resources for icons and images

8,425,000+ free and premium vector icons, illustrations and 3D illustrations
Iconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.

Icon Archive - 800,000+ free icons & stickers, PNG, SVG Downloads
Discover 800,000+ free icons. Browse icons by category, artist, popularity, date. PNG, SVG, ICO files. Share your favorites via Twitter or WhatsApp.


Free Online Icon Generator | Convert Image to *.ICO File
Creat FavIcon.ico (favorites icon) from your favorites logo, image, pic and photo files

Freepik | Create great designs, faster
Millions of free graphic resources. ✓ Photos ✓ AI images ✓ Vectors ✓ Icons ✓ Templates ✓ Videos. Find out about our real-time AI art generator. #freepik
Tutorials and things to know
Tutorials | Codrops
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques.


The Most Detailed PSD to HTML Tutorial
With our Photoshop PSD to Responsive HTML Web Design video course, you will learn how to design and code a website from scratch. PSD to HTML doesn't get easier than this!


Web Development Products & Tools - Google for Developers
Create fast, secure sites and apps for the open web. Check out our web app development tools to build modern websites using the latest technologies.


Development environment, editor

Modern Dev Environment Delivered · Koding | Modern Dev Environment Delivered · Koding
Instantly create, share, scale, and manage development environments.


GitHub · Build and ship software on a single, collaborative platform
Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.


LayoutIt! - Interface Builder for CSS Grid and Bootstrap
LayoutIt! is a interface builder for CSS Grid and Bootstrap that wants to be the kick-off for your front-end developments.

Have fun with your next project.

