• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Moja pierwsza strona www - do Waszej oceny

0 głosów
324 wizyt
pytanie zadane 9 lutego 2020 w Nasze projekty przez AntoniusBlock Nowicjusz (140 p.)
Witam wszystkich :-)

Uczę się obecnie front endu i jako swój pierwszy projekt postanowiłem stworzyć stronkę, która w przyszłości posłuży za moje portfolio. W tej chwili ma mi pomóc przypomnieć sobie html'a i css'a oraz przećwiczyć podstawy vue, którego obecnie się uczę.

http://mpaluszynski.pl/

Nie jest jeszcze gotowa - przede wszystkim brakuje responsywności (bardzo kiepsko wygląda na telefonach).

Będę wdzięczny za wszelkie uwagi oraz porady.

3 odpowiedzi

+1 głos
odpowiedź 9 lutego 2020 przez Artek Stary wyjadacz (11,760 p.)

Co zauważyłem ale pewnie coś by się jeszcze znalazło :

1) Patrzę na ten kod w vue 

openModal3: function() {
            this.buttonStyle1 = 'display:none;',
            this.modalStyle1 = 'display:none;',
            this.buttonStyle2 = 'display:none;';
            this.modalStyle2 = 'display:none;',
            this.buttonStyle3 = 'display:none;',
            this.modalStyle3 = 'display:flex;',
            this.buttonStyle4 = 'display:none;',
            this.modalStyle4 = 'display:none;',
            this.lnStyle = 'display:none;',
            this.ghStyle = 'display:none;',
            this.fbStyle = 'display:none;',
            this.instaStyle = 'display:none;',
            this.twitterStyle = 'display:none;',
            this.backgroundStyle = 'background: rgba(0,0,0, 0.45);'
        }

Jest bardzo podobny do kodu dla metody openModal4 openModal2 it. Uważam, że lepiej byłoby zrobić coś w stylu jedna funkcja która ma np. 1 parametr i aktywuje element o podanym numerze. Takie rozwiązanie podpada pod łamanie DRY (don't repeat yourself)

2) Dałbym element footer bo chyba coś takiego masz na stronie

3) Nie dodawaj ikonek za pomocą <i> - poczytaj w internecie dlaczego. 

4)Jeżeli w elemencie button masz tylko literę x to dla kogoś kto korzysta z czytnika ekranowego może nie być jasne co dany button robi

 

komentarz 9 lutego 2020 przez AntoniusBlock Nowicjusz (140 p.)
edycja 9 lutego 2020 przez AntoniusBlock
1) Masz oczywiście rację, poprawiłem kod tak by był bardziej zwięzły myślę ,że obecny efekt jest dużo lepszy.

2) Poprawione

3) Również poprawione. Fontello, które ściągnąłem z sieci miały domyślnie ustawione <i> w pliku demo, po prostu nieświadomie skopiowałem.

4) Poprawiłem na &times. Robiąc responsywność, dodam dodatkowy przycisk na dole modala

Wielkie dzięki za pomoc. Jeśli znajdziesz coś jeszcze będę wdzięczny za każdą poradę.
komentarz 9 lutego 2020 przez Artek Stary wyjadacz (11,760 p.)
Też za pierwszym razem nadziałem się na dodawanie ikonek poprzez <i></i>. Faktycznie to dosyć powszechny błąd.
+1 głos
odpowiedź 9 lutego 2020 przez niezalogowany
W przypadku div.modals__window zmienił bym wysokość na auto lub w vh i dodać overflow-y. Na przykład CV nie mieści się i jest treść bez tła.
komentarz 9 lutego 2020 przez AntoniusBlock Nowicjusz (140 p.)
Faktycznie auto znacznie poprawiło wygląd, dzięki.
+1 głos
odpowiedź 9 lutego 2020 przez Artek Stary wyjadacz (11,760 p.)

Obczaiłem poprawiony kod funkcji i doszedłem do takich wniosków. Jeżeli ten styl miałby pozostać to zamiast if else bardziej nadaje się do tego switch. Chcąc jeszcze odchudzić kod funkcji można by zrobić w taki sposób. Masz tablicę zawierającą elementy(liczby) od 1 do 4 czy tam ile potrzebujesz. 

let modalStyleNumbers = [1,2,3,4];

Pokazujesz ten numer jaki podano w parametrze.

this["modalStyle" + newValue].style.display = "flex"

Usuwasz z tablicy ten numer 

modalStyleNumbers.splice(newValue - 1,1)

I w pętli zmieniasz pozostałe elementy na display none. Pętla for of albo for in, zawsze mi się mylą te dwie.

komentarz 9 lutego 2020 przez AntoniusBlock Nowicjusz (140 p.)
Ciekawe, obczaję i spróbuję zaimplementować Twój sposób, pewnie w przyszły weekend, dzięki :-)

Podobne pytania

0 głosów
1 odpowiedź 223 wizyt
pytanie zadane 29 listopada 2019 w Nasze projekty przez Marcin90 Użytkownik (500 p.)
+1 głos
3 odpowiedzi 375 wizyt
pytanie zadane 7 lutego 2018 w HTML i CSS przez PolYGlok Pasjonat (18,930 p.)
+2 głosów
2 odpowiedzi 174 wizyt

87,916 zapytań

136,501 odpowiedzi

304,327 komentarzy

58,290 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...