Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercice : Ma 1er Page HTML5 / CSS3

Correction et avis

    17 juillet 2019 à 4:29:20

    Bonjour,

    En espérant faire ma demande au bon  endroit, ma requête et la suivante.

    Je suies actuellement le cours "Apprenez à créer votre site Web avec HTML5 et CSS3" et précisément, sur un exercice ou il nous ai demandé de créer pas à pas notre 1er page Web.

    L'exercice n'ayant pas de correction, j’aimerai avoir des avis sur mon 1er vrai codage, ce que je peux améliorer, et ensuite poser quelques questions.

    Je suis conscient que visuellement, c'est pas superbe, mais c'est surtout sur la technique.

    Merci d'avance 

    Benoit

    Code HTML:

    <!DOCTYPE html>
    <html>
        <head>
           	<meta charset="utf-8" />
           	<link rel="stylesheet" href="style.css" />
           	<title>Basket4Life</title>
        </head>
    
        <body>
    		<header>
    			<a href="images/logo.png"><img class="logo" src="images/logo_mini.png" alt="logo"></a>
    			<h1>Basket4Life</h1>
    			<nav>
        			<ul>
        				<li><a href="#">News</a></li>
        				<li><a href="#">Effectifs</a></li>
        				<li><a href="#">Statistiques</a></li>
        				<li><a href="#">Calendrier</a></li>
        			</ul>
        		</nav>
        	</header>
    
        	<div id="bannieretitre">
        		<img src="images/bannieretitre.png" alt="bannière">
        	</div>
    
        	<section>
        		<article>
        			<h2>Préface</h2>
        			<p>Je me présente, Benoît, fan de NBA depuis l'année 2001 en admiration devant celui que l'on nomme His Airness, fan de talents gâchés comme Tmac ou Penny, voir même de bras cassé comme Darius Miles.</p>
        			<p>Au plus loin que je me souvienne, avant même de m'intéresser à ce sport ou au jeu, c'est le personnage de MJ qui m'a intrigué puis fasciné, légende du sport, icône international, charismatique, l'homme qui a fait se tourner de nombreux presque du jour au lendemain sur ce sport appelé <strong>"basket-ball"</strong>. Mais pas que... La NBA, c'est aussi son univers, ses personnages hauts en couleurs, Dennis Rodman, Gary Payton, Barkley, la culture Urbaine, A.I. etc...</p>
        			<p>Puis enfin arrive l'année 2001, les Lakers de Shaq et Kobe, sont champion pour la 2nd fois, Kwame Brown est drafté numéro 1 par le GOAT himself au Washington Wizards, les Bulls pensent avoir récuperer le nouveau Shaq en la personne d'Eddy Curry en 4, et moi dans tout ça ? J'achéte mon 1er 5MAJEURS, et je commence le basket en club et les grandes disucussions autour de ce sport après les entrainements.</p>
       				<p>Voilà, maintenant que l'on se connait mieux, je vous souhaite la bienvenue sur mon site, et bonne navigation.</p> 
       			</article>
    
        		<aside>  	
       				<div id="actu">
       					<h2>Fil d'actualité</h2>
       					<ul>
       						<li><a href="#">Trey Lyles signe aux Spurs</a></li>    						
       						<li><a href="#">Westbrook signe aux Rockets</a></li>
        					<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
    						<li><a href="#">Westbrook signe aux Rockets</a></li>
        				</ul>  
        			</div>	
        		</aside>
        	</section>
    
        	<footer>
        		<div id=reseaux>
        			<h3>Suivez moi également sur les réseaux sociaux :</h3>
        			<ul>
        				<li><a href="https://www.facebook.com/"><img src="images/facebook.png" alt="facebook"></a></li>
        				<li><a href="https://twitter.com/"><img src="images/twitter.png" alt="twitter"></a></li>
        				<li><a href="https://discordapp.com/"><img src="images/discord.png" alt="discord"></a></li>
        				<li><a href="https://www.instagram.com/"><img src="images/instagram.png" alt="instagram"></a></li>
        			</ul>
      			</div>
    
        			<div id="autres">
        				<p><a href="">contact</a></p>
        				<p><a href="">Partenaires</a></p>
        				<p><a href="">Mentions légales</a></p>
        				<p><a href="">A propos</a></p>
        			</div>
        	</footer>
        </body>
    </html>
    ---------------------------------------------------------------------------------------------
    Code CSS :
    @font-face {
        font-family: 'boycottregular';
        src: url('fonts/boycott/BOYCOTT_-webfont.eot');
        src: url('fonts/boycott/BOYCOTT_-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/boycott/BOYCOTT_-webfont.woff2') format('woff2'),
             url('fonts/boycott/BOYCOTT_-webfont.woff') format('woff'),
             url('fonts/boycott/BOYCOTT_-webfont.ttf') format('truetype'),
             url('fonts/boycott/BOYCOTT_-webfont.svg#boycottregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
    *
    {
    	background-color: #eff2f5;
    }
    
    body
    {
    	width: 900px;
    	margin: auto;
    }
    
    
    header
    {
    	display: flex;
    	width: 100%;
    	align-items: baseline;
    }
    
    h1
    {
    	font-size: 80px;
    	margin-bottom: 0px;	
    	margin: 0px;
    	padding: 0px;
    	font-family: 'boycottregular';
    }
    
    .logo
    {
    	margin-right: 10px;
    	padding: 0px;
    }
    
    nav ul
    {
    	display: flex;
    	margin: 0 0 0 25px;
    	padding: 0px;
    	font-size: 22px;
    	list-style-type: none;
    }
    
    nav li
    {
    	display: flex;
    	justify-content: space-between;
    	margin-right: 20px;
    	text-decoration: none;
    }
    
    nav a
    {
    	text-decoration: none;
    	color: #0E499D;
    }
    
    nav a:hover
    {
    	text-decoration: underline;
    	font-style: italic;
    	text-shadow: 2px 2px 4px black;
    }
    
    section
    {
    	display: flex;
    	margin-bottom: 20px;
    }
    
    article
    {
    	margin-right: 30px;
    }
    
    aside
    {
    	position: relative;
    	margin-top: 65px;
    	padding-top: 0px;
    	border:2px solid #D30529;
    	border-radius: 10px;
    	width: 1000px;
    	height: 300px;
    	background-color: #0E499D;
    	box-shadow: 4px 4px 4px black;
    }
    
    #actu
    {
    	
    }
    
    aside h2
    {
    	text-align: center;
    	margin-top: 10px;
    	margin-bottom: 10px;
    	background-color: #0E499D;
    }
    
    aside ul
    {
    	display: flex;
    	flex-direction: column;
    	list-style-type: none;
    	overflow: auto;
    	padding-left: 0px;
    	height: 230px;
    }
    
    aside li
    {
    	margin-bottom: 10px;
    	text-decoration: none;
    }
    
    
    #bannieretitre
    {
    	margin-top: auto;
    }
     
    p
    {
    	text-align: justify;
    }
    
    footer
    {
    	display: flex;	
    }
    
    h3
    {
    	font-weight: bold;
    	font-size: 15px;
    	color: #666666;
    }
    
    #reseaux ul
    {
    	display: flex;
    	margin-left: 10px;
    	padding-left : 0px;
    	list-style-type: none;
    	justify-content: space-between;
    	width: 280px;
    }
    
    #autres
    {
    	position: relative;
    	left: 50px;
    	justify-content: flex-end;
    }
    • Partager sur Facebook
    • Partager sur Twitter

    Exercice : Ma 1er Page HTML5 / CSS3

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown