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!
Documentations
- w3schools.com & whatwg.org: HTML / CSS / JavaScript documentations
- developer.mozilla.org: HTML / CSS / JavaScript documentations
- stackoverflow.com: A support forum specialized in programming and development
Formations
- 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
- vs-code
- Sublime Text
- Atom
- Code sandbox : This allows team and live code management via the browser
List of useful plugins for VS-CODE
Also find a non-exhaustive list of plugins for vs-code, prepared by Alternative RVB.
Theme generator for VS-CODE
- oslo-vsc : Allows you to create your own theme for VS-CODE
- Wireframe, Models and prototypes
- Figma: Allows you to create mock-up and prototypes of websites for free.
- Adobe XD: Mock-up and prototype of sites but not free.
- Google drawings: Create simple visuals and relationship diagrams.
- Google slider: Create simple visuals and relationship diagrams as a slideshow.
- Mockflow: Wireframe.
- 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.
Fake texts
- lipsum.com: Generate substitution text.
Fake users
- randomuser.me: List of user pictures for mockups.
- pravatar.cc: List of user pictures for mockups.
Fake images
- loremflickr.com: Get substitution images.
- placeholder.com: Get substitution images.
- Colors
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.
- contrastchecker.com
- whocanuse.com: Lets you know if your colors are suitable for each type of visual impairment.
- Fonts
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
Pictures
Icons and illustrations
- boxicons.com
- icons8.com
- undraw.co
- manypixels.co
- absurd.design
- icomoon.io
- iconstore.co
- fontawesome.com
- thenounproject.com
- ionic.io
- And more …
Videos
SVG
3D textures
- polyhaven: Allows you to find 3D textures in 4K +
- 3dtextures: Allows you to find 3D textures
- Multimedia Tools
Edit photos online
Convert pictures and photos online
- squoosh.app: An online image converter.
- For console fans there is: https://pandoc.org/
Forum CMS
- 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.
Cookie Manager
- 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.
