Accessing any of the web development resources that came into your mind might sometimes be a bit pesky when we are developing front-end applications. Time is wasted in order to search for bookmarks, noted on the resources to aid in the development.
Here are some of my personal list of resources in which I can quickly get access to by just revisiting this list and might be helpful for you as well. I will be updating this list from time to time to make it even better.
CSS
CSS is the technology that is powering the entire browser to provide better interface and experience for the user that is viewing it. Its the heart and soul of every piece of web projects. Without CSS, the entire website in the internet will be dull, confusing and error-inducing to a certain extent.
- CSS-Tricks: CSS tips and tricks, blogs and articles.
- CSS Scripts: Loads of sample CSS components ready to be used in any projects.
Design
With CSS, it is still impossible to provide a marvelous user interface without a proper design. Communities have came up with a few guidelines through their immense effort to allow us to quickly kickstart the project that the user will like.
UI/CSS Frameworks
Writing our own CSS and be extremely tedious and verbose. Hence, it is always a good idea to use the popular and delicately crafted UI libraries by talented people in the open source community to concentrate on delivering the features instead of juggling with CSS for half a day just to get some basic styles up.
UI for JS Frameworks
Compared to previous CSS frameworks, these are the component based UI framework that are based on specific JavaScript frameworks.
| Library | Framework | Description |
|---|---|---|
| Angular Material | Angular | Angular implementation of material philosophy |
| Vuetify | Vue | A Vue UI component based library |
| Vue Tailwind | Vue | Vue implementation of Tailwind-based components |
| Material UI | React | React implementation of material philosophy |
| Ant Design | React | Design framework popular in China |
| Chakra UI | React | Blazing fast UI framework for React |
Colors
Colors is essentials for a website to be visually appealing. Website that lack of color can be monotonous; website that are composed of non-harmonius and conflicting colors are appaling. Hence, it is extremely important to have some guided reference to select the appropriate color for your web projects. Below are some helpful links:
- Coolors.co: Color palette generator and scheme suggestions.
Articles:
Fonts
Selecting a proper font is crucial to correctly convey the intended message or vibe of the website. Typography involves a lot of design, psychology in the process to decide the most suitable font to use.
Icons
Icons are common in the modern websites as it provides a certain extent of conceptual understanding for the end users as well as theming, visuals and personality to make them stand out from others.
Previously was using Font Awesome extensively for all of my projects, but stopped recently as I realised that using raw SVGs provides exactly the same outcome with less configuration or installation, whilst empowering user with more low-level controls over the icons used.
Web Gallery
Design is boundless. There are countless creative and well-crafted website out there that successfully leverage the power of design and css to provide a pleasant and immersive to its users through visual hierarchy and profound animations which is really worth to check out and admire those masterpiece.
Utility
Useful tools that are useful sometimes during web development.
| Tools | Description |
|---|---|
| Storybook | A component-driven UI management system for web projects |
| Can I Use | Provides an exhaustive list of browser compatibility information based on CSS feature provided |
| Lorem Ipsum | A dummy text generator for mocking contents in a page |
| Lorem Picsum | Random image provider that can be used as placeholder for image contents in webpage |
3D-rendering
Make your website more appealing by incorporating 3D models and animations that are identical to game production.
Materials
Useful websites that provides decent amount of knowledges for learning for a particular topic.
| Category | Materials |
|---|---|
| UI/UX | Interaction Design |
Images/Photos
Media repositories that consists thousands of free images or other media that can be used in projects.