• 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

VPS Starter Arubacloud
0 głosów
427 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,800 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,800 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,800 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ź 258 wizyt
pytanie zadane 29 listopada 2019 w Nasze projekty przez Marcin90 Użytkownik (500 p.)
+1 głos
3 odpowiedzi 627 wizyt
pytanie zadane 7 lutego 2018 w HTML i CSS przez PolYGlok Pasjonat (19,450 p.)
+2 głosów
2 odpowiedzi 230 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...