Ocena strony/Pomoc z responywnością --- Jestem początkujący [ankieta]

Question

Witam,

Pisania w html i css uczę się od tygodnia a to jest mój pierwszy post na tej stronie <!--jak co robię źle to nie hejtować-->.

Dopiero zaczynam i napotkałem pewne problemy podczas tworzenia strony http://www.krzymado.interiowo.pl 

https://codepen.io/Krzymado/pen/LOqgxx <!--nie wiem jak w CodePen zapisać zdjęcia więc tam kod jest bez, przepraszam-->

chciałby aby w miarę możliwości pomógł mi ktoś z:

1 Ogólną oceną jakości strony, wytknięcie błędów.

2 Jak sprawić aby storna była ładna na urządzeniach mobilnych i innych komputerach.

3 Odpowiedzieć czemu w divie id="header" w CSS nie mogę użyć zamiast wysokości po prostu: 

#header {
    overflow: hidden;
    padding-bottom: 20000px;
    margin-bottom: -20000px;
}

Tak jak to robię z dalszymi częściami strony.

4. Jak zrobić by w postach zdjęcia i tekst zajmowały zawsze 100% szerokości diva. <!--wiem że zdjęcia się wolno ładują i powinny być dodane mniejsze-->

Z góry dziękuję za pomoc i poświęcony czas.

 

Możliwe odpowiedzi:

Dobra strona jak na tydzień nauki (7 głosów, 100%)

Słaba strona jak na tydzień nauki (0 głosów)

Answer 1

1.

Jak na tydzień nauki dobra strona ale skupie się na błędach.

• Sam design strony do poprawki (nie jakiejś drastycznej).
• Crossbrowser zobacz ponieważ już na desktopie są błędy
• Nie masz hoverów na elementach interaktwnych.
• Banery pobierz/pierwszy raz za bardzo agresywne i user-select na nich nie wiem czemu zablokowany.

Warstwa kodu:

• Nie stosuje się polskiego nazewnictwa obiektów lepiej nabierać nawyków od początku :)
• stosuj znaczniki html5
• Do odstępów stosuje się margin/padding.
• podst1 post2 idp.. czegoś takiego też się nie stosuje tylko operuje na tablicach.
• Ogólnie całe te posty proszą się o table-row albo flexboxa.

Strona jak na tydzień nauki spoko,

2. Media querry/ definowanie wartości procentowych a nie w pikselach

4. width: 100%;

Comments

Bardzo dziękuję za porady, nie wszystko dokładnie rozumiem z tego co napisałeś ale sobie wygoogluje. W razie czego będę pisał.

Answer 2

Jak na tydzień nauki to spoko. Nie będę tutaj wypisywał wielu rzeczy, które można by pozmieniać bo do wielu za chwilę sam dojdziesz z dalszą nauką. Rzucę Ci tylko parę haseł jakie myślę, że warto żebyś wyszukał w google:

1. poczytaj o różnych jednostkach px/em/rem/vh/vw kiedy które i dlaczego.
2. poczytaj o siatkach grid i flexbox. Do flex polecam artykuły na: http://devblog.eu/2017/05/flexbox-czesc-czwarta/ (ten i wcześniejsze 3 części).
3. poczytaj o klasach w CSS i wyguglaj sobie "stylowanie po id" żeby poczytać, dlaczego to zły pomysł (jak również po tagach html)
4. po co robisz te padding i margin po 20000px? usuń to i napisz co chcesz osiągnąć, bo na pewno źle podchodzisz do problemu.
5. nie ustawiaj właściwości typu width w tagach html - mówię tu np. o img. Nadaj np. obrazkowi klasę i ją styluj.
6. Staraj się od początku wyrabiać sobie nawyki sensownych nazw dla ID, zmiennych itp. Na przykład "pier1", założę się, że za pół roku nie będziesz wiedział do czego się to odnosi :) I taka sugestia, zacznij powoli robić nazwy id, klas, zmiennych po angielsku. Lepiej czasem zrobić stronkę 2x dłużej, ale nauczyć się przy okazji paru innych rzeczy :)
7. poczytaj sobie coś pomału o tagach html5, o tzw. semantyce. Ale to na spokojnie, nikt nie wymaga abyś pierwszą stronkę od razu stawiał na header, nav, footer, section itp. Warto jednak wyrabiać sobie nawyki. Wiem po sobie, że czasem w pośpiechu człowiek robi te "div" i potem nie zawsze chce się już wracać i poprawiać :)
8. skrypty generalnie powinny wylecieć na koniec. Nie wiem za bardzo po co Ci np. Gemius (a tak na marginesie to jest jakaś darmowa jego wersja? bo ja korzystam ale tylko z płatnej i nawet nie szukałem wersji free). Chyba, że są one generowane jakoś automatycznie, nie wiem jak wygląda tworzenie stron na interiowo (możesz modyfikować index.html?). Polecam popatrzeć za lepszymi darmowymi hostingami, a jeśli myślisz na poważnie o webdewie to możesz wykupić sobie jakiś tani (np. na linuxpl mają za 50zł rocznie prosty serwerek, z domeną za 1 rok chyba za złotówkę jeśli dobrze pamiętam). Masz wtedy też możliwość wejścia na serwer np. przez Putty i nieco pobawienia się - to też pewna forma nauki i poznania bardziej "rzeczywistego" środowiska produkcyjnego.

A tak w kwestii samego HTML to polecam zrobić na stronie:

1. 1-2 tabelki (pobaw się ich ustawieniami itp.)
2. menu możesz zamienić na elementy ul-li i poćwiczyć listy html
3. zrób jakiś prosty formularz. na razie nie przejmuj się jego wysyłaniem itp. Pobaw się polami input, textarea, przyciskami itp. postyluj je w CSS...

To na początek :) Jeśli to Twoje początki z programowaniem to na razie JavaScript i back-end (np. PHP) zostawiłbym nieco z boku. 

A co do stron responsywnych na urządzenia mobilne to google i dwa hasła: @media in rwd oraz flexbox. Obejrzyj parę tutoriali video, poczytaj blogi itp. i szybko załapiesz co i jak :)

Plusik za dobre początki i powodzenia !

Comments

Z tym po 20000 chodzi o to aby divy zajmowały tyle co największy z nich. I w postach to działało. Pewnie jest na to jakiś prostrzy sposób.

---

Dziękuję za poświęcony czas

---

Niezbyt szczerze mówiąc rozumiem problem z tym div, ale nie ważne. Zostaw to. Poguglaj sobie i twórz kolejne projekty, a z czasem sam pewnie znajdziesz lepsze rozwiązanie Twojego problemu :)

---

Txh