Welcome to the part 1 of this survival kit!
On the internet, there are many websites and online services to help you with front-end development.However, it is often difficult to navigate all that, especially when you are just starting out.
- Are you looking for informations on the internet and you ddon't know where to look?
- Do you know what the best tools are right now?
- Do you want to know where the pros go to find their inspiration?
Then you are on the right page.
In partnership with Alternative RVB, we have decided to bring you a brand new two-part list of web tools for 2022, with some additions to best prepare you for the coming year.
Most of the tools suggested here are free or open source web applications that we have tested for you and adopted in our working method.
- Online documentation and training
Have some documentations!
- stackoverflow.com: A support forum specialized in programming and development
- openclassrooms.com/fr: A website specialized in web training with diplomas recognized by the state.
- grafikart.fr: A website specialized in programming and web development with training and lots of useful tips. French only
- threejs-journey.com: Training website dedicated to ThreeJS, the library for creating websites with 3D animations. (Subscription : 99€)
- Project management
Manage your project as well as possible with these management and organization tools.
- gitkraken.com: An open source project management tool.
- hackmd.io: A collaborative note-taking and documentation tool in Markdown
- milanote.com: A nice tool that allows you to make mood boards and manage your projects or simply take notes and help with the organization. Very useful for designers.
- trello.com: A project management tool.
- quire.io: A project management tool for teams with the possibility of making to-do-lists or schedules.
- Text editors - IDE - Code
List of useful plugins for VS-CODE
Theme generator for VS-CODE
- oslo-vsc : Allows you to create your own theme for VS-CODE
- Wireframe, Models and prototypes
- Fake texts and Placeholders
Add fake text, fake users and fake images to your client presentations. This will allow you to give your designs a little more pop.
- lipsum.com: Generate substitution text.
Choosing the right colors for your website is essential. With these tools you can quickly test if your colors go well together or not and if they are well suited to the targeted audience.
- paletton.com: Color wheel and color picker.
- color-hex.com: Color wheel and color picker.
- color.adobe.com: Color wheel and color picker.
- leonardocolor.io : Open-source color and contrast generator.
- coolors.co : Color scheme generator with Adobe extensions and chrome.
Accessibility help, calculate the ideal contrast for your background and foreground colors - WCAG Compliant.
Install open-source fonts. No, Dafont is not the solution! :
With the combination of:
- fontjoy.com : Allows you to compare and combine multiple fonts.
- Royalty-free media
Icons and illustrations
- And more …
- Multimedia Tools
Edit photos online
Convert pictures and photos online
- Flarum: Very good fairly young and free forum CMS.
- Discourse: Forum CMS a bit more complicated than Flarum to install but just as powerful.
- Wiki.JS: Forum CMS a bit more complicated than Flarum and Discourse and you need to know a bit of NodeJS to install it but it's very powerful.
- Axeptio: Fun and easy to integrate even on a wordpress installation.
Send files to a client
- Wetransfer: Enables fast transfer and sending of large files
Image sizes for each social network
- socialsizes: Allows you to know the size of the images required for each social platform.