Skocz do zawartości
Gibek

Poprawność kodu struktura

Przez Gibek, w xHTML / CSS / Javascript

Polecane posty

Gibek    0

Gibek
Napisano

Witam serdecznie, po dłuższej przerwie chciałbym na poważnie powrócić do tematu kodowania stron www, troszkę poczytałem troszkę sobie przypomniałem i postanowiłem coś napisać.

Chciał bym oddać to wam do oceny, chodzi mi głównie o kod, tok myślenia ponieważ dużo się zmieniło w HTML5 i nie chciał bym uczyć się źle, rozumiem przez to utrwalanie błędów które za pewne robię.

 

http://bartlomiej-dalek.bl.ee/web/

<!doctype html>
<html class="no-js" lang="pl">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Strona internetowa</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        
        <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
      
      
        <header>
            
            <nav>
                <div class="center">  <a href="#"> <img src="img/logo.png" alt="" class="logo" /></a> </div> 
                <ul>
                <li><a href="#"> Home </a></li>
                    <li><a href="#"> News </a></li>
                        <li><a href="#"> Contact </a></li>
                
                </ul>
            </nav>
        
        <div class="slogan">
            <h2> Think. Define. Desing.</h2>
            <div class="border"></div>
            <p> We design solutions for digital interactions.
With its approach, our team generates extraordinary value for brands through innovative design.</p>
            
            </div>
            
            
        
        </header>
  
        
<section class="offer">
        
    <h2 class="center1"> SERVICE WE OFFER </h2>
    <hr/>
        <p class="center1">Buzz analytics business-to-consumer. Partner network ramen social media freemium iteration.</p>
    
    
    
    <div class="info1">
        <img src="img/box.jpg" alt="" class="trav" />
        <img src="img/ico1.png" alt="" class="ic" /> 
    
            <p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p>
    </div>
    
     <div class="info1 t">
        <img src="img/box.jpg" alt="" class="trav" />
        <img src="img/ico2.png" alt="" class="ic" /> 
    
            <p class="ic1-txt">Canvas metri essar. Incubator ramen viral product management drect mailing. Canvas metri essar. Incubator ramen viral product management drect mailing. such founders gamification Effct.</p>
    </div>
    
           
        
        </section>        
        
        
        
        
        
        <section class="kontakt">
        
                <h2> Kontakt </h2>
               <hr /> 

            
<div class="contact-group">   
            <div class="localization">
            <img src="img/facebook30.png" alt="" />
                <p>Zduńska Wola Ul.Kwadratowa 15/22</p>
            </div>
            
            <div class="email">
            <img src="img/mail3.png" alt="" />
                <p>gibekrecords@gmail.com</p>
            </div>
            
            <div class="phone">
            <img src="img/phone325.png" alt="" />
                <p>600 - 151 - 388</p>
            </div>
            <div class="clear-both"></div>
    
            <p class="center1 contact-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis efficitur orci eget risus suscipit vestibulum in non lectus. Suspendisse sollicitudin ut leo id lacinia. Praesent maximus rhoncus ipsum a hendrerit. Donec tempor, dui et lobortis pulvinar, elit neque rhoncus arcu, ac feugiat purus lorem in felis. Etiam ac massa in ipsum ornare pharetra eu non lorem.</p>
    
 </div>    
        
     
        </section>
        
        
        
        <footer> <p>  Bartłomiej Dałek 2015 © </p> </footer>
        
        
        
       
    </body>
</html>


.clear-both {clear: both;}
.center1 { text-align: center;}


nav { width:980px; margin:0 auto;}
nav ul { margin:0; padding: 15px 0; text-align: center;  }
nav ul li { display:inline-block;  padding:25px; }
nav ul li a { text-decoration:none; color:#d2d5db; transition-duration: 1s; font-family: 'Roboto Condensed', sans-serif; font-size: 18px;}
nav ul li a:hover { color: white; font-weight: bold;}
header { background: url("../img/1.jpg") center; opacity: 0.9; height: 470px; width: 100%; background-size: cover;}
.logo { position: absolute; padding: 20px;}
.slogan { color: white; padding-top: 50px;}
.slogan h2 { width: 980px; margin: 0 auto;}
.slogan p { width: 980px; margin: 0 auto; margin-top: 10px; }
.border { border:rgba(255,255,255,0.3) 1px solid; width: 77%; float: right; }



.trav { }
.offer hr {
	display: block;
	height: 3px;
	border: 0;
	margin: 3em 0;
	padding: 0;
	background-image: 
	
	
	-webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-moz-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-ms-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-o-linear-gradient(left, #fff, #e6e6e6, #fff);
	width: 50%;
	left: 25%;
	position: relative;
	border: none;
}
.info1 {width: 980px; margin: 0 auto; }
.ic { padding-left: 50px;}
.ic1-txt { width: 300px; margin-left: 510px; margin-top: -180px; text-align: center;}
.t {padding-top: 50px;}







.kontakt { padding-top: 220px;}
.kontakt h2 { text-align: center; font-size: 30px; padding-top: 20px; color: #666;} 
.kontakt hr {
	display: block;
	height: 3px;
	border: 0;
	margin: 3em 0;
	padding: 0;
	background-image: 
	
	
	-webkit-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-moz-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-ms-linear-gradient(left, #fff, #e6e6e6, #fff);
	background-image: 
	
	
	
	-o-linear-gradient(left, #fff, #e6e6e6, #fff);
	width: 50%;
	left: 25%;
	position: relative;
	border: none;
}
.localization { float: left;  text-align: center; width: 320px; }
.email {float: left;  text-align: center; width: 320px;}
.phone { float: left;  text-align: center; width: 320px;}
.contact-group {width: 980px; margin: 0 auto;}
.contact-text { line-height: 30px;}



footer {background: #2b2b2b; color: whitesmoke; text-align: center; font-size: 17px; height: 60px; margin-top: 100px; }
footer p { padding-top: 15px; font-family: 'Roboto Condensed', sans-serif; }













@media screen and (max-width:1000px) {

    nav { width: auto;}
    .logo {  position: relative; padding: 25px 0px 0px 0px;}
    .center {text-align: center;}
    .border { display: none;}
    .slogan { padding-top: 65px;}
    .slogan h2 { width: auto; position: relative; text-align: center;  border:rgba(255,255,255,0.3) 1px solid; padding: 40px 0px 40px 0px;}
    
    .slogan p { width: auto; position: relative; text-align: center; padding-top: 50px; }
    
    header { height: 600px; }
    
    .contact-group {width: auto; margin: 0;}
.localization {width: 99%; }
.email {width: 99%;}
.phone {  width: 99%;}
    .trav {display: none;}
    .info1 {width: auto; margin: 0;}
    .ic1-txt { width: 99%; margin-left: 0; margin-top: 0; text-align: center;}
    .ic {padding-left: 45%; }
    .kontakt {padding-top: 50px;}
}

Także czekam na opinię czego nie powinienem robić co jest nie tak wykonane lub może jest ok.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

xorg    693

xorg
Napisano (edytowany)

Bledow pewnie jest sporo ale pierwszy rzut oka (nie mam teraz zbytnio edytora z kolorowaniem i czasu :P) - czemu uzywasz tagow xml? Zamiast tworzyć puste elementy np. <div class="border"></div> skorzystaj z pseudoelementów typu :after czy :border.

Edytowano przez xorg (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

razor    42

razor
Napisano

Bledow pewnie jest sporo ale pierwszy rzut oka (nie mam teraz zbytnio edytora z kolorowaniem i czasu :P) - czemu uzywasz tagow xml? Zamiast tworzyć puste elementy np. <div class="border"></div> skorzystaj z pseudoelementów typu :after czy :border.

:before :) ale domyślam się, że pisane na szybko.

 

jak zaczynasz się uczyć, to proponuję od razu poznać SASS. Korzystanie z czystego CSS jest teraz niewygodne i czasochłonne.

 

Co do struktury HTML, to raczej nie widzę żadnych większych błędów logicznych.

 

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gibek    0

Gibek
Napisano

Wielkie dzięki za opinię, postaram nauczyć się wykorzystywać :after czy :before muszę to przyswoić, tak samo SASS jeszcze o tym nie słyszałem także biorę się za naukę :)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

xorg    693

xorg
Napisano (edytowany)

SASSem nie zajmuj sobie głowy jeżeli nie masz podstaw CSS. SASS to kolejny poziom, aby na niego wejść trzeba mieć opanowane podstawy i zrozumieć schemat działania struktury DOM i stylów. Następnie będziesz mógł wprowadzić trochę dynamiki w stylach :) jest jeszcze LESS, ale to zależy kto co woli... tak samo jak ze wszelkiej maści frameworkami każdy ma plusy i minusy.

 

LESS ma mniejsze możliwości ale dla początkującego będzie niebywale łatwiejszy.

 

Chodziło oczywiście o :before, z pośpiechu głupota wyszła :) patrząc teraz to kod ten można skrócić przez wywalenie niepotrzebnych elementów oraz zrezygnowanie z klas wielu z nich. Natomiast w samym CSS często nadajesz selektory globalne przez co danego elementu szukasz w całym drzewie DOM... dla przykładu .kontakt .contact-group .phone zamiast .phone będzie dobrym rozwiązaniem.

 

 

Edytowano przez xorg (zobacz historię edycji)

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Macsch    122

Macsch
Napisano

Nie mieszaj języków, w źródle ma być zawsze angielski. Uzupełnił alt'y. Ustaw edytor aby poprawnie ustawiał taby - przy przypadku html/css/js - 2 spacje.

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Gibek    0

Gibek
Napisano

Nie mieszaj języków, w źródle ma być zawsze angielski. Uzupełnił alt'y. Ustaw edytor aby poprawnie ustawiał taby - przy przypadku html/css/js - 2 spacje.

 

przepraszam ale mógł byś wytłumaczyć inaczej bo nie zrozumiałem ;/

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Macsch    122

Macsch
Napisano

Wcięcie, przy robieniu wcięcia tab powinien być zamieniany na spacje, zależnie od edytora można ustawiać ilość tych spacji. Sublime Text ma nawet możliwość ustalenia konkretnych ustawień dla konkretnych rozszerzeń plików.

pre_1446224204__2015-10-30_17-56-10.png

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Przejdź do listy tematów xHTML / CSS / Javascript
×