Pierwsza strona HTML5/CSS - prośba o analizę kodu

0

A więc ukończyłem projektować moją pierwszą stronkę www, oczywiście pomijając aspekty "ortograficzne" i wizualne , skupiłem się bardziej na samym kodzie.
Jeżeli znajdzie się ktoś mający "5 min" na przeanalizowanie moich wypocin, będe wdzięczny. (Wg walidatora w3c jest ok)

<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf-8">
				<title>Luka Modric vs Adners Iniesta</title>
		<meta name="keywords" content="Modric, Iniesta...etc">
		<link rel="stylesheet" href="main.css">
	</head>
	
<body>

	<div class="main-container">
		<nav class="menu">Modric vs Iniesta</nav>
		
			<div class="first-content">
				<article>
					<header>
						<h1>Luka Modric </h1>
					</header>
						<p>Luka is Real Madrid's best middlefielder, he was born in Croatia</p>
					
					<section>
						<h3>Luka's Modric team's</h3>
							<ul class="site-nav">
								<li class="site-nav-item">2003 - 2008  Dinamo Zagrzeb 112(31)</li>
								<li class="site-nav-item">2003 - 2004  ->Zrinjski Mostar(wyp.)  22(8)</li>
								<li class="site-nav-item">2004 - 2005  ->Inter apresić(wyp.)  18(4)</li>
								<li class="site-nav-item">2008 - 2012  Tottenham Hotspur 127 (13)</li>
								<li class="site-nav-item">2012 - currently  Real Madrid  115(7)</li>
							</ul>
					</section>
				
				</article>
			</div>
			
			<div class="second-content">
				<article>
					<header>
						<h1>Anders Iniesta</h1>
					</header>
						<p>Don Anders Iniesta is the best left middlefielder from Barcelona</p>
						
					<section>
						<h3>Anders Iniesta team's</h3>
							<ul class="site-nav">
								<li class="site-nav-item">2002 - currently Fc Barcelona team</li>
							</ul>
					</section>
					
				</article>
			</div>
			
			<div class="footer">Stopka strony</div>
	</div>

</body>
</html>

CSS

.main-container
{
	width: 1000px;
	background-color: blue;
	margin: auto;
	height: 960px;
}

.main-container .menu
{
	text-align: center;
	letter-spacing: 2px;
	word-spacing: 7px;
	text-shadow: 1px 1px 5px blue;
	text-transform: uppercase;
}

.menu
{
	width: 800px;
	background-color: LightCyan;
	height: 60px;
	margin-left: 100px;
	margin-right: 100px;
}

.first-content
{
	width: 400px;
	background-color: grey;
	height: 600px;
	float: left;
	margin-left: 100px;
	margin-top: 10px;
}

.second-content
{
	width: 400px;
	background-color: green;
	height: 600px;
	float: left;
	margin-right: 100px;
	margin-top: 10px;
}

.footer
{
	clear: both;
	padding-top: 10px;
	text-align: center;
	letter-spacing: 3px;
	text-decoration: overline;
}

.main-container .first-content
{
	text-align: center;
}

.main-container .second-content
{
	text-align: center;
}

.site-nav
{
	background-image: linear-gradient(to left, gold, transparent, gold),
								  linear-gradient(45deg, white, green, white);
	text-align: left; 
	width: 300px;
	margin: auto;
	box-shadow: 3px 3px 6px 4px black;
}

.site-nav-item
{
	color: black;
	
}

  1. W która stronę teraz ukierunkować moją naukę? Rozwijać bardziej skillsy w css, tworzyć więcej i więcej róznych layout-ów, konfiguracji witryn czy powoli powoli ruszać w kierunku RWB, box-model, css framework?
  2. Ma ktoś pomysł w jaki sposób napis który znajduję sie (Modric vs Iniesta) w main-container -> menu ,ustawić na środku diva? Za każdym razem jak kombinuje z margin-top/bottom, padding - ustawia mi "całą stronę" powiedzmy 10px ale od samej góry zamiat od "góry diva main-container".
0

Musisz nadac wszystkim elementom id i ustawiać je w css po id. Tak chyba najłatwiej, ale Glowy nie dam czy to jest practice.

1
  1. przecież css to box-model o ile mnie coś sie nie myli, a css framework to css więc generalnie tak, css ( a potem sass ) . Btw RWB - chodzi ci o RWD - responsive design czyli taki na strony mobilne

źle rozumiesz znacznik <header></header> , nie służy on do wstawiania h1/h2... etc pomiędzy, tylko do określania gdzie jest "header" strony, czyli górna część strony, np <header></header> , np możesz zajrzeć do kodu źródłowego tej strony ( klikając prawym przyciskiem myszy i tam masz opcje do wyświetlenia ) , na tej stronie headerem jest całe to "przyczepne" menu na górze. znacznik <header> powinien być tylko jeden tak samo jak footer> http://www.w3schools.com/html/html5_semantic_elements.asp , tak samo nie musisz dawać <nav> <section> a wewnątrz sekcja bez sensu</section></nav> ,

tak samo w css masz kod :

 .first-content
{
    width: 400px;
    background-color: grey;
    height: 600px;
    float: left;
    margin-left: 100px;
    margin-top: 10px;
}
 
.second-content
{
    width: 400px;
    background-color: green;
    height: 600px;
    float: left;
    margin-right: 100px;
    margin-top: 10px;
}

moim zdaniem lepiej by było dać coś takiego

 .some-content {
    width: 400px;
    height: 600px;
    float: left;
    margin-left: 100px;
    margin-top: 10px;

   (DZIĘKI TEMU MASZ TEŻ MOŻLIWOŚĆ DANIA TEGO )
   text-align:center;
}
.bg-grey{
    background-color: grey;
}
.bg-green {
    background-color:green;
} 

i teraz możesz usunąć z kodu

.main-container .first-content
{
    text-align: center;
}
 
.main-container .second-content
{
    text-align: center;
}

a w html dajesz pooprostu

[...] <div class="some-content bg-grey"> cos wewnatrx</div>[..]

[...] <div class="some-content bg-blue"> cos wewnatrx</div>[..]

Staraj się unikać powtórzeń na tyle ile to możliwe, np ten fragment wyżej z .first-content i .second-content , obydwu przypisałeś praktycznie te same właściwości, co jezeli byś miał dodać 10 takich? no byłoby to jakieś piekło, a ty możesz wyciągnąc z tego co najwazniejsze czyli "bazowe" właściwości, a potem po prostu dodawać kolejne klasy do kodu html jeżeli chcesz zmodyfikować jakąś małą część tego wyglądu.

A co do 2. to przede wszystkim najpewniej zaznajomiłeś się z czymś co się nazywa "margin-collapse"
https://css-tricks.com/what-you-should-know-about-collapsing-margins/ , generalnie bardzo warto sie z tym zaznajomić.
prostym trickiem/fixem na to będzie :
.main-container {
.... coś tam coś ...
padding-top: 1px;
}
A tak poza tym to jak już sobie poradzisz z margin collapse to musisz się zastanowić nad tym co robisz. Mówisz że chcesz przenieść napis na środek tak? Więc jak chcesz to zrobić z obecnego stanu:

<nav class="menu">Modric vs Iniesta</nav> ?? Przecież manipulując .main-container .menu przesuwasz CAŁY BLOK a nie tylko napis, <nav class="menu">

Modric vs Iniesta

</nav> i manipulujesz klasą .menu-text na moje

Generalnie mógłbyś wrzucić swój projekt naprzykład na github.io czy jakikolwiek hosting żeby dać podgląd jak to wygląda

0

W tym przypadku do wyśrodkowania tego elementu najlepiej użyć: line-height: 60px;
Wartość jest równa height elementu blokowego, w którym się znajduje.

1

Ja się przyczepie troszkę do tych części kodu:


            <div class="first-content">
                <article>

            <div class="second-content">
                <article>
                 

Zupełnie nie potrzebujesz tych dwóch divów - zamiast tego klasy 'first-content' i 'second-content' możesz dołączyć do tagu 'article'. Będzie prościej i czytelniej.

                <article class="first-content">

                <article class="second-content">

Zamiast tego:

<div class="footer">Stopka strony</div>

masz w HTML 5 tag footer:

<footer>Stopka strony</footer>

1 użytkowników online, w tym zalogowanych: 0, gości: 1