Si vous êtes débutant ou si vous avez besoin de gagner du temps sur la création de votre site web, vous pouvez opter pour la solution simple de prendre un template et de le modifier à votre guise. Cela nécessite évidemment d’avoir des bases en HTML/CSS pour pouvoir comprendre la manière dont a été conçu le template et ensuite en faire ce que vous voulez. Il existe des sources de templates gratuits comme OS-template ou HTML5 UP ou encore Templated.co et il existe bien évidemment des templates payants à l’image de ceux que l’on trouve sur Themeforest, Template Monster ou Gridgum. Sur les sites payant, pour 13$, on peut dénicher un template sympa et bien codé.
Si vous préférez coder vous-même votre site web de A à Z, il existe des outils formidables pour vous y aider. Voici donc les 10 outils indispensables pour construire votre site web en HTML/CSS.
-
HTML-ipsum
Ce site vous donne les structures de base en HTML qui vous permettront de gagner du temps dans la rédaction de votre code. -
OpenClassRooms
Pour les débutants, il existe des mémentos pour le HTML et le CSS sur le très connu OpenClassRoom. Il sont facilement compréhensibles et pourvus d’exemples concrets. -
Tutoriels vidéo
Vous pouvez également vous aider de tutoriels vidéo comme ceux de Tuto.com avec par exemple des tutoriels CSS et des tutoriels HTML gratuits.
Les tutoriels de Graphikart sur Youtube sont également bien faits à l’image de celui qui permet d’intégrer une maquette PSD en site HTML/CSS ci-dessous.
-
W3 Schools
W3 Schools propose des tutoriels pour maîtriser les langages HTML et CSS qui sont de bonne qualité et accessibles aux débutants. -
Cubic Bezier
Sur le site de Cubic Bezier, vous pouvez tester vos paramètres sur les différents effets CSS tels que ease, linear…etc. Vous pouvez également y importer de nouveaux effets pour pouvoir les tester et ainsi proposer l’effet visuel désiré sur votre site web. -
Animate CSS
En appliquant des class CSS à certains éléments de votre site web, vous pouvez les animer grâce aux différentes séquences pré-écrites sur le site Animate CSS -
Les effets d’ombre
Sur Alsacréations, vous retrouverez les différentes syntaxes pour réaliser différents effets d’ombres, qu’il s’agisse de « text-shadow » ou de « box-shadow. Ceux-ci sont présentés avec des démonstrations vous permettant de gagner du temps sur le rédaction de votre code. -
Code-couleur
Code-couleur.com est un site qui permet de générer les codes hexadécimaux des couleurs pris en charge par le langage CSS.
-
Initializr
Initializr.com est un outil qui permet de générer un template en HTML5 et CSS3 sur-mesure et qui fonctionne sur la base de HTML5 boilerplate. -
CSSMatic
CSS Matic est un site regroupant 4 outils qui permettent de simplifier le codage d’effets plus ou moins complexes, comme les ombres ou les dégradés, et de manière personnalisée.
Avec de tels outils, vous voilà parés pour réaliser votre premier projet de site web ! Un zeste de créativité, un peu de rigueur et beaucoup de persévérance, voilà ce qu’il vous faudra en plus si vous êtes débutant dans l’intégration web. Pour les autres, j’espère que cet article vous permet de connaître de nouvelles ressources du web même si la plupart sont déjà très connus !
