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

Portfolio ocena

+2 głosów
567 wizyt
pytanie zadane 20 czerwca 2020 w HTML i CSS przez malvator Użytkownik (700 p.)

Witam,

Postanowiłem się poprawić i zbudować nowe portfolio (ostatnio tutaj dałem poprzednie do oceny).

Chciałbym Was prosić o ocenę ogólną strony i czy jest sens ją publikować, dodam że nie mam doświadczenia komercyjnego i jestem początkujący (bardzo chcę to zmienić).

Tutaj strona: https://maciej790.github.io

Z góry dziękuję za każdą konstruktywną krytykę

pozdrawiam.

1
komentarz 21 czerwca 2020 przez Wiciorny Ekspert (218,330 p.)
czy robiłeś to sam? Bo generalnie identyczne widziałem na tutorialu :D
1
komentarz 21 czerwca 2020 przez malvator Użytkownik (700 p.)
Wszystko robiłem sam, z głowy

A o jaki tutorial chodzi jeśli można wiedzieć?
1
komentarz 21 czerwca 2020 przez Wiciorny Ekspert (218,330 p.)
a tak pytam bo jak się bawiłem visualką to mam identyczne portfolio z tutoriala :D na youtube kriopka w kropke, nawet jak zaglądałem do kodu.
komentarz 1 lipca 2020 przez Aqua 4 Gaduła (3,220 p.)
Podasz (tak z ciekawości) link do tutoriala?

11 odpowiedzi

+4 głosów
odpowiedź 21 czerwca 2020 przez Dani3l Bywalec (2,160 p.)
Pisałem ci sporo uwag pod poprzednim postem a teraz tylko dodam , że jak na zajmowanie się webem 2,5 roku to strasznie średnio to wygląda. Chodzi mi o to , że nie wyróżniasz się niczym szczególnym. Taką stronę może spokojnie zrobić początkująca osoba po dobrym kursie z pomocą dokumnetacji czy SO. Jasne, nikt nie mówi że portfolio to musi być twoje najlepsze dzieło ale po prostu zrobiłeś coś co może zrobić praktycznie każdy początkujący. I ta ocena umiejętności w postaci kropek - to średni pomysł. `Tworzę nieziemskie strony` - no właśnie nie widać tego , bynajmniej po twoim portfolio :/. I portfolio powinno zawierać sekcje z twoimi projektami bo tak to proponujesz kota w worku :/

 

Pozdrawiam
komentarz 21 czerwca 2020 przez kukulim Mądrala (6,440 p.)
Własnie to samo miałem napisać. Słowo w słowo :)
komentarz 21 czerwca 2020 przez Wiciorny Ekspert (218,330 p.)

@Dani3l, 2,5 roku ? :D a takie pytanie zadałeś 2 miechy temu :D .... to nie coś nie tak ? 

3
komentarz 22 czerwca 2020 przez Dani3l Bywalec (2,160 p.)
Cześć Wiciorny , `2,5 roku` odnosiło się do informacji ,  którą kolega miał w portfolio a nie do mojego doświadczenia , być może źle ułożyłem zdanie,  chociaż moim zdaniem jest logiczne :p. Zadałem takie pytanie gdyż był to mój pierwszy kontakt z deploymentem aplikacji na netlify , gdyż dotychczas korzystałem z gh pages. Ale hmm to chyba nic złego oceniać innych kiedy ma się już jakąś wiedzę a jeśli napisałem coś źle to chętnie przyjme jakieś uwagi :) Polecam najpierw się upewnić o co chodzi danej osobie a potem wyciągać wnioski :) Zakładam , że dałeś downvote tylko przez to zdanie , które źle zrozumiałeś , no chyba że coś jeszcze napisałem źle to popraw mnie bo pewnie jesteś dużo bardziej doświadczony.

 

Pozdrawiam.
+2 głosów
odpowiedź 22 czerwca 2020 przez JayJay Mądrala (6,100 p.)

Jeżeli chodzi o kod, to:

  1. Uważam, że powinieneś zrezygnować z jQuery i przepisać funkcjonalności w czystym JS, jQuery jest coraz rzadziej używane, m. in. ze względu na rozwój czystego JS, a efekty których używasz można bez problemu uzyskać właśnie z użyciem CSS i czystego JS.
  2. W niektórych plikach brakuje spójnego formatowania kodu.
  3. Unikaj stylowania inline (w kodzie HTML)
  4. Postaraj się korzystać głównie z klas do stylowania elementów. Selektory takie jak `.contact_inside form input` przy drobnej zmianie struktury witryny mogą przestać działać lub działać nieprawidłowo. Poczytaj o metodyce BEM (Block Element Modifier).
  5. Ze względów dostępności, każdy `input` powinien mieć odpowiadający mu `label`.
  6. Linki zawierają tylko ikony, bez żadnych opisów tekstowych, przez co są niezrozumiałe dla czytników ekranowych.
  7. Strona jest niesemantyczna. Znaczną część znaczników `div` (i nie tylko) można zastąpić semantycznymi znacznikami HTML5.
  8. W niektórych plikach korzystasz ze zmiennych SCSS, a w innych już nie. Zmienne możesz zadeklarować w oddzielnym pliku, a potem zrobić tylko ich import w `index.scss`, przed pozostałymi plikami SCSS, żeby móc korzystać ze zmiennych w każdym z plików.
  9. Rozmiar czcionek dobrze jest definiować z użyciem `rem` oraz `em`.

 

Przydatne materiały:

 

 

 

komentarz 22 czerwca 2020 przez malvator Użytkownik (700 p.)
Dzięki, za ocenę, muszę jeszcze sporo poprawić.

Co do tego menu czyli zastąpienie jquery vanilla js, to mógłbyś mi wytłumaczyć jak zrobić

animowane rozwijane menu za pomocą samego js'a i css'a ?, bo w vanilla js nie ma możliwości animacji.

 

Pozdrawiam
komentarz 22 czerwca 2020 przez JayJay Mądrala (6,100 p.)
Można to zrobić np.tak, że w JS obsłużyć zdarzenie kliknięcia przycisku otwierającego/zamykającego menu. Gdy ktoś kliknie w przycisk przełączać (dodawać/usuwać) odpowiednią klasę CSS dla menu. W CSS skorzystać z `transition` (lub `animation`), aby proces pojawiania/zanikania menu był animowany.
komentarz 22 czerwca 2020 przez malvator Użytkownik (700 p.)
Czyli wystarczy stworzyć klasę w css:

. change{

Display: block

}

 

Oraz do menu dać transition?

Czy dobrze myślę?
komentarz 22 czerwca 2020 przez JayJay Mądrala (6,100 p.)

Bardziej coś w stylu:

.menu {
    transition: transform 0.2s ease-in-out;
    transform: translateY(0);
    /* other styles */
}
 
.menu--hidden {
    transform: translateY(-200px);
}

Właściwości `display` nie można animować, a np. animacja z użyciem `transform` należy do jednej z wydajniejszych.

Więcej o wydajnym animowaniu znajdziesz na HTML5 Rocks - High Performance Animations .

 

 

 

komentarz 23 czerwca 2020 przez malvator Użytkownik (700 p.)

Ok, załapałem wszystko już.

Mam tylko jeden problem, chciałbym aby to  menu nie wyjeżdżało z góry okna tylko wyjeżdżało z dolnej krawędzi zielonego  menu.

Czy doradziłbyś jakby to zrobić ?

Poniżej kod:



<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="container">
    <div class="menu">
      <div class="btn">
        <h1>MENU</h1>
      </div>
      <ul>
            <li><a href="#">aaa</a></li>
            <li><a href="#">aaa</a></li>
            <li><a href="#">aaa</a></li>
            <li><a href="#">aaa</a></li>  
      </ul>
    </div>
  </div>



<script src="script.js"></script>
</body>
</html>


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container{
    width: 100%;
    height: 4000px;
    margin-left: auto;
    margin-right: auto;
}

.menu{
    width: 100%;
    height: 70px;
    background-color: green;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    left: 0;
}

ul{
    width: 50%;
    height: 70px;
    background-color: orange;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

li{
    margin-right: 100px;
}

.btn{
    display: none;
}


@media (max-width: 800px) {

    .btn{
        display: block;
        position: absolute;
        line-height: 70px;
        right: 20px;
        background-color: red;
    }

    ul{
        margin-top: 70px;
        width: 100%;
        flex-direction: column;
        height: 300px;
        align-items: center;
        justify-content: center;
        transform: translateY(-370px);
        transition: all 1s ease-in-out;
        
    }

    li{
        margin: 0;
        line-height: 50px;
    }

    .open{
        transform: translateY(0);
    }

}


const btn = document.querySelector('.btn')
const element = document.querySelector('ul')

btn.addEventListener("click",  () =>{
    element.classList.toggle('open')

 
})

Dzięki za pomoc ;) 

komentarz 23 czerwca 2020 przez JayJay Mądrala (6,100 p.)

Ten efekt dość łatwo możesz uzyskać korzystając z właściwości z-index

Na przykład mamy taki fragment kodu HTML:

<header class="header">
  <button class="btn">
    Open menu
  </button>
</header>
<nav>
  <ul>
    <li><a href="#">aaa</a></li>
    <li><a href="#">aaa</a></li>
    <li><a href="#">aaa</a></li>
    <li><a href="#">aaa</a></li>
  </ul>
</nav>

Wystarczy w CSS dodać do styli elementu `header` właściwość `z-index` z jakąś dużą wartością (np. 999), tak aby ten element zawsze był "na wierzchu" (nie zapominając, że `z-index` nie działa z domyślnym `position: static`).

.header {
  position: fixed; /* any position other than static */
  left: 0;
  top: 0;
  z-index: 999;
  /* other styles */
}

 

komentarz 23 czerwca 2020 przez malvator Użytkownik (700 p.)
Mógłbyś może się odwołać do mojego kodu? Bo nie bardzo u mnie to działa i nie wiem czy nie tak zrozumiałem czy coś nie tak robię

 

I dziękuję Ci bardzo serdecznie za wkład pracy w Twoją pomoc
komentarz 24 czerwca 2020 przez JayJay Mądrala (6,100 p.)

Cała przyjemność po mojej stronie, a przechodząc już do kodu, to pożądany efekt można łątwo osiągnąć np. poprzez przeniesienie menu (listy `ul`) z `div`a o klasie `menu` do `div` o klasie `container`. Następnie w CSS dodajemy do klasy `menu` właściwość z-index z dużą wartością np. 999 i gotowe. JS bez zmian.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="menu">
        <div class="btn">
          <h1>MENU</h1>
        </div>
      </div>
      <ul>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
        <li><a href="#">aaa</a></li>
      </ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 4000px;
  margin-left: auto;
  margin-right: auto;
}

.menu {
  width: 100%;
  height: 70px;
  background-color: green;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999; /* here */
}

ul {
  width: 50%;
  height: 70px;
  background-color: orange;
  list-style-type: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

li {
  margin-right: 100px;
}

.btn {
  display: none;
}

@media (max-width: 800px) {
  .btn {
    display: block;
    position: absolute;
    line-height: 70px;
    right: 20px;
    background-color: red;
  }

  ul {
    margin-top: 70px;
    width: 100%;
    flex-direction: column;
    height: 300px;
    align-items: center;
    justify-content: center;
    transform: translateY(-370px);
    transition: all 1s ease-in-out;
  }

  li {
    margin: 0;
    line-height: 50px;
  }

  .open {
    transform: translateY(0);
  }
}

PS. Pewnie już zauważyłeś, że przytoczony przeze mnie wcześniej przykład kodu HTML, to tak naprawdę twój kod, tylko lekko zmodyfikowany - ze zmienioną strukturą i znacznikami `div` zastąpionymi odpowiednimi semantycznymi znacznikami. Nie jest to jedyne właściwe rozwiązanie, ale mam nadzieję, że będzie dla Ciebie przydatne.

0 głosów
odpowiedź 20 czerwca 2020 przez Bakkit Dyskutant (7,510 p.)
Na szybko rzuciłem okiem.

Odpal sobie stronę w szerokości np 866px (Cały tekst się rozlatuje). Do tego ja bym skrócił zakres ruchu animacji strzałki.
komentarz 20 czerwca 2020 przez malvator Użytkownik (700 p.)
Dzięki, tak zrobię
komentarz 20 czerwca 2020 przez Bakkit Dyskutant (7,510 p.)
Moim skromnym zdaniem pierwsza strona była lepsza, ale to chyba po prostu kwestia gustu.
komentarz 20 czerwca 2020 przez Tnifey Pasjonat (23,790 p.)
na tą strzałkę dałbym 'alternate ' zamiast 'reverse both'(?!), ale tak, strzałka robi za duży ruch :P
0 głosów
odpowiedź 20 czerwca 2020 przez Benek Szeryf (88,120 p.)
Dla mnie troszkę za bardzo zelentowa. W sensie, tak jakby zbyt mocno skręcała w stronę kursu HTML Mirosława.
0 głosów
odpowiedź 20 czerwca 2020 przez wojtek_suchy Mądrala (6,810 p.)
Ten formularz nie działa, po wpisaniu danych i kliknięciu wyślij dostaje:

405 Not Allowed
komentarz 20 czerwca 2020 przez malvator Użytkownik (700 p.)
Ponieważ na razie stoi na github'ie, a github nie obsługuje php za jakiś czas opublikuje stronę na pełnym hostingu i będzie śmigać
0 głosów
odpowiedź 21 czerwca 2020 przez niezalogowany
Witam! Mnie się podoba. Lepiej by było gdyby strzałka na stronie głównej nie skakała ma to zły wpływ na oczy. Także widziałem wcześniej kiedy prosiłeś o ocenę tego port folia kiedy wyglądało jeszcze nie tak, i wtedy było już okej a od tamtego momentu już trochę czasu minęło i uważam, że warto tworzyć nowe strony nawet poszukać klientów a nie zasiąść na portfoliu.

Pozdrawiam!
0 głosów
odpowiedź 21 czerwca 2020 przez KumberTwo Dyskutant (8,270 p.)

Na programowaniu się nie znam, ale znalazłem jeden błąd: "Wszystkie strony, które wykonuję są w pełni responsywne, czyli takie, które dobrze się wyświetlają na każdym urządzeniu na przykład smartphone, tablet czy duże monitory". Chodziło chyba o takie, które dobrze się wyświetlają na każdym urządzeniu, na przykład na smartphonie, tablecie czy dużym monitorze. A tak poza tym to okiem kogoś kto się nie zna strona wygląda bardzo ładnie. Jedynie słabym pomysłem wydają się kropki oznaczające Twoją znajomość danej technologi.

0 głosów
odpowiedź 22 czerwca 2020 przez KamQiX Dyskutant (8,930 p.)
Jeśli chodzi o kod to się nie wypowiem, bo się słabo na tym znam, ale jako projektant graficzny, powiem że od tej strony jest raczej średnio. Mało estetycznie, ogromne ciężkie ikony, pogrubiony tekst, niezrozumiałe wyrównania (np. w sekcji: "Lub wyślij do mnie maila, sms'a albo zadzwoń:".
0 głosów
odpowiedź 22 czerwca 2020 przez p099 Mądrala (6,390 p.)

Ortografia i dykcja w portfolio pozostawia wiele do życzenia, portfolio nie zadowala i teksty wychodzą poza krawędzie. Nie wyróżniasz się niczym spośród miliona twórców stron internetowych, i dodawanie do portfolio podstaw Vue.js wygląda okropnie tak samo z podstawami PHP i MySQL bo nikt nie wie co ty potrafisz i jaki ty sobie niby poziom ustawiasz. Podgląd osiągnięć w danym języku i technologii bym wywalił bo nie ma sensu i statystyk poglądowych które możemy do tego odwoływać. Kod strony jest bardzo nieczytelny i wiele miejsca zajmuje tag stylu z HTML. Strona jest strasznie statyczna i nie posiada JavaScript poza elementem menu, strony portfolio powinny być dynamiczne i oferować cokolwiek co jest związane z twoimi preferencjami bo na razie wygląda na to że kod:
 



$('.btn_open').click(function() {

$('.btn_open').css({display: "none"})
$('.btn_close').css({display: "block"})
  
$('.menu').stop().slideToggle(300);
})

$('.btn_close').click(function() {

  $('.btn_open').css({display: "block"})
  $('.btn_close').css({display: "none"})
    
  $('.menu').stop().slideToggle(300);
  })

  if ($(window).width() < 800) {
    $('li').click(function() {
      $('.btn_open').css({display: "block"})
      $('.btn_close').css({display: "none"})
        
      $('.menu').stop().slideToggle(300);
      })
  }

$( window ).resize(function() {
  if ($(window).width() > 800) {
    $('.menu').css({display: "flex"})
    $('.btn_close').css({display: "none"})
    $('.btn_open').css({display: "block"})
}
});

$( window ).resize(function() {
  if ($(window).width() < 800) {
    $('.menu').css({display:"none"})
}
});


jest oceniany na 3 punkty w twojej nieznanej skali..

0 głosów
odpowiedź 1 lipca 2020 przez Aqua 4 Gaduła (3,220 p.)
edycja 1 lipca 2020 przez Aqua 4

Krótki review Twojego portfolio z perspektywy potencjalnego klienta

Myślę, że portfolio wygląda całkiem dobrze, moim zdaniem jednak trochę przesadziłeś z wodotryskami.

1. Jak już dużo osób mówiło ta strzałka potrafi doprowadzić do szaleństwa. Najlepszym pomysłem byłoby zrobienie jej nieruchomej, lub jeśli naprawdę zależy Ci na animacji - zmniejszyć prędkość poruszania się, odległość na jaką ucieka oraz przede wszystkim dodać przejście z dołu na górę, ponieważ ta brak przejścia gryzie w oczy. Na twoim miejscu, to jest luźna sugestia, zmieniłbym jej kształt na coś podobnego do tego, oprócz tego dobrym pomysłem byłoby trochę mocniejsze przyciemnienie tła (tego z komputerem), przynajmniej według mnie.

 

2. Po naciśnięciu strzałki, przynajmniej u mnie ucina górną linię tekstu. To samo dzieje się z zdjęciami na dole. Nie byłoby, żeby pokazywały się wtedy same zdjęcia, bez tekstu?

Liniaaa

Dla mnie lepiej by było, gdyby po zjechaniu użytkownik zobaczył to:

P.S. tekst jest urywany także gdy klika się opcje w menu. Należy to naprawić.

 

3. Tekst wyjeżdża poza ramki! Nie jest to może jakaś wada uniemożliwiająca czytanie strony, jednak skutecznie odstrasza klientów. Trzeba coś z tym zrobić. Można np. skrócić tekst, w zależności od wymiarów ekranu lub zmniejszyć czcionkę (w razie potrzeby).

Wyjechało poza ramkę

 

4. Chodzi o kropkową ocenę umiejętności. Myślę, że sama w sobie jest dobra; widziałem, a właściwie robiłem gorsze :). Mi przynajmniej się podobają. Mam jednak do nich kilka zastrzeżeń:

     - Kropki są trochę za duże i mają za duży margin

     - Odległość pomiędzy kropkami nie zmniejsza się przy zmniejszaniu strony (przez klikanie +/-)

     - Lepiej by było, gdyby kropki na monitorach lg i większych były ustawione w dwóch rzędach

     - Ikonka JS jest prawie niewidoczna

TAK JEST:

Kropki

Moja koncepcja (problem z ikoną JS zostawiam Tobie, ponieważ wymagałoby to zbyt dużej zmiany wielu elementów strony, co mogłoby być niezgodne z twoją koncepcją):

Kropki też

5. Dobrym pomysłem byłoby więcej informacji na stopce oraz zmienienie czarnego tekstu (również na stopce)

Icon's made by:

picture's made by:

na biały tekst

Icon's made by:

picture's made by:

Biały lepiej wygląda na tle powyżej.

6. Kontaktowa textarea na dole dziwnie się zachowuje, gdy chcę zmienić jej rozmiar. Zmienia się wolniej niż poruszam kursorem. Upewnij się, że nie ma żadnych tranzycji wysokości i szerokości.

7. Przejścia wykonują się strasznie wolno. Lepiej byłoby gdyby do połowy "wykonały" się poza polem widzenia użytkownika, a potem tylko subtelnie zmieniały opacity i/lub pozycję. Nie należy także z nimi przesadzać.

8. Myślę, że lepiej aby paralaksy były łagodniejsze - nieruchome zdjęcia w tle powinny się ruszać, ale wolniej od reszty. Do tego efektu polecam rellax.js.

Po lekkim odświeżeniu strony rzeczywiście będzie można mówić o "nieziemskich stronach" :). Jeśli ktoś się z czymś nie zgadza - proszę mnie poprawić. Jestem otwarty na każdą sugestię. Oceń według własnego uznania.

–1 głos
odpowiedź 1 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)

Niezłe, jednak poprawiłbym kilka rzeczy:

  • W moim odczuciu, po naciśnięciu na strzałkę lub menu, strona przewija się trochę za nisko
  • Zmieniłbym JQUERY na jQuery - tak wygląda oficjalny zapis [Oficjalna strona]
  • Zgodnie z tematyką forum, staram się zwracać uwagę na "informatyczne" aspekty Twojej strony, ale słowo "Ogarniam" raczej nie pasuje do portfolio
  • "tworzę w tym najczęściej mailingi oraz różne inne funkcjonalności/aplikacje. " Chyba powinno być "tworzę w nich najczęściej mailingi oraz różne inne funkcjonalności/aplikacje. "
  • W formularzu kontaktowym w tym przypadku niezbyt pasują podkreślenia
  • Zwróć uwagę na swój język, strona jest napisana "mało oficjalnie"

Kodu jak takiego nie będę oceniać, ponieważ zrobiło to już kilka osób wcześniej i nie widzę potrzeby niczego dopowiadać

Podobne pytania

+5 głosów
5 odpowiedzi 373 wizyt
pytanie zadane 14 czerwca 2020 w HTML i CSS przez malvator Użytkownik (700 p.)
+1 głos
2 odpowiedzi 231 wizyt
0 głosów
2 odpowiedzi 374 wizyt
pytanie zadane 22 marca 2019 w Nasze projekty przez Dawid_Predecki Obywatel (1,610 p.)

87,903 zapytań

136,489 odpowiedzi

304,301 komentarzy

58,284 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.

...