Créer un site Portfolio avec Bootstrap

Dans ce tutoriel, je vais vous montrer la création d'un portfolio/site d'agence/site divers. Il sera créé en vue d'un affichage responsive via le Framework BootStrap de l'équipe Twitter.

Dans un premier temps, nous penserons au design du site, puis nous passerons au code HTML et CSS propre au site, nous effectuerons des modifications précises et ajouterons des styles personnels en vue de créer un look simple, efficace et porté vers un site sobre, dans ce dossier, les connaissances nécessaires sont :

  • connaître les bases de HTML5 et CSS3 ;
  • posséder BootStrap : Bootstrap
  • savoir créer un design depuis zéro ;
  • avoir des notions en responsive design ;
  • être patient !

Commençons tout de suite avec la réflexion autour du menu.

31 commentaires Donner une note à l'article (5) 

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Créer son design propre

Dans la jungle des sites Web actuels, chacun devrait se démarquer, tout le monde veut attirer le plus de monde et créer l'expérience la plus complète et souple pour l'utilisateur final, en tant qu'intégrateur Web, notre travail est de suivre un cahier des charges établi en fonction des demandes du client, mais dans l'optique d'un site personnel ou d'un site d'agence, les demandes deviennent plus personnelles et différencier le bon du mauvais devient plus difficile, c'est là qu'intervient ce que j'appelle la mise à plat du projet.

I-A. Mettre à plat le projet

Mettre à plat le projet revient (à mes yeux) à se donner des lignes directrices, un cahier des charges précis, bref, une ligne de conduite.

  • Notre site doit-il être responsive ? De nos jours, un site classique (non responsive) n'est pas acceptable, c'est un fait, avec l'arrivée des supports mobiles (tablettes, smartphones, smartwatches, etc.), les utilisateurs veulent une expérience pensée pour leur support.
  • Notre site doit-il se tenir sur une page complète où proposer des sections ? Là encore, tout est affaire de préférence, un site sur page complète (terme personnel) qui se tient sur une seule page est à privilégier si le design le permet, un site en sections (sur plusieurs pages PHP ou HTML) est plus adapté dans le cas d'un site d'informations avec des forums, une section membre, un blog, etc.
  • Notre site doit-il comporter des codes couleur ou des logos spécifiques ? L'identité d'un site passe par ses couleurs, son logo, sa typographie, ses visuels accrocheurs, ses fonctionnalités, bref tout ce qui peut créer l'envie chez le client de visiter encore et encore votre site.

Vous l'aurez compris, mettre à plat le projet permet de répondre à la majorité des questions que l'on se pose aux prémices de la création de notre site, en clair, commencer par réfléchir avant d'agir et agissez en ayant posé vos bases de création, la suite n'en sera que plus facile.

I-B. Devenir son propre designer

De nos jours, bien des studios payent des designers afin de créer la charte graphique d'un site, au fond, ce comportement dénote un souci majeur, les personnes censées créer le design du site n'en sont pas capables matériellement, le designer intervient en complément de capacité, là où une personne sachant coder et designer un site proposera des compétences clés et liées afin de faciliter et accélérer le processus de création.

Au fond, avez-vous besoin de savoir créer un design de A à Z ? Oui.

À mes yeux (propos personnel), un intégrateur Web ou un développeur front-end ne sachant pas se servir d'outils comme Photoshop/Gimp, voire un simple cahier avec un crayon, ne gagnera pas toujours face à quelqu'un sachant le faire. La question suivante est le support de travail, dois-je utiliser PS/Gimp ou utiliser un bon vieux cahier ? Là encore, tout est question de préférence, même si personnellement je suis plus doué et créatif sur un cahier, certains le seront via PS/Gimp, d'autres le seront sur des supports comme Racontr ou d'autres médias de création en ligne, choisissez votre voie et creuser jusqu'à sortir le meilleur de vous-même, là réside le secret.

Si je peux me permettre un avis sur la création en soi, je dirais qu'il ne faut pas hésiter à se tromper volontairement, créer des choses farfelues et sans fondements techniques, l'idée de créer quelque chose de plus complexe vous poussera à dépasser les limites que vous vous fixez quotidiennement, soyez fou, visez l'impossible, comme le dit la routine, tout le monde pensait que c'était impossible jusqu'à qu'il le rende possible !

II. Se lancer dans la programmation

Vous avez posé le projet ? Vous avez créé votre design ?

Lançons-nous dès maintenant dans le vif du sujet, les mains dans le cambouis, l'aspect manuel du projet, l'écriture de notre code.

Dans cette partie (plus longue que le reste), je vous détaillerai mon processus de création, mes outils de travail quotidien et ma vision de l'écriture, libre à vous de suivre ou de vous démarquer.

II-A. Utiliser un template HTML

À mes yeux, je ne comprends pas l'intérêt de créer un template HTML quand l'internet moderne nous permet de fluidifier et d'accélérer notre travail, dans ce projet, j'utiliserai HTML5 Boilerplate, un template HTML comportant tous les outils nécessaires à la mise en place rapide d'un projet, que vous téléchargiez le template basique ou que vous décidiez d'y intégrer BootStrap, libre à vous de choisir le chemin que vous parcourrez par la suite.

À noter que lorsque vous choisissez « Get a custom build », vous êtes redirigé vers Initialzr, ce dernier permet de charger la configuration H5BP + BootStrap + JQuery.

Pour plus d'informations : Documentation en français

II-B. BootStrap

Dans de tutoriel, BootStrap sera notre outil principal, pour ceux qui veulent jouer les baroudeurs :massacre:, libre à vous de choisir le framework que vous préférez, à mes yeux (et je rêve encore de ce jour béni des dieux où les idées des uns et des autres se verront rassemblées), BootStrap est l'outil parfait pour créer un contenu puissant et responsive, Foundation est l'outil des gens qui aiment le challenge et JavaScript, sa syntaxe est plus claire et précise (une barre se nomme topbar, une rangée = row et une colonne = columns) que BootStrap, mais sa mise en forme et son adaptation au créateur plus complexe, bref, là encore soyez différent, pensez utile et choisissez l'outil qui vous convient.

BootStrap est un « Framework CSS », cela signifie qu'il s'occupe majoritairement du code CSS (d'ailleurs, il utilise un préprocesseur CSS, mais nous y reviendrons plus tard) afin de créer une apparence voulue sans travailler durant des heures dans les lignes de code.
BootStrap embarque des outils HTML, JavaScript et CSS, il se base sur un système de grille qui dicte le placement des éléments d'une page, son avantage principal tient du fait qu'il est entièrement responsive et ce, nativement (la majorité des frameworks le font, soyons franc), son but premier ? Proposer des outils pour un affichage « mobile-first », à mes yeux, créer sur mobile pour ensuite développer pour écran large est bien plus logique que l'inverse.

BootStrap a été créé par Mark Otto et Jacob Thornton de l'équipe de Twitter (oui, le fameux réseau social qui rend les gens célèbres plus vite qu'auparavant) afin de répondre à un besoin interne, son processus d'évolution le porte aujourd'hui en version 3.3.5 (la version 4 étant en bêta à l'heure d'écrire ces lignes) et il continue d'évoluer et d'apporter des outils de plus en plus performants.

Sa construction est simple et il contient tout ce dont vous aurez besoin ici, de plus, BootStrap est open source, que demander de plus ?

Comme expliqué plus haut, le choix du framework vous appartient, BootStrap possède le mérite d'être utilisé et soutenu par nombre de studios et entreprises mondialement réputés, sa syntaxe peut paraître lourde et peu fluide, mais l'apprentissage en vaut la chandelle.

Pour télécharger Bootstrap, cliquez sur le bouton Télécharger et choisissez BootStrap, vous obtiendrez l'intégralité des fichiers nécessaires à ce stade et serez en mesure de commencer à lire la suite.

C:\Users\Guillaume\Pictures\DOSSIER DEV\Portfolio\IV.PNG

II-C. Commencer

Vous avez tout ? Commençons.

Avant de commencer à écrire quoi que ce soit, il nous faut nous assurer que les outils sont correctement assemblés, pour cela, nous allons créer un dossier en local (ou sur un service Cloud, ma préférence, car cela me permet de travailler de n'importe où sans soucis de données) et y copier les dossiers décompressés de HTML5 Boilerplate et BootStrap. Une fois ceci effectué, nous allons ouvrir le dossier HTML5 et voir ce qui s'y cache.

C:\Users\Guillaume\Pictures\DOSSIER DEV\Portfolio\I.PNG

En l'état actuel, le dossier comporte la structure osseuse de notre site, le fichier index.html sera notre page d'accueil (assurez-vous de la conserver comme telle avec ce nom, une fois en ligne, le serveur chargera cette page en premier !), le dossier CSS comprendra nos fichiers CSS de BootStrap ainsi que ceux plus personnels liés à du style ajouté, img contiendra les images, js les fichiers JavaScript, le reste est assez simple à comprendre, les fichiers .git-- servent sur GitHub et Git, le reste sert les configurations plus avancées comme la réservation de domaine, les icônes de favoris, etc.

Prenons maintenant le dossier BootStap.

C:\Users\Guillaume\Pictures\DOSSIER DEV\Portfolio\II.PNG

C'est petit ? C'est tout à fait normal, à ce stade, vous obtenez la version « rapide » de BootStrap, si vous voulez obtenir le code complet, il vous faudra le choisir sur la page de Downloads (ce qui sera expliqué plus bas dans le dossier), mais rassurez-vous, avec tout ceci, vous obtenez tout, voire plus que nécessaire, pour travailler correctement, là encore, les dossiers s'expliquent par eux-mêmes, CSS contient le style, JS les fichiers JavaScript, Fonts contient les familles de polices personnalisées (ou pas).

Maintenant que tout est là, faisons les ajustements nécessaires, dans un premier temps, ouvrez les pages scindées en deux sur votre bureau et copier les dossiers CSS et JS dans votre dossier HTML5 créé plus tôt, si votre OS vous demande quoi faire, cliquez sur fusionner, pour le dossier fonts, faites de même, ce dernier ne sera pas à fusionner vu qu'il est seul.

C:\Users\Guillaume\Pictures\DOSSIER DEV\Portfolio\III.PNG

Voici le résultat final de vos changements.

II-D. Se lancer dans le vif du sujet

Tout est en place, il faut se lancer, allons-y, avant quoi que ce soit, le style que je vous présente ici est personnel, il est le résultat que je veux obtenir, libre à vous de l'adapter selon votre design voulu (que vous avez sûrement créé plus haut).

Tout au long de ce dossier, je vous présenterai le code, puis vous expliquerai ce qu'il en retourne, n'hésitez pas à poser des questions dans les commentaires si quoi que ce soit ne marche pas comme voulu !

L'ordre de travail est le suivant, pour chaque ligne « balise » de code HTML ajoutée, vous trouverez le code CSS à la suite, cela vous permet de voir directement le résultat de votre travail, encore une fois,

pour le code CSS, nous avons déclaré le fichier main.css dans la section <head>, ce fichier contiendra tout notre code css ajouté : les classes ajoutées, les modifications de boutons, barres, etc. N'hésitez pas à l'ouvrir à côté de vous, vous y serez souvent !

En parlant de CSS, commençons petit et écrivons nos premières lignes (roulements de tambour!) au sein de main.css, la zone où vous écrirez est balisée comme ceci : Author's custom styles, commençons.

II-D-1. Créer le style global

 
Sélectionnez
/* Style Global */
            
body {
 background: #ffffff;
 margin: 0;
 height: 100%;
 color: #384452;
 font-family: sans-serif;
 font-weight: 400;
}
            
h1, h2, h3, h4, H5, H6 {
 font-family: 'Raleway', sans-serif;
 font-weight: 700;
}
            
p {
 padding: 0;
 margin-bottom: 12px;
 font-family: 'Raleway', sans-serif;
 font-weight: 400;
 font-size: 14px;
 line-height: 24px;
 color: #384452;
 margin-top: 10px;
}
            
img {
 height: auto;
 max-width: 100%;
}
            
a {
 padding: 0;
 margin: 0;
 text-decoration: none;
 -webkit-transition: background-color .4s linear, color .4s linear;
 -moz-transition: background-color .4s linear, color .4s linear;
 -o-transition: background-color .4s linear, color .4s linear;
 -ms-transition: background-color .4s linear, color .4s linear;
 transition: background-color .4s linear, color .4s linear;
}
a:hover,
a:focus {
 text-decoration: none;
 color: rgba(195, 197, 198, 0.87);
}
            
::moz-selection {
 color: #fff;
 text-shadow: none;
 background: #2B2E31;
}
            
::selection {
 color: #fff;
 text-shadow: none;
 background: #2B2E31;
}
            
.centered {
 text-align: center;
}

Cela va permettre de créer les premiers signes de changement au sein du visuel, ne vous-en faites pas de tout voir ou comprendre certaines modifications, les résultats arriveront dès que les classes auront été écrites au sein du fichier HTML, ici, on va modifier le background, l'apparence des paragraphes ainsi que le placement de certains éléments à venir.

II-E. Mettre en place l'environnement

Il est l'heure, l'heure est arrivé amis du bon goût, lançons nous dans le vif du sujet, le travail tant attendu, mais au fait, que faire ?

Dans un premier temps, je me doute que vous utilisez un éditeur de texte tel que Notepad ++, Brackets, Sublim, etc ... Pour ma part et par choix personnel, j'utilise Brackets, ce dernier comprend des outils qui me facilitent le travail notamment l'aperçu en direct du travail, le scindage de mon écran lorsque je travaille sur du HTML et du CSS, bref, je ne vous vends pas le produit mais vous explique mon choix et ce que vous verrez à l'écran.

Ouvrez votre éditeur ou ouvrez le fichier via clic droit => Votre éditeur et regardons ce que nous obtenons.

 
Sélectionnez
	[CODE]<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>
    </body>
</html>

Des arrangements d'ordre visuel sont à faire, des lignes sont à ajoutés dans Head et nous devons ajouter un titre ainsi que les fichiers JS à notre code.

Dans un premier temps, il convient de déclarer le fichier CSS de BootStrap, pour cela, vous avez deux choix, soit vous déclarez un serveur MaxCDN qui héberge le fichier (plus pratique sur un site publié) soit vous déclarez le fichier directement, dans ce dossier, nous utiliserons la seconde méthode, plus facile lors de la création, lors de la publication, vous pourrez passer via MaxCDN (ce qui sera expliqué plus loin), voici donc ce que nous allons ajouter dans <head> et en bas de page pour les <script>.

 
Sélectionnez
           <!-- BootStrap Core -->
       <link href="css/bootstrap.css" rel="stylesheet">

           <!-- Custom style -->
           <link href="css/main.css" rel="stylesheet">
           <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Bas de page -->

<!-- Script Javascript -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
		<script src="js/bootstrap.js"></script>

Retournons sur le cœur du travail et écrivons le code nécessaire à la barre de navigation, le cœur de votre site, cette dernière sera responsive, BootStrap est pensé pour, cette dernière se fera plus petite sur mobile et dotée d'un menu qui déroulera les liens via le collapse du menu.

II-E-1. Créer une barre de navigation

 
Sélectionnez

		<!-- Navbar -->
		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle Navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html">Loulier Guillaume - Freelance</a>	
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="index.html">Home</a></li>
						<li><a href="Blog.html">Blog</a></li>
						<li><a href="Portfolio.html">Portfolio</a></li>
						<li><a href="Propos.html">A Propos</a></li>
						<li><a href="Contact.html">Contact</a></li>
					</ul>
				</div>
			</div>
		</div>

Cette dernière comporte un collapse du menu, des liens vers index.html (les liens seront remplacés dès la création des pages correspondantes, à noter que si vous voulez vous avancer le travail, vous pouvez écrire : #Blog.html à la place de index.html, le navigateur chargera automatiquement la page principale et vous n'aurez plus qu'à enlever le # au moment de la publication) et un lien principal qui recharge l'index, ce lien peut être remplacé par une image (ou un logo) via <img>.

Barre de navigation créée, il nous faut y attribuer un style CSS, reprenons le fichier main.css :

 
Sélectionnez
/* Style Navigation */
.navbar {
 min-height: 70px;
 padding-top: 10px;
 margin-bottom: 0px;
}
            
.navbar-brand {
 font-family: 'Raleway', sans-serif;
 font-weight: 900;
}
            
.navbar-header .navbar-brand {
 color: white;
}
            
.navbar-default .navbar-nav > li > a {
 color: white;
 font-weight: 700;
 font-size: 15px;
}
            
.navbar-default .navbar-nav > li > a:hover {
 color: rgba(172, 186, 191, 0.82);
}
            
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
 color: rgba(172, 186, 191, 0.82);
 background: transparent;
}
            
.navbar-default {
 background-color: #384452;
 border-color: transparent;
}

Résultat :

C:\Article_Dvp\documents\tutoriel_html5_bootstrap\images\V.PNG

L'idée ici est de rendre les menus semi-transparents lors du survol (d'où la couleur portée sur le transparent) et la barre bleue afin de marquer l'utilisateur (les barres blanches sont monotones, avouons-le), vous remarquerez que j'utilise une « propriété en cascade » (appellation personnelle), cela me permet de créer une seule règle pour plusieurs cas de figure, joindre l'utile à l'agréable.

Passons maintenant au cœur de votre page, l'image ou le texte d'accroche, pour ma part, j'ai opté pour un mix des deux, une image montrant un travail en cours sur le site et un texte d'introduction.

II-E-2. Créer une introduction

 
Sélectionnez
<!-- Introduction -->
  <section id="home" name="home"></section>
   <div id="Introduction">
   <div class="container">
    <div class="row">
     <h1>Bienvenue sur mon portfolio !</h1>
     <br>
     <h3>Bonjour, mon nom est Guillaume Loulier, poursuivez !</h3>
     <br>
     <br>
     <div class="col-lg-12">
     </div>
    </div>
   </div>
   </div>

Pensez à ajouter des commentaires afin de structurer votre code.

Voici le code CSS, vous remarquerez que je préfère charger l'image de fond via le CSS, cela me semble plus logique, libre à vous de faire comme bon vous semble !

 
Sélectionnez
/* Style Introduction */
#Introduction {
 background: url(../img/photo-1440783335184-280994ff71a2.jpg) no-repeat center top;
 margin-top: -10px;
 padding-top: 20px;
 text-align: center;
 background-attachment: relative;
 background-position: center center;
 min-height: 700px;
 width: 100%;
            
 -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
            
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
            
#Introduction h1 {
 margin-top: 150px;
 color: white;
 font-size: 50px;
 font-weight: 700;
}
            
#Introduction h3 {
 color: white;
 font-size: 30px;
 font-weight: 100;
 font-family: 'Raleway', sans-serif;
 font-style: oblique;
}

Résultat :

C:\Article_Dvp\documents\tutoriel_html5_bootstrap\images\VI.PNG

J'ai modifié la couleur des h1 et h3 pour se rapprocher d'un rendu neigeux (volonté personnelle), le texte est centré afin de centrer l'attention.

II-E-3. Créer une section About

Nous allons maintenant ajouter une session « About », cette dernière décrira rapidement quelques points importants de mon parcours ou de mes envies, une accroche supplémentaire pour un futur employeur !

 
Sélectionnez
<!-- About -->
  <section id="about" name="about"></section>
  <div id="f">
   <div class="container">
    <div class="row">
     <h3>A propos de moi</h3>
            
     <div class="col-lg-12">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     <p>Je suis disponible pour du travail directement</p>
     <p><button type="button" class="btn btn-warning" href="#">J'ai une offre !</button></p>
     </div>
    </div>
   </div>
  </div>
                <br>
            
  <div>
   <div class="container">
    <div class="row centered">
     <div class="col-md-4">
      <i class="fa fa-heart"></i>
      <h4>Amoureux de la technologie</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      <p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
     </div>
     <div class="col-md-4">
       <i class="fa fa-flask"></i>
       <h4>Chercher l'innovation</h4>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
       <p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
      </div>
      <div class="col-md-4">
       <i class="fa fa-trophy"></i>
       <h4>Réussir et partager</h4>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
       <p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
      </div>
    </div>
   </div>
  </div>[/

Nous devons maintenant ajouter le style des boutons personnalisés et le style du secteur About :

 
Sélectionnez
/* Style bouton */
.btn-theme {
 color: #fff;
 background-color: #384452;
 border-color: #384452;
 margin: 4px;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
 color: #fff;
 background-color: #FCAC45;
 border-color: #ffffff;
}
            
/* Style About */
            
#f {
 background: #384452;
 padding-top: 70px;
 padding-bottom: 70px;
 text-align: center;
}
            
#f h3 {
 color: white;
 font-size: 28px;
 font-weight: 700;
 letter-spacing: 1px;
}
            
#f icon {
 font-size: 8px;
 color: #fff;
 padding: 3px;
}
            
#f p {
 font-size: 20px;
 color: #f2f2f2;
            
            
}
            
#f img {
 tex-align: center; 
}

Résultat :

C:\Article_Dvp\documents\tutoriel_html5_bootstrap\images\VII.PNG

Vous remarquerez que j'ai ajouté un lien au sein de mon bouton, cela me permettra plus tard d'y ajouter le lien vers ma page Contact afin que l'employeur puisse rejoindre la page plus rapidement.

II-E-4. Créer une zone Compétences

Ceci fait, nous arrivons à une zone majeure du site, notamment quand il s'agit de site type portfolio/agence, devons-nous ajouter un carrousel ou une simple collection de travaux via des images ? Au fond, la décision vous revient, à mes yeux, je préfère ne pas surcharger ma page principale (notamment, car c'est elle qui se charge en premier), je vais donc créer une page dédiée à mes travaux en cours/passés, cela permettra au futur employeur de se sentir à l'aise lors de la consultation de mes travaux, pour « remplir » l'espace de la page, je vais mettre en avant mes compétences par le biais d'icônes et de textes courts et centrés sur mes atouts, à l'image de la section About, cette section sera centrée sur le savoir-faire et les « idées » que je véhicule.

 
Sélectionnez
<!-- Compétences -->
  <div id="Competences" class="text-center">
   <div class="container">
    <div class="section-title center">
     <h2>Un aperçu de mes compétences</h2>
     <div class="line">
      <hr>
     </div>
    </div>
    <div class="space"></div>
    <div class="row">
     <div class="col-md-3 col-sm-6 service">
      <i class="fa fa-desktop"></i>
      <h4>Web Design</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     </div>
     <div class="col-md-3 col-sm-6 service">
      <i class="fa fa-mobile"></i>
      <h4>Mobile First</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     </div>
     <div class="col-md-3 col-sm-6 service">
      <i class="fa fa-cloud"></i>
      <h4>Accessibilité</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     </div>
     <div class="col-md-3 col-sm-6 service">
      <i class="fa fa-code"></i>
      <h4>Coding fan</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
     </div>
    </div>
   </div>
  </div>[/

Ajoutons maintenant le style relatif aux icônes et à la mise en page propre à cette section :

 
Sélectionnez
/* Compétences */
#Competences {
 padding: 80px 0;
}
            
.espace {
 margin-top: 40px;
}
            
#Competences i.fa {
 font-size: 40px;
 border: solid #FCAC45 4px;
 width: 100px;
 height: 100px;
 padding: 27px 25px;
 margin-bottom: 10px;
 border-radius: 50%;
 transition: all 0.5s;
}
            
#Competences i.fa.fa mobile {
 font-size: 50px;
 padding: 20px 25px;
}
            
#Competences .Service:hover > i.fa {
 background: #FCAC45;
 color: #ffffff;[/

Résultat :

C:\Article_Dvp\documents\tutoriel_html5_bootstrap\images\VIII.PNG

J'ai choisi des bords jaunes afin de créer une « surprise » et ne pas lasser le visiteur, cela permet de le garder éveillé et concentré sur la lecture.

II-E-5. Créer un footer

Nous voici arrivés au footer du site, dans la logique d'un site portfolio/agence, un footer contient des liens vers les réseaux sociaux, un À propos et l'adresse du studio/de la personne, pour ma part, je préfère rediriger les visiteurs vers ma page Contact dédiée à ce propos, c'est une logique pour moi, la page principale présente la personne, les autres pages approfondissent son travail et la page Contact permet de télécharger son CV, lui envoyer un mail, etc. Libre à vous de créer un footer contenant ces attributs.

Voici le code simple que j'ai ajouté à ma page :

 
Sélectionnez
<!-- Footer -->
  <div class="footer text-center">
   <div class="container">
    <div class="row">
     <div class="col-lg-12">
      <h4 class="section-title center">A propos</h4>
      <div></div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
     </div>
    </div>
   </div>
  </div>

Résultat :

Image non disponible

Cette section ne contient pas de style CSS, cela rend la navigation plus rapide en bas de page (notamment au vu des changements apportés sur les compétences, etc.).

III. Conclusion

À ce stade, vous devriez avoir un site fonctionnel en local, c'est le début de votre aventure à mes côtés sur ce site tout frais, dans la suite de ce tutoriel, nous verrons la création des pages annexes telles que le blog, le portfolio, la page de contact ainsi que l'ajout du JavaScript (partie très utile pour la page principale !) et du PHP, ce tutoriel se conclut ici pour aujourd'hui.

Je tiens à remercier ClaudeLELOUP pour la correction, Christophe Louvet pour les retours concernant le tutoriel, Arkham46 et F-Leb pour leur aide durant la publication ainsi que Francis Walter pour la proposition de publication.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 guikprod-http. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.