Pierwsza strona moja na tym forum

pytanie zadane 6 lutego 2016 w HTML i CSS przez marcin1032 Nowicjusz (120 p.)
edycja 6 lutego 2016 przez marcin1032

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	 
	 <title>Portfolio</title>
	 
	<link rel="stylesheet" href="style.css" type="text/css">
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Slabo+27px|Lobster|PT+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
</head>
<body>

<div id="wrapper">	

<div id="logo">
Marcin Kaszak-młody webmaster
<div style="clear:both;"></div>
</div>

<div id="menu">
	<ol>
			<li><a href="#">Strona główna</a>
				</li>
			<li><a href="#">O mnie</a>
				</li>
			<li><a href="#">Cennik</a>
				</li>
			<li><a href="#">Kontakt</a>
				</li>
			<li><a href="#">Sklep</a>
				</li>
	</ol>
	<div style="clear:both;"></div>
        </div> 
		
		<div id="container">
		
		<div class="me">
		<br><strong>Kilka słów o mnie</strong></br>
		<br>
		Jestem młodym weebmasterem, mam 17 lat. Uczę się w Technikum Informatycznym. Styczność z weebmasterstwem miałem już w gimnazjum, ale nie rozwijałem umiejętności. Powróciłem do pisania stron dwa miesiące temu, wykonałem już kilka stron amatorskich. Moją pasją jest muzyka i pisanie stron. 
		Obsługuję trochę gimpa amatorsko. Zapraszam do kontaktu, wykonam dla Ciebie taką stronę jaką sobie zażyczysz. Znam na PHP, SQL, HTML, CSS, JS.
		</br>
		</div>
		
		</div>
		
		<div id="skill">
		
		<div class="sk">
		<strong>Umiejętności</strong>
		</div>
		<div class="html">
		<br><strong>HTML</strong></br>
		<br>Czyli jak tworzę szkielet strony. Doświadczenie powoli czyni mistrza.</br> 
		<div style="clear:both;"></div>
		</div>
		
		<div class="css">
		<br><strong>CSS</strong></br>
		<br>Czyli to w czym upiększam stronę. Po HTML'u drugi ulubiony web language.</br> 
		<div style="clear:both;"></div>
		</div>
		
			<div class="php">
		<br><strong>PHP</strong></br>
		<br>Język w którym dodaje podstrony, logowanie, rejestrację i wiele więcej.</br> 
		<div style="clear:both;"></div>
		</div>
		
		<div class="js">
		<br><strong>JS</strong></br>
		<br>Co to by było jakby strona nie posiadała animacji, była by o wiele brzydsza.</br> 
		<div style="clear:both;"></div>
		</div>
		
		<div class="sql">
		<br><strong>SQL</strong></br>
		<br>To tutaj są zamieszczane wszystkie dane, tyle pięknych tabel.</br> 
		<div style="clear:both;"></div>
		</div>
		
		<div class="gimp">
		<br><strong>GIMP</strong></br>
		<br>Nie tylko photoshop musi być programem do przycinania grafiki.</br> 
		<div style="clear:both;"></div>
		</div>
		
		</div>
		
		<div id="footer">
		 
		 <div class="top">
		 <div id="menu">
	<ol>
			<li1><a href="#">Strona główna</a>
				</li1>
			<li1><a href="#">O mnie</a>
				</li1>
			<li1><a href="#">Cennik</a>
				</li1>
			<li1><a href="#">Kontakt</a>
				</li1>
			<li1><a href="#">Sklep</a>
				</li1>
	</ol>
	<div style="clear:both;"></div>
        </div> 
		 </div>
		 
		</div>
		
		</div>	
		
</body>
</html>

body
{
  background-color: white;
  font-family: 'PT Sans', sans-serif;
}

#wrapper
{
	width: 100%;
}

#logo
{
    margin-top: 15px;
	margin-left: 25px;
	font-size: 41px;
	border-radius: 12px 12px 12px 12px;
	border-radius-color: black;
	text-align: center;
	font-family: 'Lobster', cursive;
}

#menu
{
	margin-top: 60px;
	margin-left: 800px;
	padding: 10px 0px;
	color: black;
	float: left;
	text-align: center;
}

#container
{
	width: 100%;
	background-color: #8EE6B8;
}

.me
{
	margin-top: 50px;
	margin-bottom: 25px;
    float: left;
	text-align: center;
	font-size: 25px;
	background-color: #8EE6B8;
	border-radius: 35px 35px 35px 35px;
}

#skill
{
	margin-top: 100px;
}

.sk
{
	text-align: center;
	font-size: 35px;
	margin-top: 100px;
}

.html
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

.css
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

.php
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

.js
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

.sql
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

.gimp
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

#fotter
{
   margin-top: 50px;
   margin-bottom: 15px;
   text-align: center;
   float: left;
   background-color: grey;
   border-radius: 35px 35px 35px 35px;
}

ol
{
	padding: 0;
	margin: 0;
	float: left;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
	color: black;
}

ol a
{
	color: black;
	text-decoration: none;
	display: block;
}

ol > li
{
	float: left;
	width: 150px;
	height: 40px;
	color: black;
}

ol > li:hover > a
{
	color: #451717;
	border-bottom: 3px solid red;
}

ol
{
	padding: 0;
	margin: 0;
	float: left;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
	color: black;
}

ol a
{
	color: black;
	text-decoration: none;
	display: block;
}

ol > li1
{
	float: left;
	width: 150px;
	height: 40px;
	color: black;
}

ol > li1:hover > a
{
	color: #451717;
	border-bottom: 3px solid red;
}

O to screeny mojej pierwszej strony, proszę o napisanie co się nie podoba. Strona napisana w 50 minut. :) Stronę jeszcze ulepszam. Proszę o ocenę.

4 odpowiedzi

odpowiedź 6 lutego 2016 przez Comandeer Guru (601,550 p.)

odpowiedź 6 lutego 2016 przez HaKIM Szeryf (87,590 p.)
edycja 6 lutego 2016 przez HaKIM

Marcin, tak na przyszłość, polecam stronę:

~ http://pastebin.com/

Jak na moje to niepotrzebnie każdy div ma inną klasę, powoduje to tylko zbyt dużą ilość kodu.

Mowa tu o:

Proszę zauważyć że każda z tych class zawiera te same parametry.

Nie lepiej aby te divy miały klasę o przykładowej nazwie: "skill-blocks" - a ona zawierałaby:

.skill-blocks
{
  width: 200px;
  float: left;
  margin-top: 100px;
  font-size: 25px;
  margin-left: 250px;
  text-align: center;
  border: 3px solid lightgreen;
  border-radius: 10px 10px 10px 10px;
}

Zachowałbyś przy tym masę kodu. Jeżeli chciałbyś dodać inne tło do każdego z tych bloczków wystarczy dodać style="background: url('jakis tam link')". Jeżeli style Cię nie interesuje to można dodać zaraz obok klasy "skill-blocks" coś w stylu "block-1" a w klasie block-1 miałbyś takie rzeczy jak font-size, color, background etc. Zawsze trochę kodu mniej. :)

Polecam stronę Sematyczny Blog Html, która została stworzona przez comandeer'a.

Życzę miłej nocy, jak i kodowania, Sebastian ~ HaKIM.

komentarz 6 lutego 2016 przez marcin1032 Nowicjusz (120 p.)

Witam

Dziękuje za pomoc, jestem w tym świeży tylko 2 miesiące koduje i każda pomoc jest cenna. Dziękuje!

Pozdrawiam i miłej nocy

komentarz 6 lutego 2016 przez 0e85dc6eaf Dyskutant (8,840 p.)

@Sebastian Brożek Przecinek Ci się wkradł na końcu linku :)

komentarz 6 lutego 2016 przez HaKIM Szeryf (87,590 p.)

Rzeczywiście, dziękuję. Już poprawiam. :)

odpowiedź 6 lutego 2016 przez jpacanowski VIP (101,940 p.)

1. Robiąc menu użyj tagu <nav>

2. <div style="clear: both;"></div>
Bezsensowny div. Sam tak nie robię od lat. Użyj overflow: hidden;

3. <div style="clear: both;"></div>
Za dużo tych clear: both w kodzie

4. <br><strong>Kilka słów o mnie</strong></br>
Nie, tak <br> nie działa

5. Za dużo <div>'ów
http://tutorials.comandeer.pl/html5-blog.html

    <div style="clearboth;"></div>
        </div> 
         </div>
          
        </div>
         
        </div>

Brrrr.... formatuj kod!

<div id="fotter">

footer!

36. <div style="clearboth;"></div>
110. <div style="clearboth;"></div>

Popraw to (brak dwukropka)

komentarz 6 lutego 2016 przez marcin1032 Nowicjusz (120 p.)

Witam,

Dziękuję za odpowiedź i pomoc. Jako młody i początkujący weebmaster każdą radę przyjmuję do serca.

Pozdrawiam i życzę miłej nocy.

odpowiedź 8 lutego 2017 przez niezalogowany

Mógłbyś rozwinąć "Kilka słów o mnie" i poprawić tam styl bo ciężko się to czyta...

Czemu nie dbasz o oczy internauty!? Radziłbym zmienić rażące białe tło na jakieś ciemniejsze, przyjemniejsze.

Nie rozumiem powtórzenia górnego menu w stopce... W stopce zazwyczaj umieszcza się autora bądź/i linki - ale inne niż w menu. Ewentualnie możesz zrobić "strzałkę" do góry strony - moja sugestia co do estetyki. Mógłbyś dodać padding do divów - tekst z marginesami, przynajmniej mi, lepiej się czyta.

Pomysł na strukturę tej strony jest fajny, jednakże mógłbyś poprawić styl pisania i tło z białego na jakieś ciemniejsze.

Jestem młodym weebmasterem (webmasterem), mam 17 lat. Uczę się w Technikum Informatycznym (technikum informatycznym). Styczność z weebmasterstwem (webmasterstwem) miałem już w gimnazjum, ale nie rozwijałem tej umiejętności. Powróciłem do pisania stron dwa miesiące temu, wykonałem już kilka stron -amatorskich. Moją pasją jest muzyka i pisanie stron (webmasterka).

Obsługuję trochę ((?) Co to znaczy "obsługiwać trochę"?) gimpa amatorsko. Zapraszam do kontaktu, wykonam dla Ciebie taką stronę, jaką sobie zażyczysz. Znam się na PHP, SQL, HTML, CSS, JS.

za dużo powtórzeń - "amator/-ski/-ska/-sko", "stron/-y/-a"
technikum informatyczne - Nie wskazujesz na konkretne, więc małą literką - dobrze napisałeś przy "gimnazjum"
webmasterstwo/-ka/-twem - przez jedno "e"

Pozdrawiam