Moja 'pierwsza' strona www Html+css+js-Ocena

Question

Witam,

Robie projekt do 'szkoły' i prosze o ocene. Zaznaczam że strona jest nie skończona i kilka rzeczy nie działa m.in czcionki. i respo

https://github.com/PolYGlok/School-project

Comments

Jak dla mnie wypas :)

---

Cieszę się że się podoba :)

Answer 1

Cześć, parę małych uwag odnośnie JS tak na szybko:

1. Unikaj tworzenia zmiennych globalnych, np. w pliku about us: zmienna num.
2. Po instrukcji IF staraj się zawsze pisać klamerki (https://github.com/PolYGlok/School-project/blob/master/weekend%20w%20Edynburgu/About%20Us.html#L27) nawet jeśli masz tylko jedną instrukcję. Przy jednej działa oki, ale za chwilę jak dodasz więcej instrukcji dla tego warunku to kod się rozleci...
3. Zamiast wprowadzać przez innerHTML tag img jako ciąg znakowy lepiej poczytać o tworzeniu i dodawaniu elementów DOM, np. document.createElement, document.createDocumentFragment.
4. Skrypty polecam wyrzucić do oddzielnego pliku/plików i podpinać je na końcu, przed zamknięciem body. Są jeszcze atrybuty defer/async ale na razie starczy jak dasz na koniec body. Unikaj tworzenia bałaganu - w tej chwili masz skrypty w różnych miejscach na stronie. Skrypty na początku daje się tylko w uzasadnionych przypadkach i w praktyce rzadko jest to konieczne.
5. Unikaj jak ognia stylowania inline (https://github.com/PolYGlok/School-project/blob/master/weekend%20w%20Edynburgu/About%20Us.html#L118). Style takie są praktycznie niemożliwe do nadpisania i robi się wielki bałagan - część w inline, część w css i jeszcze coś w JS... przy większym temacie nie ogarniesz tego... Jako inline osobiście uważam za dopuszczalne chyba tylko background-image np. jeśli generujesz elementy w jakiś pętli (np. z poziomu JS), a style do tego masz w osobnym pliku CSS, ale i to nie zawsze - przed każdym zastosowaniem inline należy rozważyć, czy nie zajdzie czasem potrzeba modyfikacji tego.
6. (https://github.com/PolYGlok/School-project/blob/master/weekend%20w%20Edynburgu/About%20Us.html#L118) nie wiem jak to jest w jQuery bo nie korzystam z tego na codzień, ale w vanillaJS jest element.classList z metodą toggle, która pobiera drugi argument jako warunek zmiany danej klasy (classList.toggle) co pozwala skrócić takie zapisy. Być może w jQuery też jest coś podobnego.
7. Korzystasz z jQuery w wersji 1.11.1, a jest już chyba wersja 3? Nie wiem szczerze mówiąc jakie są dokładnie różnice bo nie śledzę za bardzo tej biblioteki, ale tak tylko sygnalizuję, bo może warto przejść na nowszą wersję.
8. Generalnie w tak podstawowym wykorzystaniu JS proponowałbym porzucić jQuery i pobawić się vanillaJS.
9. setTimeout("changeslide()",4500) - nie stosuj takiego zapisu! Jeśli wywołujesz metodę bez argumentów to:

   setTimeout( function, time );

   a jeśli z argumentami to:

   setTimeout( () => {
       function( args );
   }, time );

10. Nie stosuj spacji w nazwach plików! Jeśli chcesz zrobić odstęp to używaj myślników albo podkreśleń. Nazwy folderów raz z małych, raz z wielkich... unikaj tego - wybierz jedną opcję (polecam małe litery).
11. Masz wiele powtarzającego się kodu JS, więc tym bardziej wydziel to do osobnego pliku. Unikaj wielokrotnego powtarzania się.
12. Poczytaj o RWD (strony responsywne). Nie będę tutaj pisał o jednostkach px itp. bo wszystko znajdziesz w necie pod hasłem RWD.
13. Unikaj klas "tw", "fb", "yt"... Podstawowe pytanie, czy za miesiąc czy pół roku będziesz w stanie dojść która klasa co oznacza, do czego pasuje? Jeśli tak to oki, ale polecam robić bardziej jednoznaczne nazewnictwo.

To tak na początek. Nie oceniam grafiki bo nie mam teraz za bardzo możliwości sklonowania sobie repo i opalenia, a zresztą akurat w grafice to mocny na pewno nie jestem (to tak delikatnie mówiąc :) więc tu niech lepiej się inni wypowiedzą.

Pozdrawiam i życzę powodzenia w nauce!

 

Comments

Dziękuje za dosyć obszerny komentarz w wiekszości o js.

"1,2".Tak naprawde mało wiem o js i te funkcje są skopiowane a w slajderze musiałem zmienić "numer zdjecia" na angielski gdyż jezyk tego wymaga. Chyba jest to  troche pozmieniany kod ale działa a wersja biblioteki byla razem z kodem.

"3"-OK

"4"-nie wiedziałem ze scrypty można dać do osobnego pliku-myślałem że nie zadziałaja jak nie będą na górze 'body'. Teraz widzę że jest funkcja "onload" w sumie nie musi być tam tego tyle.<--dzięki

"5"- ok. Postaram sie pamiętać.

"6"-Popatrze za tym.

"7"-jak 1

"8"-Jeszcze tego nie tykałem.

"9"-ok<--- tej cześci najbardziej sie obawiałem.

"10"-Na to akuratnie nie zwracałem uwagi :)

"11"-o tym pamietam ale myślałem że nie ma innej możliwości.

"12"-Tego sie dopiero ucze i zanim to zostanie wdrążone to może potrwać :)

"13"- to akurat dosyć znane skróty to raczej nie powinienem zapomniec a mniej pisania.

Dziekuje jeszcze raz to było pouczające.

Answer 2

<body onload="changeslide()">

Istnieje coś takiego ja addEventListener

<img src="" width=50%/>

Obrazek bez alt. Width powinno się stylować w CSS

<div style="clear:both"></div>

Nie korzystaj z tego

<a name="City_Center"></a>

?

W jednym pliku:

Na początku importujesz jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

I na końcu

<script src="jquery-1.12.2.min.js"></script>

Poza tym kompletny brak semantyki kodu (mamy coś takiego jak HTML5). Tagi <nav>, <header>, <footer> itd.

Answer 3

Następnym krokiem w css powinno być zainteresowanie się flexboxem.(No i preprocesory oczywiście :D) Nie wnikałem w kod js, ale skrypty wrzuć do osobnego pliku. Ps. Dopiero zobaczyłem, że do szkoły. No to git, ale polecam się zainteresować tym o czym pisałem wyżej. Tak na przyszłość. Powodzenia!