Wrzucam link do mojego wstępnego szablonu (HTML/CSS). Szablon wrzucony do Wordpressa.
Stronki zacząłem w sumie robić nie dawno...
http://tnij.org/portfoliotest
Czekam na ocenę
Pełna wersja: Strona początkującego webmastera
Witajcie.
Wrzucam link do mojego wstępnego szablonu (HTML/CSS). Szablon wrzucony do Wordpressa.
Stronki zacząłem w sumie robić nie dawno...
http://tnij.org/portfoliotest
Czekam na ocenę
Wrzucam link do mojego wstępnego szablonu (HTML/CSS). Szablon wrzucony do Wordpressa.
Stronki zacząłem w sumie robić nie dawno...
http://tnij.org/portfoliotest
Czekam na ocenę
Oceniam kod, bo na tym się jako tako znam
Jak na początek nie jest źle. Moje uwagi( nie wszystkie ze względu na godzinę, pisane "na szybko") :
1.
2.
Są też inne znaczniki, niż div class="contact". Np. span. Poza tym w tym miejscu, lepsze będzie id, niż class, bo chyba nie ma sensu nigdzie powtarzać tego elementu.
Wszystkie ikony, zrobiłbym jako listę
3. Można się zastanowić czy zamiast pisania wszędzie dużymi literami, nie lepiej zrobić tego przez CSS
4.
Akapit -> <p>
5. Brak Ci obycia z HTML5. Przeczytaj jakieś artykuły na ten temat, żebyś miał większe wyczucie. Np. brak: <footer>
6.
Użyłbym listy + <a> dla linków
Pozdrawiam i życzę coraz lepszego kodu.
Jak na początek nie jest źle. Moje uwagi( nie wszystkie ze względu na godzinę, pisane "na szybko") :
1.
Kod
<div id="logo">
<h1>STUDIO-PAGE</h1>
<h2>TWORZENIE STRON INTERNETOWYCH </h2>
</div>
Po co ten div?<h1>STUDIO-PAGE</h1>
<h2>TWORZENIE STRON INTERNETOWYCH </h2>
</div>
2.
Kod
<div id="header-right">
<div id="social">
<div class="icon"> <div class="facebook"></div>
</div>
<div class="icon"> <div class="tweeter"></div>
</div>
<div class="icon"> <div class="mail"></div>
</div>
</div>
<div class="clr"> </div>
<div class="contact">
tel: 123-456-789
</div>
</div>
<div id="social">
<div class="icon"> <div class="facebook"></div>
</div>
<div class="icon"> <div class="tweeter"></div>
</div>
<div class="icon"> <div class="mail"></div>
</div>
</div>
<div class="clr"> </div>
<div class="contact">
tel: 123-456-789
</div>
</div>
Są też inne znaczniki, niż div class="contact". Np. span. Poza tym w tym miejscu, lepsze będzie id, niż class, bo chyba nie ma sensu nigdzie powtarzać tego elementu.
Wszystkie ikony, zrobiłbym jako listę
3. Można się zastanowić czy zamiast pisania wszędzie dużymi literami, nie lepiej zrobić tego przez CSS
4.
Kod
<div id="slider-text">
W przeciwieństwie (..) amet...”.
</div>
W przeciwieństwie (..) amet...”.
</div>
Akapit -> <p>
5. Brak Ci obycia z HTML5. Przeczytaj jakieś artykuły na ten temat, żebyś miał większe wyczucie. Np. brak: <footer>
6.
Kod
<h2> POZOSTAŁE STRONY </h2>
www.wp.pl
<hr/>
www.onet.pl
<hr/>
www.allegro.pl
<hr/>
www.youtube.pl
<hr/>
www.wp.pl
<hr/>
www.onet.pl
<hr/>
www.allegro.pl
<hr/>
www.youtube.pl
<hr/>
Użyłbym listy + <a> dla linków
Pozdrawiam i życzę coraz lepszego kodu.
Robisz strony www, a nie trumny 
Weź to pod uwagę, przy "kolorowaniu" strony.
Weź to pod uwagę, przy "kolorowaniu" strony.
kamil4u -> poprawiłem footer. Tam gdzie jest logo dałem diva bo na początku było logo graficzne ale na razie zostawiłem w spokoju.
Contact jest class ponieważ chciałbym w innym miejscu umieścić tą klasę.
Poprawiłem kolor trumny 
Contact jest class ponieważ chciałbym w innym miejscu umieścić tą klasę.
Poprawiłem kolor trumny
1. HTML5: polecam jeszcze zainteresować się meta tagami ("2. XHTML Metainformation Vocabulary") + atrybutem role ("3. XHTML Role Vocabulary"): link
2.
ja zawsze tak układam strony, aby następny element z "clear: both" załatwił tę sprawę
3. Viewport Meta Tag For Non-Responsive Design
4. "O TWORZENIU STRON" nie powinno być czasem jako aside?
5. <html lang="pl"> - a się czepiam...
6. możesz mieć problem z wyświetlaniem w różnych przeglądarkach:
tego mi w css brakuje
ogólnie w kodzie kilka poprawek, kilka kolejnych artykułów przeczytanych, i będziesz w tym b. dobry (wielki + za np. transition: background 0.5s ease;), jednak jeśli chodzi o wymiar estetyczny to trochę więcej się pomęczysz zanim dojdziesz do perfekcji (takie skromne zdanie)
podsumowując: kod dobry, wygląd masakra
2.
ja zawsze tak układam strony, aby następny element z "clear: both" załatwił tę sprawę
3. Viewport Meta Tag For Non-Responsive Design
4. "O TWORZENIU STRON" nie powinno być czasem jako aside?
5. <html lang="pl"> - a się czepiam...
6. możesz mieć problem z wyświetlaniem w różnych przeglądarkach:
tego mi w css brakuje
ogólnie w kodzie kilka poprawek, kilka kolejnych artykułów przeczytanych, i będziesz w tym b. dobry (wielki + za np. transition: background 0.5s ease;), jednak jeśli chodzi o wymiar estetyczny to trochę więcej się pomęczysz zanim dojdziesz do perfekcji (takie skromne zdanie)
podsumowując: kod dobry, wygląd masakra
Cytat(r4xz @ 7.01.2013, 14:17:15 ) 
1. HTML5: polecam jeszcze zainteresować się meta tagami ("2. XHTML Metainformation Vocabulary") + atrybutem role ("3. XHTML Role Vocabulary"): link
2.
ja zawsze tak układam strony, aby następny element z "clear: both" załatwił tę sprawę
3. Viewport Meta Tag For Non-Responsive Design
4. "O TWORZENIU STRON" nie powinno być czasem jako aside?
5. <html lang="pl"> - a się czepiam...
6. możesz mieć problem z wyświetlaniem w różnych przeglądarkach:
tego mi w css brakuje
ogólnie w kodzie kilka poprawek, kilka kolejnych artykułów przeczytanych, i będziesz w tym b. dobry (wielki + za np. transition: background 0.5s ease;), jednak jeśli chodzi o wymiar estetyczny to trochę więcej się pomęczysz zanim dojdziesz do perfekcji (takie skromne zdanie)
podsumowując: kod dobry, wygląd masakra
2.
ja zawsze tak układam strony, aby następny element z "clear: both" załatwił tę sprawę
3. Viewport Meta Tag For Non-Responsive Design
4. "O TWORZENIU STRON" nie powinno być czasem jako aside?
5. <html lang="pl"> - a się czepiam...
6. możesz mieć problem z wyświetlaniem w różnych przeglądarkach:
tego mi w css brakuje
ogólnie w kodzie kilka poprawek, kilka kolejnych artykułów przeczytanych, i będziesz w tym b. dobry (wielki + za np. transition: background 0.5s ease;), jednak jeśli chodzi o wymiar estetyczny to trochę więcej się pomęczysz zanim dojdziesz do perfekcji (takie skromne zdanie)
podsumowując: kod dobry, wygląd masakra
Dzięki
. W sumie z HTML5 nie dawno ruszyłem. CSS3 troszkę dłużej... Wygląd masakra ? - w sensie negatywnym czy pozytywnym ;p?
Cytat(piotr3161 @ 7.01.2013, 14:39:53 )
Wygląd masakra ? - w sensie negatywnym czy pozytywnym ;p?
odsyłam do themeforest, templatemonster oraz opinii ("pogrzebowych") na forum... i już wiadomo w jakim sensie
zmienłem właśnie troszkę wygląd. Natomiast jeśli chodzi o zdjęcie w TOPie to jest przykładowe .
.
Cytat
Tam gdzie jest logo dałem diva bo na początku było logo graficzne ale na razie zostawiłem w spokoju.
Nie ma znaczenia.
Cytat
Contact jest class ponieważ chciałbym w innym miejscu umieścić tą klasę.
U Ciebie w kodzie ta klasa odpowiedzialna jest głównie za pozycję, więc raczej nie wykorzystasz jej drugi raz. Ew. nazwa byłaby niepasująca.
Popraw też resztę
Cytat(kamil4u @ 7.01.2013, 00:28:34 )
Poza tym w tym miejscu, lepsze będzie id, niż class, bo chyba nie ma sensu nigdzie powtarzać tego elementu.
nie zgodzę się, w css najlepiej używać tylko i wyłącznie klas chyba że masz 100% pewności że dany element nie będzie użyty ponownie - ale i tu można by zrobić klasę.
Dlaczego?
Odpowiedz jest jest bardzo prosta: nigdy nie wiadomo co się zmieni w projekcie.
Bardzo często dostaje szablony pocięte w taki sposób że są używane id i wtedy klient wysyła uwagę typu "chciałbym żeby w tym miejscu były trzy produkty a nie jeden". I co wtedy ? I tak muszę przerabiać wszystkie id na klasy.
Wniosek jest bardzo prosty id tylko dla js, a dla css tylko i wyłącznie klasy
Ja się z tym nie zgodzę. "Nie ma sensu używać np. akapitów <p>, bo klient może w przyszłości to zmieni. Nie ma sensu używać spanów, bo może w przyszłości będzie tam więcej tekstu." Itd. Po to są odpowiednie narzędzie, aby z nich korzystać.
Jasne warto pomyśleć nad przyszłością, ale nie w tym przypadku. Jak robimy panel boczny( taki box ) to jasne, że w przyszłości może się pojawić ich więcej i należy użyć class, ale gdy wstawiamy np. motto to wypadałoby dać id( oczywiście, jeśli w ogóle potrzebujemy ). Gdy klient stwierdzi, że jego firma od tej pory będzie miała dwa motta, to dopiero wtedy warto to zmieniać.
Poza tym głownie chodziło mi o to, żeby wstawić tam <span-a>, zamiast <div-a>, a przy okazji zwróciłem uwagę na klasę, której kod wygląda:
Nie! Trzeba robić tak, żeby było sensownie, logicznie i stosować w zależności od potrzeb. I, aby w ew. przyszłości łatwo móc się dostać do kluczowych elementów przez DOM.
Nie chce tutaj wywoływać niepotrzebnej dyskusji. Jeśli nie masz więcej argumentów "za" lub "przeciw", to uznajmy, że każdy może robić wedle swoich zwyczajów. Natomiast, jeśli masz coś do dodania, to z chęcią przeczytam
Pozdrawiam i życzę miłego dnia
Jasne warto pomyśleć nad przyszłością, ale nie w tym przypadku. Jak robimy panel boczny( taki box ) to jasne, że w przyszłości może się pojawić ich więcej i należy użyć class, ale gdy wstawiamy np. motto to wypadałoby dać id( oczywiście, jeśli w ogóle potrzebujemy ). Gdy klient stwierdzi, że jego firma od tej pory będzie miała dwa motta, to dopiero wtedy warto to zmieniać.
Poza tym głownie chodziło mi o to, żeby wstawić tam <span-a>, zamiast <div-a>, a przy okazji zwróciłem uwagę na klasę, której kod wygląda:
Kod
.contact
{
float: right;
margin: 10px 20px 0 0;
font-weight: bold;
}
i moim zdaniem lepiej dać tu id. Aczkolwiek nie jest to forma błędu, czy braku dobrych nawyków. Taka prywatna dygresja - jak ja bym to zrobił.{
float: right;
margin: 10px 20px 0 0;
font-weight: bold;
}
Cytat
Wniosek jest bardzo prosty id tylko dla js, a dla css tylko i wyłącznie klasy
Nie! Trzeba robić tak, żeby było sensownie, logicznie i stosować w zależności od potrzeb. I, aby w ew. przyszłości łatwo móc się dostać do kluczowych elementów przez DOM.
Nie chce tutaj wywoływać niepotrzebnej dyskusji. Jeśli nie masz więcej argumentów "za" lub "przeciw", to uznajmy, że każdy może robić wedle swoich zwyczajów. Natomiast, jeśli masz coś do dodania, to z chęcią przeczytam
Pozdrawiam i życzę miłego dnia
poprawione (głównie wygląd-odstępy, marginesy).
(głównie wygląd-odstępy, marginesy).
takie małe poprawki nic nie dają, osobiście nie widzę żadnej różnicy, totalnie żadnej...
czasami lepiej jest wyrzucić wszystko do kosza, zrobić "małe pranie mózgu", dodać do palety choć jeden kolor i ponownie spróbować swoich sił zaczynając od początku (takiego całkowitego - odrywając się totalnie od poprzedniej koncepcji) - spróbuj!
czasami lepiej jest wyrzucić wszystko do kosza, zrobić "małe pranie mózgu", dodać do palety choć jeden kolor i ponownie spróbować swoich sił zaczynając od początku (takiego całkowitego - odrywając się totalnie od poprzedniej koncepcji) - spróbuj!
Za szaro na dole
Za mało paddingów
Za małe line-height
Tekst dawaj raczej bez "rozmycia" tz. "twardy" bo na stronie tak to wyglądać nie będzie
Na koniec - Większe odstępy!!
W porównaniu z 1 jest spory postęp. :-)
Za mało paddingów
Za małe line-height
Tekst dawaj raczej bez "rozmycia" tz. "twardy" bo na stronie tak to wyglądać nie będzie
Na koniec - Większe odstępy!!
W porównaniu z 1 jest spory postęp. :-)
dam Ci radę: weź jakiś porządny gotowy szablon, przerzuć go do gimpa/PS, potem zakoduj, a jak już całość zrobisz w 95% identyczne to usuń i wtedy spróbuj zrobić swój - może załapiesz dobre nawyki
Cytat(r4xz @ 15.01.2013, 19:49:19 )
dam Ci radę: weź jakiś porządny gotowy szablon, przerzuć go do gimpa/PS, potem zakoduj, a jak już całość zrobisz w 95% identyczne to usuń i wtedy spróbuj zrobić swój - może załapiesz dobre nawyki
czyli mój nie jest porzadny
?Wrzucam nowy polepszony. Starałem się na prawdę
http://serwer371.abc0.pl/portfolio/PORTFOLIO2.jpg
- nie używaj justowania dla małych kolumn, ilość pustej przestrzeni w stosunku do szerokości kolumny jest stanowczo zbyt duża, zamiast tego zainteresuj się dzieleniem wyrazów za pomocą znacznika "dywiz", (potocznie nazywanego pauzą albo myślnikiem?)
- typografia leży i kwiczy: porównując "co oferuje" i "ostatnio na blogu" różnica w rozmiarze interlinii jest ogromna i rzuca się w oczy - efekt jest taki, że tekst w "co oferuje" sprawia wrażenie rozstrzelonego, a "ostatnio na blogu" ściśniętego
- cienie tekstu: raz dajesz ostre (chociażby menu) a raz miękkie, dziwnie to wygląda
- znowu odnośnie typografi, często stosujesz pogrubienie, przez to strona wydaje się ciężka
- ikony: wg mnie filtr "faza i płaskorzeźba" (bo chyba tego użyłeś w PS) w ogóle tutaj nie pasuje
- mieszasz czcionki szeryfowe z bezszeryfowymi
ogólnie to strona baaaardzo przeciętna
- typografia leży i kwiczy: porównując "co oferuje" i "ostatnio na blogu" różnica w rozmiarze interlinii jest ogromna i rzuca się w oczy - efekt jest taki, że tekst w "co oferuje" sprawia wrażenie rozstrzelonego, a "ostatnio na blogu" ściśniętego
- cienie tekstu: raz dajesz ostre (chociażby menu) a raz miękkie, dziwnie to wygląda
- znowu odnośnie typografi, często stosujesz pogrubienie, przez to strona wydaje się ciężka
- ikony: wg mnie filtr "faza i płaskorzeźba" (bo chyba tego użyłeś w PS) w ogóle tutaj nie pasuje
- mieszasz czcionki szeryfowe z bezszeryfowymi
ogólnie to strona baaaardzo przeciętna
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.