Web and Mobile Programming Resources

Color theory (UI) | Color picker

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

3. Brand Color : The biggest collection of official brand color codes around.

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

5. ColorSpace : Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everything that has to do with color!

6. Web Gradients : WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient.
   As a bonus, there are packs for Sketch & Photoshop.

Content Delivery Networks

1. Google Hosted Libraries:The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.
   Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released.

2. CDNjs :cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare.

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.

5. Designspiration : Designspiration is committed to being the best product that it can.

6. Screenlane: Screenlane is a website and newsletter that features the latest mobile design inspiration

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.

2. RemoveBg: Remove backgrounds 100% automatically in 5 seconds with zero clicks. There are approximately 20 million more interesting activities than removing backgrounds by hand. Thanks to remove.bg's clever AI, you can slash editing time - and have more fun!

3. Designify: Designify combines the world's most advanced visual AI's into one simple tool. Remove image backgrounds with the highest quality standards, add realistic shadows to objects and enhance colors to create unparalleled designs by using artificial intelligence.
   More magic is coming soon.

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

4. GraphicBurger: GraphicBurger is a buffet of premium quality design resources offered for free to the community. Here you’ll find exclusive PSD files “cooked” in-house along with featured top-notch freebies from creatives around the world.

5. Freestock:Freestock is your source for thousands of FREE stock photos, vectors & more. Curated with care and FREE forever.

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

3. Font Space: FontSpace is a designer-centered font website that has quick customizable previews and hassle-free downloads. Every font is added and categorized by a real person. Each font is reviewed by a FontSpace moderator, checked for font quality issues, and licenses are verified.

4. Adobe Typekit: Typekit is an online service which offers a subscription library of high-quality fonts. The fonts may be used directly on websites or synced via Adobe Creative Cloud to applications on the subscriber's computers

5. Calligraphr: Transform your handwriting or calligraphy into a font!
   Creating your own font has never been easier. With your own font you can create genuine personal designs and calligraphic artwork.

6. Pexels: Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages.

7. Pixabay: Pixabay.com is a free stock photography and royalty-free stock media website. It is used for sharing photos, illustrations, vector graphics, film footage, and music, exclusively under the custom Pixabay license, which generally allows the free use of the material with some restrictions.

8. Motion Elements: MotionElements is Asia’s leading microstock marketplace for video makers worldwide. It offers a fully localized experience for stock media buyers and sellers across Asia and the world. The vibrant marketplace offers everything from stock videos, music, 3D models, After Effects and Apple Motion templates bundled with MotionElements’ transparent, royalty-free licensing.

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.

2. React Bootstrap: Get to know more about the team maintaining React Bootstrap. Learn a little history of how, why and when the project started and how you can be a part of it.

3. Bootswatch :Free themes for Bootstrap

Sytax and formatting

1. Minify: This minifier removes whitespace, strips comments, combines files, and optimizes/shortens a few common programming patterns. And it comes with a huge test suite.

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.

3. JS Fiddle: A coding playground available to every developer, of every framework

4. Regex Expressions: Build , test and debug Regex

5. Programiz : Learn to code with our beginner-friendly tutorials and examples. Read interactive tutorials, and write and test your code to learn programming.

6. Thonny :Python IDE for beginners

7. Live Dom Viewer: View Dom View of document

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

4. Django : Django makes it easier to build better web apps more quickly and with less code.

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.

4. Interviewing.io : Anonymous mock interviews with engineers from Amazon, Google, Facebook, and other top companies
   Get better at algorithmic and systems design problems, and get detailed feedback on exactly what you need to work on.

5. LeetCode: LeetCode is the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews.

Testing your Code

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.

2. CanIUse: "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

3. HTML5 Please: HTML5 Please helps you out with recommendations for polyfills and implementation so you can decide if and how to put each of these features to use. The recommendations below represent the collective knowledge of developers who have been deep in the HTML5 trenches. We hope they serve you well.

4. CSS Validation Service: CSS Validation Service. Interested in "developing" your developer skills? In W3Cx's hands-on Professional Certificate Program, learn how to code the right way by creating Web sites and apps that use the latest Web standards.

Test API's and Development Environments

1. Mail Trap: Capture SMTP traffic from staging and dev environments. Automate test flows and scenarios with flexible API. Analyze email content for spam score and validate HTML/CSS

2. Edamam: We are about eating better. Our goal is to capture the world's food knowledge and distill it to help you make informed choices at the store and in the kitchen.

3. Spoonacular: spoonacular will be the first food management system that combines dining out, eating store-bought food, and cooking at home to help you find and organize the restaurants, products, and recipes that fit your diet and can help you reach your nutrition goals.

4. Temp Mail:Temp Mail Is a free temporary email service that allows to receive email at a temporary address.Disposable Temporary Email Protect your personal email address from spam, bots, phishing.

Syntax and formating

1. Minify : This minifier removes whitespace, strips comments, combines files, and optimizes/shortens a few common programming patterns. And it comes with a huge test suite.

2. ESLint:ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

3. CheckStyle : Checkstyle is a development tool to help programmers write Java code that adheres to a coding standard. It automates the process of checking Java code to spare humans of this boring (but important) task. This makes it ideal for projects that want to enforce a coding standard.

4. Prettier: Prettier is an opinionated code formatter with support for: JavaScript (including experimental features), JSX, Angular, Vue, Flow, TypeScript, CSS, Less, and SCSS, HTML, Ember/Handlebars, JSON, GraphQL, Markdown, including GFM and MDX and YAML
   It removes all original styling* and ensures that all outputted code conforms to a consistent style.Prettier takes your code and reprints it from scratch by taking the line length into account.

Debugging and fixing errors

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

Learn to Code

1. Pluralsight:The technology workforce development company At Pluralsight, we believe everyone should have the opportunity to create progress through technology and develop the skills of tomorrow. With assessments, learning paths and courses authored by industry experts, our platform helps businesses and individuals benchmark expertise across roles, speed up release cycles and build reliable, secure products.

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

Customisable websites / blogs

1. WordPress.com: At WordPress.com, our mission is to democratize publishing and eCommerce one website at a time.
   We’re a hosted version of the open source software, WordPress. Because when you have the freedom to create, express yourself, and earn money online, the impossible becomes business as usual.

2. Ghost: We're a proud non-profit organisation building open source technology for journalism
   Ghost was founded in April 2013, after a very successful Kickstarter campaign to create a new platform focused solely on professional publishing. Our mission is to create the best open source tools for independent journalists and writers across the world, and have a real impact on the future of online media.

3. Wix: Our powerful technology allows everyone to get online with a personalised, professional web presence. Whether it’s your first time creating or you’re a long time expert, you’ll find the features and solutions you need to build a professional website with total creative freedom.

Testing code

1. Html Validator: The Markup Validator is a free service by W3C that helps check the validity of Web documents.Most Web documents are written using markup languages, such as HTML or XHTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.

Web Standards

1. World Wide Web Consortium : The World Wide Web Consortium (W3C) is an international community that develops open standards to ensure the long-term growth of the Web.

Scheduling & Publishing Tools

1. Publer :Publer is a social media management platform that allows you to collaborate, schedule & analyze your posts on Facebook, Instagram, TikTok, Twitter, LinkedIn, Pinterest, Google Business, YouTube, WordPress, and Telegram from the same spot.