Guikingone

Bonjour à tous,

Dans ce billet, je vais vous montrer la création d'un portfolio / site d'agence / site divers et sera crée 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
• Etre patient !

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

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 personnels et différencier le bon du mauvais devient plus difficile, c'est là qu'intervient ce que j'appelle la mise à plat du projet.

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.

1. 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, smarwatches, etc ...), les utilisateurs veulent une expérience pensée pour leur support.
2. 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 ...
3. Notre site doit-il comporter des codes couleurs ou des logos spécifique ? 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 au prémices de la création de notre site, en clair, commencer par réfléchir avant d'agir et agissez en ayant poser vos bases de création, la suite n'en sera que plus facile.

B - Devenir son propre designer

De nos jours, bien des studios payent des designer afin de créer la charte graphique d'un site, au fond, ce comportement dénote un soucis majeur, les personnes censés créer le design du site n'en sont pas capable 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.

A mes yeux (propos personnel), un Intégrateur Web ou un développeur front-end ne sachant pas se servir d'outils comme Photoshop/Gimp voir même un simple cahier avec un crayons ne gagnera pas toujours face à quelqu'un sachant le faire. La questions 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 support 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 fixer 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 poser le projet ? Vous avez créer votre design ?

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

Dans cette partie (plus longue que le reste), je vous détaillerais 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.

A - Utiliser un template HTML

A mes yeux, je ne comprend 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'utiliserais HTML5 Boilerplate, un template HTML comportant tout 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 parcourez par la suite.

B - BootStrap

Dans de dossier, BootStrap sera notre outil principal, pour ceux qui veulent jouer les baroudeurs , 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 mais j'y reviendrais) 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.

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

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 tel 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'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 voir plus que nécessaire pour travailler correctement, là encore, les dossier 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ée plus tôt, si votre OS vous demande quoi faire, cliquer sur fusionner, pour le dossier fonts, faite de même, ce dernier ne sera pas à fusionner vu qu'il est seul.



Voici le résultat final de vos changements.

D - Se lancer dans le vif du sujet

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 vend 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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
           <!-- 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>

Cela aura pour effet de signaler à notre fichier HTML où aller chercher le style CSS, à noter qu'une version min.css existe, cette version convient mieux à l'utilisation sur site publié, c'est une version "minifié" de la feuille de style, plus rapide à charger.

Nous avons aussi déplacer le code relatif aux anciens navigateurs dans <head> et ajouter un titre dans <title> afin de compléter le tout, nous ajoutons aussi le chargement des icônes FontAwesome pour ajouter de la vie à notre site via MaxCDN (ce qui permet un chargement rapide et sans faute).
Ajoutons à cela le chargement de Bootstrap.js qui permet de finaliser le code Javascript pour la page, un must à ce stade !

E - Se lancer dans l'inconnu

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 surement crée 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, n'hésitez pas à modifier le code au besoin.

Pour le code CSS, nous avons déclarer 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 (roulementdetambours!) au sein de main.css, la zone où vous écrirez est balisé comme ceci : Author's custom styles, commençons.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* Style Global */
 
* {
	margin: 0;
	padding: 0px;
}
 
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 changements 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 paragraphe ainsi que le placement de certains éléments à venir.

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
		<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">Nom voulu de votre site</a>	
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="index.html">Blog</a></li>
						<li><a href="index.html">Portfolio</a></li>
						<li><a href="index.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 :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* 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;
}

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 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, 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 !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
}

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

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 !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!-- 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ées et le style du secteur About :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* 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; 
}

Ceci fait, nous arrivons à une zone majeure du site, notamment quant il s'agit de site type portfolio/agence, devons nous ajouter un carousel 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é à 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 via le biais d'icône et de texte court et centré sur mes atouts, à l'image de la section About, cette section sera centré sur le savoir-faire et les "idées" que je véhicule.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- 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 :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 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;

J'ai crée 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.

Nous voici arrivé au footer du site, dans la logique d'un site portfolio/agence, un footer contient des liens vers les réseaux sociaux, un A 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é à 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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 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>

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 ...).
A 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 tel que le blog, le portfolio, la page de contact ainsi que l'ajout du Javascript (partie très utile pour la page principal !), ce tutoriel se conclût ici pour aujourd'hui, les parties suivantes sortiront rapidement .

Bonne journée.