Tutoriel Html5 Bootstrap 1

Créer un site Portfolio avec Bootstrap
Par Guillaume Loulier
Date de publication : 20 octobre 2015
Dernière mise à jour : 23 octobre 2015
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.
Commentez
Créer un site Portfolio avec Bootstrap par Guillaume Loulier
I - Créer son design propre.........................................................................................................................................3

I-A - Mettre à plat le projet.................................................................................................................................... 3
I-B - Devenir son propre designer......................................................................................................................... 3
II - Se lancer dans la programmation......................................................................................................................... 3
II-A - Utiliser un template HTML............................................................................................................................ 4
II-B - BootStrap.......................................................................................................................................................4
II-C - Commencer...................................................................................................................................................5
II-D - Se lancer dans le vif du sujet.......................................................................................................................6
II-D-1 - Créer le style global............................................................................................................................. 7
II-E - Mettre en place l'environnement...................................................................................................................8
II-E-1 - Créer une barre de navigation............................................................................................................. 9
II-E-2 - Créer une introduction........................................................................................................................10
II-E-3 - Créer une section About.................................................................................................................... 12
II-E-4 - Créer une zone Compétences........................................................................................................... 14
II-E-5 - Créer un footer................................................................................................................................... 16
III - Conclusion...........................................................................................................................................................16
-2-
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.
http://guikprod.developpez.com/tutoriels/html5/bootstrap/creer-site-portfolio/partie-1/
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 ?
-3-
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.
-4-
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.
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.
-5-
Prenons maintenant le dossier BootStap.
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.
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).
-6-
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
/* 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-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;
-7-
::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.
[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">


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



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


<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];
-8-
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>.


<link href="css/bootstrap.css" rel="stylesheet">


<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">



<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


<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>
</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>
-9-
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 :
/* Style Navigation */
.navbar {
min-height: 70px;
padding-top: 10px;
margin-bottom: 0px;
}
.navbar-brand {
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 :
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


<section id="home" name="home"></section>
<div id="Introduction">
- 10 -
<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 !
/* 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-style: oblique;
}
Résultat :
- 11 -
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 !


<section id="about" name="about"></section>
<div id="f">
<div class="row">
<h3>A propos de moi</h3>
<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="row centered">
<div class="col-md-4">
<i class="fa fa-heart"></i>
- 12 -
<h4>Amoureux de la technologie</h4>
<p><br/><a href="#" class="btn btn-theme">En savoir plus</a></p>
</div>
<i class="fa fa-flask"></i>
<h4>Chercher l'innovation</h4>
</div>
<i class="fa fa-trophy"></i>
<h4>Réussir et partager</h4>
</div>
</div>
</div>
</div>[/
Nous devons maintenant ajouter le style des boutons personnalisés et le style du secteur About :
/* 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;
- 13 -
#f img {
tex-align: center;
}
Résultat :
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.


<div id="Competences" class="text-center">
<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>
</div>
<i class="fa fa-mobile"></i>
<h4>Mobile First</h4>
- 14 -
</div>
<i class="fa fa-cloud"></i>
<h4>Accessibilité</h4>
</div>
<i class="fa fa-code"></i>
<h4>Coding fan</h4>
</div>
</div>
</div>
</div>[/
Ajoutons maintenant le style relatif aux icônes et à la mise en page propre à cette section :
/* 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 :
- 15 -
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 :


<div class="footer text-center">
<div class="row">
<h4 class="section-title center">A propos</h4>
<div></div>
been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</div>
Résultat :
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.
- 16 -

Tutoriel Html5 Bootstrap 1

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Tutoriel Html5 Bootstrap 1

Transféré par

Droits d'auteur :

Formats disponibles

Créer un site Portfolio avec Bootstrap

Par Guillaume Loulier

Date de publication : 20 octobre 2015

Dernière mise à jour : 23 octobre 2015

• connaître les bases de HTML5 et CSS3 ;

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

I - Créer son design propre.........................................................................................................................................3

I - Créer son design propre

I-A - Mettre à plat le projet

I-B - Devenir son propre designer

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

II - Se lancer dans la programmation

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

II-A - Utiliser un template HTML

Vous avez tout ? Commençons.

Prenons maintenant le dossier BootStap.

Voici le résultat final de vos changements.

II-D - Se lancer dans le vif du sujet

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

h1, h2, h3, h4, H5, H6 {

II-E - Mettre en place l'environnement

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="stylesheet" href="css/normalize.css">

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

.navbar-default .navbar-nav > li > a {

.navbar-default .navbar-nav > li > a:hover {

II-E-2 - Créer une introduction

Pensez à ajouter des commentaires afin de structurer votre code.

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

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

#Competences i.fa.fa mobile {

#Competences .Service:hover > i.fa {

II-E-5 - Créer un footer

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

Vous aimerez peut-être aussi