Category Archives: Web

Site web html5-css3

10 outils indispensables pour construire son site web en HTML/CSS

By | Web, Webdesign | No Comments

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

    htmlipsum-pttCe site vous donne les structures de base en HTML qui vous permettront de gagner du temps dans la rédaction de votre code.

  • OpenClassRooms

    OpenClassRoomsPour 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

    Tuto.comVous pouvez également vous aider de tutoriels vidéo comme ceux de Tuto.com avec par exemple des tutoriels CSS et des tutoriels HTML gratuits.

    GraphikartLes 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

    W3SchoolsW3 Schools propose des tutoriels pour maîtriser les langages HTML et CSS qui sont de bonne qualité et accessibles aux débutants.

  • Cubic Bezier

    Effet CSS Cubic-BezierSur 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

    Animate CSSEn 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

    AlsacréationsSur 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

    InitializrInitializr.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 MaticCSS 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 !