Les tuto HTML5 et CSS3

Vous trouverez dans cette catégorie, des tutoriels qui vous permettront d’en apprendre d’avantage et en plus détailler les fonctionnalités des langages HTML5 et CSS3. De nombreuses thématiques sont proposées.
De nombreux cas pratiques , des astuces pour vous aider, une récapitulation des propriétés des CSS3 et HTML5 et enfin des astuces pour contourner certaines erreurs de compatibilités sur les navigateurs.
Chaque jour, de nouveaux tutoriels vous sont offerts dans le but de vous permettre de disposer de tous les moyens afin de créer un site et intégrer les éléments dans les normes.

  • Outil gratuit pour évaluer les performations avec Google Page Speed, WebPageTest et Opquast

    février 15, 2017

    Dans ce billet , on va vous présenter les différents supports gratuits pour tester les performances de votre page et évaluer sa qualité. Nous utiliserons trois supports Google PageSpeed Insights, WebPageTest et Opquast. Google PageSpeed Insights Google PageSpeed Insights, vous … Suite

  • Jouer avec le random ( aléatoire) dans nos fichiers de style CSS

    février 15, 2017

    En tant qu’integrateur, on essayera toujours d’exploiter au maximum les possibilités que proposent le CSS3 et le HTML5.Aujourd’hui nos inspirations nous poussent vers un point qu’on a très mal exploité ou très mal utilisé l’aléatoire dans le CSS. ( random … Suite

  • Memento des supports emailing disponible en 2017

    janvier 10, 2017

    Par définition, l’emailing consiste à envoyer un email à plusieurs groupes de contacts. Défini comme du marketing direct, L’emailing sert pour la prospection, promotion, relance, suivi etc … Grâce aux divers solutions d’emailing présenté ci-dessous, vous allez pouvoir utiliser des … Suite

  • Arrondir des images sous différentes formats en CSS3

    septembre 19, 2016

    Dans ce tutoriel, nous allons passer en revue quelques techniques d’intégration pour arrondir les images. La principale propriété CSS que nous allons utiliser est le border-radius. Bien qu’il soit assez simple pour appliquer la propriété sur des images carrées, sur … Suite

  • TitleNotifier.js un plugin JavaScript pour gérer les notifications

    août 30, 2016

    En feuilletant un blog d’un ami intégrateur, je suis tombé sur un plugin open source très léger qui pourrait beaucoup aider notre communauté de développeur front end car il permet de mettre en œuvre facilement la notification sur le titre … Suite

  • Centrer verticalement un Modal bootstrap

    août 24, 2016

    Pour centrer verticalement un Modal sous bootstrap 3.x.x , on a crée un script afin de palier à ce problème. Cependant, ne pas oublier d’utiliser la plus récente version de bootstrap 3 (> = 3.3.1) parce que les versions précédentes … Suite

  • Le Navbar bootstrap

    août 22, 2016

    Avec le framework bootstrap, on peut rendre responsive facilement notre barre de navigation en l’affichant sur toute la largeur de l’écran et lorsque qu’une taille d’écran minimale est atteinte, cette barre change de présentation pour n’afficher que le menu en … Suite

  • Les classes utiles pour faire du responsive avec Bootstrap

    août 22, 2016

    Actuellement, on utilise la plus part du temps une conception de page mobile-friendly (adaptée aux mobiles). Pour nous aider lors des phases de développement responsive bootstrap nous propose d’utiliser ces classes utilitaires pour afficher et masquer le contenu suivant les … Suite

  • Une table responsive full CSS

    juin 27, 2016

    Auparavant on avait déjà vu une technique pour rendre une table responsive, mais le problème résidait sur la compatibilité sur les navigateurs. Dans ce billet on a refait la même technique mais sans hacking mais en full css compatible avec … Suite

  • Resizer un objet (image, video…) en CSS3 sans perdre son aspect-ratio

    mai 23, 2016

    L’aspect-ratio étant la proportion entre la hauteur ( height ) et la largeur d’un élément ( width ), l’objet pourra être une image, un vidéo ou n’importe quelle objet HTML5 L’object-fit est une propriété CSS3 qui va gérer comment un … Suite

  • Le framework Front end Material Design Lite de google

    janvier 26, 2016

    Nous allons beaucoup jouer avec Codepen le long de ce tutoriel, depuis que google a dévoilé son nouveau framework d’intégration Material Design Light ( MDL ) qui intègrera à la fois le html, le css et le javascript. Ce framework … Suite

  • Animer les checkbox en CSS 3

    novembre 26, 2015

    Un formulaire HTML contient beaucoup d’éléments avec des comportements différents. Certains d’entre eux offrent des possibilités de personnalisation de la part du developer frontend tandis que d’autres comme le checkbox ne peut pas être personnalisé par défaut. Heureusement, avec l’évolution … Suite

  • Démo 2: Animation circulaire sur un checkbox

    novembre 26, 2015

    Dans cette seconde démo, nous allons créer un checkbox avec effet circulaire de type radio bouton avec un effet bounce à l’aide du CSS3 en utilisant les pseudo éléments, la transition et l’animation à partir des keyframe La structure html … Suite

  • Démo 1: Animation simple d’un checkbox

    novembre 26, 2015

    Nous allons créer une animation simple sur un checkbox en utilisant le Font Awesome, les pseudo éléments CSS3, la transition et l’opacité. La structure HTML Dans notre structure, nous allons utiliser une liste <ul> standard et dans chaque liste, nous … Suite

  • Utilisez Google Insights PageSpeed pour analyser la performance de votre page Web

    novembre 23, 2015

    Google Insights PageSpeed analyse la manière dont vos pages s’exécutent et propose des solutions pour améliorer leur temps de chargement. Selon une étude fait récemment, « 40% des internautes qui passeront sur votre site ne vont pas attendre plus de … Suite

  • Appeler directement un numéro de téléphone via un lien href

    août 13, 2015

    Dans ce billet, nous allons vous expliquez une technique qui permettra après l’ajout du code HTML ci-dessous sur votre site Web va rendre cliquable un numéro de téléphone. Ce lien cliquable va directement composer le numéro sinon l’ajouter au carnet … Suite

  • Mettre un background image ou un dégradé sur du texte en CSS3

    août 7, 2015

    Dans ce nouveau billet, nous allons nous pencher sur une nouvelle technique pour décorer notre texte en particulier les titres Hn. Avec cette technique, nous serons en mesure de placer une image de fond ou un dégradé à l’intérieur des … Suite

  • L’utilisation des paragraphes dans l’intégration de l’emailing

    juillet 16, 2015

    Les paragraphes (<p>) peuvent vous semblez être des balises HTML les plus simples, mais vous seriez surpris de voir qu’il va nous compliquer la vie sur certains webmail . On notera particulièrement Outlook.com et Yahoo!mail car Outlook.com applique un line-height … Suite

  • Le support mediaquery pour l’emailing

    juillet 15, 2015

    Actuellement, nous sommes obligés de nous confronter à des contraintes responsives non seulement sur l’intégration html mais aussi sur l’emailing. Pour ceux qui n’ont jamais utilisé le media query auparavant, le media query vous permet de contrôler la mise en … Suite

  • Personnaliser Google Maps pour votre site

    juin 30, 2015

    Savez vous que l’outil google map que Google nous propose est très riche en fonctionnalité qui nous permet de la personnaliser pour l’adapter au couleur et au design de nos sites. Aujourd’hui on va vous expliquer en détail la meilleur … Suite

  • Intégrer un Drop Down Menu simple avec CSS et Jquery

    juin 30, 2015

    Dans ce billet, nous allons vous aider à mettre en place un menu très simple avec Jquery pour l’animation et le CSS3 pour la mise en forme. Nous allons vous faciliter l’implémentation de l’outil pour vous donner la meilleure façon … Suite

  • Intégrer un bouton switch de type IOS en CSS3 et Jquery

    juin 29, 2015

    Nous constatons que la révolution du web passera indéniablement par le mobile, maintenant on a possibilité de construire des applications Web mobile à partir de simple projets web. Beaucoup de plates-formes tierces comme Apache Cordova et Phonegap offrent la possibilité … Suite

  • Faciliter l’intégration responsive avec Bootstrap 3.0

    juin 19, 2015

    Le Grid System de Bootstrap 3 Le système de grille Bootstrap fournit un moyen rapide et facile pour mettre en page nos sites Web. Contrairement à la version 2.x de bootstrap où les grilles sont fixés par défaut, la nouvelle … Suite

  • Optimisation du HTML5 pour le SEO

    mai 22, 2015

    Vu nos expériences dans le métier on nous demande souvent l’interdépendance entre le HTML 5 et le Search Engine Optimisation (SEO). Bien que nous ne sommes pas des spécialistes en SEO, on peut tout de même vous faire un petit … Suite

  • Styliser les formulaires HTML en pure CSS3

    mai 18, 2015

    Par défaut, les formulaires ne sont pas très jolis surtout du point de vue des graphistes. Pourtant, le graphiste ne peut pas faire à sa guise car il y a des limites du point de vue de l’intégration html. Dès … Suite

  • Text-decoration technique avancée en CSS3

    avril 20, 2015

    Presque la quasi-totalité de nous intégrateur web ont déjà utilisé cette propriété. Par exemple, la plupart des navigateurs soulignent par défaut tous les liens que nous empressions de supprimer rapidement par la propriété text-decoration: none. Mais c’est que vous ignorez … Suite

  • Positionnement avancé sur le background image

    mars 24, 2015

    Si vous avez besoin de positionner un background-image en CSS à 20px de la gauche et 10px du haut ( top :10px ; left :20px ) , ce sera très simple. Il suffit de mettre background-position: 20px 10px dans le … Suite

  • Flickity un slider responsive compatible avec les supports tactiles

    mars 23, 2015

    Avec l’évolution du responsive design, les développeurs se posent souvent la question sur l’adaptabilité des plugins sur les supports tactiles. Vu que la plupart des plugins ne sont pas flexible par rapport au besoin de l’intégrateur et car il est … Suite

  • Jouer sur l’user agent via une classe php pour détecter les devices

    mars 23, 2015

    Malgré le fait que nous developer front end, on trouve que jouer avec les user agents nous parait un peu crado du fait que c’est difficile à tester lors du développement, mais avec l’évolution des navigateurs on peut maintenant simuler … Suite

  • Réaliser des Stars rating en full CSS sans images

    mars 10, 2015

    Les stars rating sont des modèles largement utilisé sur dans le e-Commerce mais aussi peut être utilisé sur n’importe quel type de site. La solution que nous allons vous proposer ici est fait avec très peu de code et sans … Suite