DEV Community

loading...

Web development Programming Resources

delightfullynerdy profile image Delightfully Nerdy Updated on ・4 min read

Color theory (UI)

  1. Adobe color : helps create color palette and uses the color wheel

  2. Color Hunt: Color Hunt is a free and open platform for color inspiration with thousands of trendy hand-picked color palettes

Color picker

  1. Colorzilla : a Google Chrome and Mozilla extension that assists web developers and graphic designers with color related and other tasks

UI Inspiration

  1. Awwwards :
    The awards of design, creativity and innovation on the internet

  2. Dribble : Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals.

  3. UI patterns: User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

  4. Collect UI: Daily inspiration collected from daily ui archive and beyond. Hand picked, updating daily.

Design your UI

  1. Sneakpeakit:Printable Grids for Design Wireframing

  2. Balsimiq: Fast, Approachable, Collaborative Wireframing

Graphics Design

  1. Canva: Canva is a graphic design platform, used to create social media graphics, presentations, posters, documents and other visual content.

Free images, vector images and gifs

  1. Piki Wizard : Stunning library of over 1 million stock images and videos.
    Royalty free and safe for commercial use, with no attribution required

  2. Free Illustrations : Free to use illustrations and vectors

  3. Giphy: Search for all GIFS and generate your own animated gifs

Typography

  1. CSS font stack: Web safe and Web Font family with HTML and CSS code - check how usability of font on given OS

  2. Google fonts: Share and integrate typography into any design project seamlessly—no matter where you are in the world

Icons

  1. Line Awesome : Alternative of Font Awesome Contains modern line icons .

  2. CssIcons: Open-source CSS, SVG and Figma UI Icons. Available in SVG Sprite, styled-components, NPM & API

  3. Flat Icon: The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.

  4. Font Awesome: Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

Favicon Generator

  1. Favicon generator : generate and draw desired favicons

Random text generator

  1. Lorem Impsum: Generator, origins and meanings

  2. Lipsum:All the facts - Lipsum generator

CSS Helpers

  1. CSS Button Generator : Imageless CSS Button Creator

  2. Bootsnip : Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework

Front End Frameworks

  1. Bootstrap: 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 pre-built components, and powerful JavaScript plugins.

Coding play grounds

  1. Code Pen : CodePen is a social development environment. Write code in the browser, and see the results of it as you build. Online code editor for developers of any skill, and particularly empowering for people learning to code. Primarily focuses on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

  2. Code Ply: Codeply is the free editor that's integrated with top frameworks like Bootstrap, React, Materialize, and UIKit. Codeply makes responsive Web design & frontend development easier by enabling you to leverage the modern frameworks of your choice. Choose libraries, layouts & snippets right from the editor.

Documentation

  1. MDN Web Docs: A global community of technologists, thinkers and builders working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web.

  2. W3Schools: W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

  3. Idiomatic JavaScript: Principles of Writing Consistent, Idiomatic JavaScript

Coding Challenges

  1. Front End code Mentor : Improve your front-end coding skills by building real projects

  2. Code golf and challenges : Code Golf Stack Exchange is a question and answer site for programming puzzle enthusiasts and code golfers.

  3. Daily UI: Daily UI is a series of daily design challenges design inspiration and neat surprise rewards.

Testing your site

  1. Mobile Friendly Test : Test how easily a visitor can use your page on a mobile device. Just enter a page URL to see how your page scores.

Debugging and fixing errors

  1. Stack Overflow :asynchronous knowledge management and collaboration offering developers and technologists write the script of the future

Other (plugins)

  1. Code Stream: CodeStream supercharges development workflows by putting collaboration tools in your IDE. It supports pull requests from GitHub, BitBucket and GitLab, issue management from Jira, Trello, Asana and 9 others, and provides code discussion that ties it all together, integrated with Slack, MS Teams, email, and in-editor notifications

Discussion (0)

pic
Editor guide