{"id":7287,"date":"2024-02-01T16:56:22","date_gmt":"2024-02-01T15:56:22","guid":{"rendered":"https:\/\/solanor.fr\/?p=7287"},"modified":"2024-02-01T17:00:10","modified_gmt":"2024-02-01T16:00:10","slug":"the-web-survival-kit-2024-part-1","status":"publish","type":"post","link":"https:\/\/solanor.fr\/en\/2024\/02\/01\/the-web-survival-kit-2024-part-1\/","title":{"rendered":"The web survival kit 2024 part.1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7287\" class=\"elementor elementor-7287\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d90a80 animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"1d90a80\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e7799b6\" data-id=\"e7799b6\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d25638b elementor-invisible elementor-widget elementor-widget-pix-text\" data-id=\"d25638b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-text.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"pix-el-text w-100 text-left \" ><p class=\" resp-option  text-left \" ><span class=\" animate-in d-inline-block\" data-anim-delay=\"0\" data-anim-type=\"fade-in-up\"><strong>Welcome to the part 1 of this survival kit!<br><br>\n\nOn 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.<\/strong><br><br>\n\n- Are you looking for informations on the internet and you ddon't know where to look?<br>- Do you know what the best tools are right now?<br>- Do you want to know where the pros go to find their inspiration? <br><br>\n\nThen you are on the right page.<br><br>\n\nIn partnership with <a target=\"_blank\" href=\"https:\/\/www.alternative-rvb.com\/\" rel=\"nofollow noopener\">Alternative RVB<\/a>, 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.<br><br>\n\nMost of the tools suggested here are free or open source web applications that we have tested for you and adopted in our working method.\n\n\n<\/span><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9e5acaa animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"9e5acaa\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9cfc833\" data-id=\"9cfc833\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8c55888 elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"8c55888\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Online documentation and training<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a24326 elementor-widget elementor-widget-html\" data-id=\"6a24326\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p>Have some documentations! <\/p>\n<h6>Documentations<\/h6>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.w3schools.com\/\" rel=\"nofollow noopener\">w3schools.com<\/a> &amp; <a href=\"https:\/\/whatwg.org\/\" rel=\"nofollow noopener\" target=\"_blank\">whatwg.org<\/a>: HTML \/ CSS \/ JavaScript documentations<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/fr\/\" rel=\"nofollow noopener\">developer.mozilla.org<\/a>: HTML \/ CSS \/ JavaScript documentations<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/stackoverflow.com\/\" rel=\"nofollow noopener\">stackoverflow.com<\/a>: A support forum specialized in programming and development<\/li><\/ul>\n<h6>Formations<\/h6>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/openclassrooms.com\/fr\/\" rel=\"nofollow noopener\">openclassrooms.com\/fr<\/a>: A website specialized in web training with diplomas recognized by the state.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/grafikart.fr\/\" rel=\"nofollow noopener\">grafikart.fr<\/a>: A website specialized in programming and web development with training and lots of useful tips. French only<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/threejs-journey.com\/\" rel=\"nofollow noopener\">threejs-journey.com<\/a>: Training website dedicated to ThreeJS, the library for creating websites with 3D animations. <strong>(Subscription : 99\u20ac)<\/strong><\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c1ddbcb animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"c1ddbcb\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-09776bf\" data-id=\"09776bf\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-108a145 elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"108a145\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Project management<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef0fb2b elementor-widget elementor-widget-html\" data-id=\"ef0fb2b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p>Manage your project as well as possible with these management and organization tools.<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.gitkraken.com\/glo\" rel=\"nofollow noopener\">gitkraken.com<\/a>: An open source project management tool.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/hackmd.io\/\" rel=\"nofollow noopener\">hackmd.io<\/a>: A collaborative note-taking and documentation tool in Markdown<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/milanote.com\/\" rel=\"nofollow noopener\">milanote.com<\/a>: 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.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/trello.com\" rel=\"nofollow noopener\">trello.com<\/a>: A project management tool.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/quire.io\" rel=\"nofollow noopener\">quire.io<\/a>: A project management tool for teams with the possibility of making to-do-lists or schedules.<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fe2e193 animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"fe2e193\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c8cfff5\" data-id=\"c8cfff5\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1f1e00c elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"1f1e00c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Text editors - IDE - Code<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ee05ff elementor-widget elementor-widget-html\" data-id=\"2ee05ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\tThese IDEs are the best known ones. You can also learn from Alternative RVB some <a target=\"_blank\" href=\"https:\/\/hackmd.io\/@alternative-rvb\/raccourcis-windows-10\" rel=\"nofollow noopener\">Windows shortcuts<\/a>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/\" rel=\"nofollow noopener\">vs-code<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.sublimetext.com\/\" rel=\"nofollow noopener\">Sublime Text<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/atom.io\/\" rel=\"nofollow noopener\">Atom<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/codesandbox.io\/\" rel=\"nofollow noopener\">Code sandbox<\/a> : This allows team and live code management via the browser<\/li>\n<\/ul>\n\n<h6>List of useful plugins for VS-CODE<\/h6>\n\n<p>Also find a non-exhaustive list of <a target=\"_blank\" href=\"https:\/\/hackmd.io\/@alternative-rvb\/plugins-vs-code\" rel=\"nofollow noopener\">plugins for vs-code<\/a>, prepared by <a target=\"_blank\" href=\"https:\/\/www.alternative-rvb.com\/\" rel=\"nofollow noopener\">Alternative RVB.<\/a><\/p>\n\n<h6>Theme generator for VS-CODE<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/oslo-vsc.netlify.app\/\" rel=\"nofollow noopener\">oslo-vsc<\/a> : Allows you to create your own theme for VS-CODE<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-54c1e6b animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"54c1e6b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-40c93bd\" data-id=\"40c93bd\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8b84405 elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"8b84405\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Wireframe, Models and prototypes<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33c6ebe elementor-widget elementor-widget-html\" data-id=\"33c6ebe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<ul>\n    <li><a target=\"_blank\" href=\"https:\/\/www.figma.com\/\" rel=\"nofollow noopener\">Figma<\/a>: Allows you to create mock-up and prototypes of websites for free.<\/li>\n    <li><a target=\"_blank\" href=\"https:\/\/www.adobe.com\/fr\/products\/xd.html\" rel=\"nofollow noopener\">Adobe XD<\/a>: Mock-up and prototype of sites but not free.<\/li>\n    <li><a target=\"_blank\" href=\"https:\/\/docs.google.com\/drawings\/\" rel=\"nofollow noopener\">Google drawings<\/a>: Create simple visuals and relationship diagrams.<\/li>\n    <li><a target=\"_blank\" href=\"https:\/\/www.google.fr\/intl\/fr\/slides\/about\/\" rel=\"nofollow noopener\">Google slider<\/a>: Create simple visuals and relationship diagrams as a slideshow.<\/li>\n    <li><a target=\"_blank\" href=\"https:\/\/www.mockflow.com\/\" rel=\"nofollow noopener\">Mockflow<\/a>: Wireframe.<\/li>\n\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b77918e animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"b77918e\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b7d114f\" data-id=\"b7d114f\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-778bf4e elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"778bf4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Fake texts and Placeholders<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d80ada elementor-widget elementor-widget-html\" data-id=\"3d80ada\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p>Add fake text, fake users and fake images to your client presentations. This will allow you to give your designs a little more pop.<\/p>\n\n<h6>Fake texts<\/h6>\n\n<ul>\n    <li>\n        <a target=\"_blank\" href=\"https:\/\/fr.lipsum.com\/\" rel=\"nofollow noopener\">lipsum.com<\/a>: Generate substitution text.\n    <\/li>\n<\/ul>\n<h6>Fake users<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/randomuser.me\/\" rel=\"nofollow noopener\">randomuser.me<\/a>: List of user pictures for mockups.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/pravatar.cc\/\" rel=\"nofollow noopener\">pravatar.cc<\/a>: List of user pictures for mockups.<\/li>\n<\/ul>\n\n<h6>Fake images<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/loremflickr.com\/\" rel=\"nofollow noopener\">loremflickr.com<\/a>: Get substitution images.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/placeholder.com\/\" rel=\"nofollow noopener\">placeholder.com<\/a>: Get substitution images.<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9721d0f animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"9721d0f\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6010ec2\" data-id=\"6010ec2\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4f49330 elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"4f49330\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Colors<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b92a88f elementor-widget elementor-widget-html\" data-id=\"b92a88f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p>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.<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/paletton.com\/\" rel=\"nofollow noopener\">paletton.com<\/a>: Color wheel and color picker.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.color-hex.com\/\" rel=\"nofollow noopener\">color-hex.com<\/a>: Color wheel and color picker.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/color.adobe.com\" rel=\"nofollow noopener\">color.adobe.com<\/a>: Color wheel and color picker.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/leonardocolor.io\/\" rel=\"nofollow noopener\">leonardocolor.io<\/a> : Open-source color and contrast generator.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/coolors.co\/\" rel=\"nofollow noopener\">coolors.co<\/a> : Color scheme generator with Adobe extensions and chrome.<\/li>\n<\/ul>\n\n<p>Accessibility help, calculate the ideal contrast for your background and foreground colors - WCAG Compliant.<\/p>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/contrastchecker.com\/\" rel=\"nofollow noopener\">contrastchecker.com<\/a><\/li>\n\n<li><a target=\"_blank\" href=\"https:\/\/whocanuse.com\/\" rel=\"nofollow noopener\">whocanuse.com<\/a>: Lets you know if your colors are suitable for each type of visual impairment.<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ab78f63 animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"ab78f63\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c5b22fe\" data-id=\"c5b22fe\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-413548d elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"413548d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Fonts<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04da905 elementor-widget elementor-widget-html\" data-id=\"04da905\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p>Install open-source fonts. No, Dafont is not the solution! :<\/p>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/fonts.google.com\/\" rel=\"nofollow noopener\">fonts.google.com<\/a>\n<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/google-webfonts-helper.herokuapp.com\/fonts\" rel=\"nofollow noopener\">https:\/\/google-webfonts-helper.herokuapp.com\/fonts<\/a>\n<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.fontsquirrel.com\/\" rel=\"nofollow noopener\">fontsquirrel.com<\/a>\n<\/li>\n<\/ul>\n\n<p>With the combination of:<\/p>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/fontjoy.com\/\" rel=\"nofollow noopener\">fontjoy.com<\/a> : Allows you to compare and combine multiple fonts.<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8135827 animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"8135827\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-11f3aa9\" data-id=\"11f3aa9\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3ad3023 elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"3ad3023\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Royalty-free media<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5535ca9 elementor-widget elementor-widget-html\" data-id=\"5535ca9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6>Pictures<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/unsplash.com\/\" rel=\"nofollow noopener\">unsplash.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.pexels.com\/\" rel=\"nofollow noopener\">pexels.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/pixabay.com\/fr\/\" rel=\"nofollow noopener\">pixabay.com<\/a><\/li>\n<\/ul>\n\n<h6>Icons and illustrations<\/h6>\n\n<ul>\n    <li><a target=\"_blank\" href=\"https:\/\/boxicons.com\/\" rel=\"nofollow noopener\">boxicons.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/icons8.com\" rel=\"nofollow noopener\">icons8.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/undraw.co\/illustrations\" rel=\"nofollow noopener\">undraw.co<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/gallery.manypixels.co\" rel=\"nofollow noopener\">manypixels.co<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/absurd.design\/\" rel=\"nofollow noopener\">absurd.design<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/icomoon.io\/\" rel=\"nofollow noopener\">icomoon.io<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/iconstore.co\" rel=\"nofollow noopener\">iconstore.co<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/fontawesome.com\/\" rel=\"nofollow noopener\">fontawesome.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/thenounproject.com\/\" rel=\"nofollow noopener\">thenounproject.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/ionic.io\/ionicons\" rel=\"nofollow noopener\">ionic.io<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.producthunt.com\/alternatives\/undraw-1\" rel=\"nofollow noopener\">And more \u2026<\/a><\/li>\n<\/ul>\n\n<h6>Videos<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/mixkit.co\/\" rel=\"nofollow noopener\">mixkit.co<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.pexels.com\/fr-fr\/videos\/\" rel=\"nofollow noopener\">www.pexels.com\/fr-fr\/videos\/<\/a><\/li>\n<\/ul>\n\n<h6>SVG<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/code.google.com\/archive\/p\/svg-explorer-extension\/downloads\" rel=\"nofollow noopener\">Afficher les SVG dans l\u2019explorateur<\/a><\/li>\n<\/ul>\n\n<h6>3D textures<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/polyhaven.com\/\" rel=\"nofollow noopener\">polyhaven<\/a>: Allows you to find 3D textures in 4K + <\/li>\n<li><a target=\"_blank\" href=\"https:\/\/3dtextures.me\/\" rel=\"nofollow noopener\">3dtextures<\/a>: Allows you to find 3D textures<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1ed8a4a animated-fast elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-invisible\" data-id=\"1ed8a4a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;slideInUp&quot;,&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7c33c27\" data-id=\"7c33c27\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;pix_scale_in&quot;:&quot;none&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-121046d elementor-invisible elementor-widget elementor-widget-pix-heading\" data-id=\"121046d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"pix-heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div  class=\"pix-heading-el text-left \"><h1 class=\"text-gradient-primary h1 animate-in heading-text el-title_custom_color mb-12\" style=\"\" data-anim-type=\"fade-in-up\" data-anim-delay=\"0\">- Multimedia Tools<\/h1><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5655eb9 elementor-widget elementor-widget-html\" data-id=\"5655eb9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h6>Edit photos online<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.befunky.com\/\" rel=\"nofollow noopener\">befunky.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.iloveimg.com\/\" rel=\"nofollow noopener\">iloveimg.com<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.canva.com\/\" rel=\"nofollow noopener\">canva.com<\/a><\/li>\n<\/ul>\n\n<h6>Convert pictures and photos online<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/squoosh.app\/\" rel=\"nofollow noopener\">squoosh.app<\/a>: An online image converter.<\/li>\n<li>For console fans there is: <a href=\"https:\/\/pandoc.org\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/pandoc.org\/<\/a><\/li>\n<\/ul>\n\n<h6>Forum CMS<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/flarum.org\/\" rel=\"nofollow noopener\">Flarum<\/a>: Very good fairly young and free forum CMS.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.discourse.org\/\" rel=\"nofollow noopener\">Discourse<\/a>: Forum CMS a bit more complicated than Flarum to install but just as powerful.<\/li>\n<li><a target=\"_blank\" href=\"https:\/\/js.wiki\/\" rel=\"nofollow noopener\">Wiki.JS<\/a>: 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.<\/li>\n<\/ul>\n\n<h6>Cookie Manager<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.axeptio.eu\/fr\/tarifs\" rel=\"nofollow noopener\">Axeptio<\/a>: Fun and easy to integrate even on a wordpress installation.<\/li>\n<\/ul>\n\n<h6>Send files to a client<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/wetransfer.com\/\" rel=\"nofollow noopener\">Wetransfer<\/a>: Enables fast transfer and sending of large files<\/li>\n<\/ul>\n\n<h6>Image sizes for each social network<\/h6>\n\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/socialsizes.io\/\" rel=\"nofollow noopener\">socialsizes<\/a>: Allows you to know the size of the images required for each social platform.<\/li>\n<\/ul>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Welcome to the part 1 of this survival kit! On the internet, there are many websites and online services&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7394,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,67],"tags":[47,45,43,44,49,46,42,40,41,48],"class_list":["post-7287","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","category-front-end-web","tag-colors","tag-copyrights","tag-hosting-services","tag-ide","tag-learning","tag-multimedia-tools","tag-project-management","tag-survival-kit","tag-web","tag-wireframe"],"_links":{"self":[{"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/posts\/7287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/comments?post=7287"}],"version-history":[{"count":0,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/posts\/7287\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/media\/7394"}],"wp:attachment":[{"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/media?parent=7287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/categories?post=7287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solanor.fr\/en\/wp-json\/wp\/v2\/tags?post=7287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}