pierwsza strona - opinia

pytanie zadane 9 listopada 2022 w Nasze projekty przez juampi Użytkownik (610 p.)

Cześć!

Właśnie wrzuciłem swoją pierwszą stronę www na hosting - hosting darmowy, ponieważ jest to stan przejściowy strony i jak zrobię trochę więcej to kupie hosting i domenę.

Chciałbym was zapytać co myślicie, jaka jest wasza opinia :)

link: https://jcubing.000webhostapp.com

komentarz 13 listopada 2022 przez marilou15 Nowicjusz (100 p.)

Mi się podoba :D

komentarz 13 listopada 2022 przez juampi Użytkownik (610 p.)

Dzięki :)

komentarz 17 listopada 2022 przez Bart3on Użytkownik (620 p.)

@juampi, Kolor boxów za ciemny jak dla mnie. Bym go trochę podjaśnił pozatym git

komentarz 17 listopada 2022 przez juampi Użytkownik (610 p.)

właśnie skończyłem aktualizację :) zobacz sobie

3 odpowiedzi

odpowiedź 12 listopada 2022 przez toko Dyskutant (7,670 p.)
wybrane 17 listopada 2022 przez juampi

Najlepsza

Pomysł na stronę jest ok, materiał widzę, że chyba jeszcze niedokończony, więc nie będę oceniał, ale wykonanie (w sensie graficznym) jest średnie.

Masz baaaaaardzo dużą stopkę i trochę średnio to wygląda. To samo tyczy się heada - są tam tylko 4 słowa, bez obrazków, a zajmuje pół ekranu (Jcubing.pl, Kostki Rubika, Menu, i jakiś ciemnozielony pasek). Mogłoby fajnie wyglądać z logo obok JCubing.pl, lub jako tło. Zrobiłbym też tak, żeby JCubing.pl było linkiem do strony głównej - wiele osób tak robi i ludzie są przyzwyczajeni, że jak klika się logo lub nazwę czegoś, to prowadzi ich to do strony głównej. Dodatkowo nazwa w formie adresu jeszcze bardziej to sugeruje. W stopce masz linka do youtuba - jest tak zrobiony, że ciężko go zauważyć. Mógłbyś dodać jakąś ikonę youtuba lub jakiś iframe itp. z twojego kanału. Mógłbyś też zrobić, żeby mail prowadził do mailto:juampiifake@gmail.com

Co do głównej strony - trochę wszystko zbyt monotonnie, w tylko kolorystyce szaro-białej i część pogrubiona. Niektórych może to po prostu odstraszyć. Dodałbym więcej stylów, kolorów, może jakiś obrazek. Trochę większe wszystko i może jakoś sensowniej ułożone, niż po prostu pod sobą i wyśrodkowane.

Menu jest schowane i dla małej rozdzielczości jest ok, ale u mnie wysunięte nie przeszkadza (dopóki nie zasłania mi contentu z samego brzegu), więc zrobiłbym tak żeby do jakiejś rozdzielczości menu było schowane i do wysunięcia przez użytkownika, a jeśli jest większa szerokość ekranu - dołożyć menu obok kontentu, beż żadnego wysuwania i nasuwania się na zawartość.

Przeszkadza trochę też brak specjalnych, odróżniających się stylów linków, nie wiadomo co można kliknąć, a co nie. Mieszają się też linki z kategoriami (kategorie są tylko pogrubione).

komentarz 12 listopada 2022 przez juampi Użytkownik (610 p.)

wow ale sie rozpisales - dzieki! ale co do pytania - linki zmienie na jakies niebieskie czy cos w tym stylu - powinno byc git. stopka - pomniejsze troche. logo - mysle ze danie guzika na lewo i jakies wyroznienie go oraz dodanie tam logo strony (te z menu) bedzie wygladalo fajniej - pasek tam sie pojawil - i zniknie bo to brzydko wyglada. ogolnie myslalem o takim bialo zielonym lub bialo niebieskim stylu z czarnym tekstem. chociaz z drugiej strony ciemna strona z jasnymi elementami wygladala by fajnie - musze sie jeszcze zastanowic ale to wiadomo :)

komentarz 14 listopada 2022 przez juampi Użytkownik (610 p.)

@toko, a wiesz moze jak wykryc zmiane rozdzielczosci ekranu? chodzi o menu wysuniete zawsze w pewnej rozdzielczosci.

komentarz 14 listopada 2022 przez VBService Ekspert (252,740 p.)

jak wykryc zmiane rozdzielczosci ekranu?

Sprawdź css media queries for screen sizes [ 1 ] [ 2 ]

komentarz 14 listopada 2022 przez toko Dyskutant (7,670 p.)

@juampi, masz w css @media (min-width: Xpx) and (max-width: Ypx) { //tutaj style }, i wtedy style w tym będą zastosowane tylko dla szerokości ekranu większej od Xpx, a mniejszej od Ypx. Oczywiście jest wiele więcej opcji, musisz poszukać. Możesz też tylko ustawić min lub max - wtedy po prostu usuwać wartość i and.

komentarz 15 listopada 2022 przez juampi Użytkownik (610 p.)

Dzięki :) aktualizacja pojawi się niedługo zobaczymy co z tego wyjdzie :)

komentarz 15 listopada 2022 przez VBService Ekspert (252,740 p.)
edycja 15 listopada 2022 przez VBService

Np. w przeglądarce Chrome lub opartej na silniku Chromium w otwartej zakładce naciśnij LEWY-CTRL+LEWY-SHIFT+I lub F12 (działa też w Firefox) można też z prawego menu wybrać Inspekt lub Zbadaj,

aby otworzyć tzw. DevTool

i później LEWY-CTRL+LEWY-SHIFT+M

tu możesz testować wygląd strony na różnych ekranach.

[ Tips for using Chrome DevTools ]

[ Google Chrome Developer Tools: View your project on different screen sizes ]

1	komentarz 15 listopada 2022 przez juampi Użytkownik (610 p.) Dzięki :)

komentarz 16 listopada 2022 przez juampi Użytkownik (610 p.)

próbowałem dodać coś takiego (menu na telefon oraz na komputer) ale stopka mi się zepsuła - wiecie może czemu?

<!DOCTYPE HTML>
<HTML>
<head>
   <title>JCUBING | kostki rubika</title>
   <link rel="stylesheet" href="styles.css">
   <meta charset="utf-8">
   <meta desription="Witaj na stronie JCUBING! Ta strona jest poświęcona różnym poradnikom do kostek rubika. Strona utworzona przez Juampiego pozwoli ci dojść do sukcesu :) ">
   <meta lang="pl">
</head>
<body>
   <div id="top">
	<div id="NAGLOWEK">
   <br><br><br><br>
   <b><h1 class="logo">JCubing.pl</h1></b>
   <h2>Kostki rubika</h2>
   <br><br><br><br>
   <div class="mobile">
      <h2><span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; MENU</h2></span>
   </div>
   
<br><br>
   </div>
	  <div id="MENU">
      <div id="mySidenav" class="sidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
         <img src="3x3images/3x3logo.png" width="150" height="150" >
         <h2>MENU</h2>
         <a href="index.html">Strona Głowna</a>
         <a href="kontakt.html">Kontakt</a>
         <a href="about.html">O stronie</a>
         <h3>PORADNIKI PODSTAWOWE</h3>
         <a href="3x3wstep.html">Kostka Rubika 3x3x3</a>
         <a href="2x2wstep.html">Kostka 2x2x2</a>
         <a href="notacja.html">Notacja</a>
         <h3>kostka 2x2</h3>
         <a href="2x2wstep.html">wstęp</a>
         <a href="2x2poradnikLBL.html">LBL - metoda podstawowa</a>
      
      
         <h3>Metoda CFOP</h3>
         <a href="CFOPwstep.html">wstęp</a>
      
      
         <h3>inne poradniki</h3>
      
      
       </div>
       
      


       <script src="menu.js"></script>
      
      </div><br><br>

</div><br><br>

<div id="container">

	<div id="TRESC">
   <br><br>
<h1>WSZYSTKO O KOSTKACH RUBIKA</h1>
<h2>poradniki autorstwa Juampiego - youtubera nagrywającego filmy na temat kostek</h2>
<br><br>
Zaufaj doświadczonemu układaczowi ;)<br><br>
Na tej stronie znajdziesz różne poradniki dotyczące podstawowego jak i zaawansowanego układania kostek rubika.
<br>
<br>
Staram się żeby poradniki były proste i przejrzyste. Również staram się dodawać do nich filmy czy inne ciekawe rzeczy.
<br>
Strona stale jest rozwijana - jeśli jakiegoś poradnika tu nie ma, może kiedyś się pojawi?
<br>
<br><br>
Jeżeli masz jakieś pytania/sugestię/ocenę strony to pisz na ten email: jumpifake@gmail.com | Czytam i rozważam każdą propozycję :D
<br><br><br>
nie wiesz od czego zacząć? Zobacz te poradniki:
<br><br>
<b><a href="3x3poradniklbl.html">PORADNIK DO KOSTKI RUBIKA 3x3</a></b>
<br><br>
<b><a href="2x2poradnikLBL.html">PORADNIK DO KOSTKI RUBIKA 2x2</a></b>
<br><br>
<br>
<h2>Czym jest speedcubing?</h2>
<br>
Speedcubing (zwany też speedsolvingiem) to układanie kostek w jak najszybszym czasie.
<br>
Speedcubing to świetne i niedrogie (przynajmiej na początku, jeśli nie jesteś kolekcjonerem to nie ma obaw ;) ) Hobby, które mogę polecić każdemu.
<br>
<h2>Jaka jest najlepsza metoda?</h2>
Jeżeli chodzi o klasyczną kostkę rubika 3x3 to tak naprawdę takiej metody nie ma.
<br>
Początkującym polecam najprostszą metodę - LBL.
<br>
Ta metoda "nie powala" jeżeli chodzi o możliwości czasowe, jednak to od niej najlepiej zacząć.
<br><br>
Bardziej zaawansowane osoby mogą sięgnąć po metody takie jak CFOP (fridrich) ROUX czy metoda PETRUSA.
<br>
Najbardziej polecam metodę CFOP ponieważ jest bardzo podobna do metody LBL przez co łatwiej się jej nauczyć.
<br>
Metoda CFOP to najpopularniejsza metoda do układania na czas.
<br>
<h2>na tej stronie przedstawiam metodę CFOP - pomogę ci osiągnąć sukces :D</h2>
<br><br><br>
</div>

<div id="pc">
   <br><br><br>
   <h1>MENU</h1>

   <a href="index.html">Strona Głowna</a><br>
   <a href="kontakt.html">Kontakt</a><br>
   <a href="about.html">O stronie</a><br>
   <h3> PORADNIKI PODSTAWOWE </h3><br>
   <a href="3x3wstep.html">Kostka Rubika 3x3x3</a><br>
   <a href="2x2wstep.html">Kostka 2x2x2</a><br>
   <a href="notacja.html">Notacja</a><br>
   <h3>kostka 2x2</h3><br>
   <a href="2x2wstep.html">wstęp</a><br>
   <a href="2x2poradnikLBL.html">LBL - metoda podstawowa</a><br>


   <h3>Metoda CFOP</h3><br>
   <a href="CFOPwstep.html">wstęp</a><br>



   <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
	<div id="STOPKA">
<br><br><br><br><br><br><br><br><br><br><br><br>
Autor strony: Juampii
<br>
wszelkie prawa zastrzeżone
<br>
<br>
kontakt: jumpifake@gmail.com
<br>
kanał w serwisie youtube <a href="https://www.youtube.com/channel/UCNUid0O6KDADfEFJx2YOvRQ">TUTAJ</a>
<br><br><br><br><br><br><br><br><br>
</div>
</div>
<br><br><br><br>

*{
    text-align:center;
    font-family:'Trebuchet MS';
    
    
    
    }
    
.logo{
    color:rgb(0, 95, 95);
    
}

.border1{
    border-width:7px;
    margin-left:40%;
    margin-right:40%;
    border-style:solid;
    border-radius:30px;
    border-color:#333333;
}

a{
  color:#00161a;
  

}


    h1{
    color:#000000;
    
    }
    
    h2{
    color:#000000;
  
    }
    
    #TRESC{
    float:right;
    background-color:#9ea4ac;
    }
    
    #STOPKA{
      color:#e0e0e0;
      float: center;
    }
    
    #NAGLOWEK{
    
      background-color:#9ea4ac;
    }

    
    #MENU{
      background-color:#9ea4ac;
    
    text-shadow: 0px 0px 1px black;
    
    }
    
    body{
    background-color: #333333;
    
    }
    
    a {
      color: rgb(0, 104, 122);
      text-decoration: none;
    }
    
    dl, dt, dd {
    
        display: block;
        margin: 0;
        padding: 0;
    }
    
    dl {
        width: 200px;
            float:left;
    }
    
    dt {
        background-color: #ccc;
        color: #000;
        padding: 7px;
        font-weight: bold;
        font-size: larger;
        text-align: center;
    }
    
    dl a:link, dl a:visited {
        display: block;
        width: 186px;
        text-decoration: none;
        background-color: #ccc;
        color: #000;
        padding: 5px;
        border: 2px outset #ccc;
    }
    
    dl a:hover {
        border-style: inset;
        padding: 7px 3px 3px 7px;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color:#b3b3b3;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }
      
      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #3d3d3d;
        display: block;
        transition: 0.3s;
      }
      
      .sidenav a:hover {
        color: #001f2b;
      }
      
      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 48px;
        margin-left: 60px;
      }
      
      #main {
        transition: margin-left .5s;
        padding: 16px;
      }

      #pc {
        float:left;
        background-color: #9ea4ac;
        margin-left: 30px;
        width: 260px;




      }
      
      #container{
        width: 100%;
        float:center;
      }

      @media screen and (min-width:1000px) {
        .mobile {display: none;}
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
        .sidenav {display: none;}
        
      }

      @media screen and (max-width:1400px) {
        .sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}
        #pc {display:none}
       
      }

      body{
        transition: background-color .3s;
      }

function openNav() {
    document.getElementById("mySidenav").style.width = "350px";
    document.getElementById("main").style.marginLeft = "250px";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  }
  
  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.body.style.backgroundColor = "white";
  }

komentarz 17 listopada 2022 przez juampi Użytkownik (610 p.)

@toko, okej zrobiłem menu na peceta (automatyczne przy rozdzielczosci wiekszej niz 1400px) i zmienilem kolory oraz czcionke. aktualizacja niedlugo :)

1	komentarz 17 listopada 2022 przez juampi Użytkownik (610 p.) @toko, aktualizacja wyszla przed chwila. zobacz sobie. (i zobacz sobie tez na telefonie :) )

komentarz 17 listopada 2022 przez toko Dyskutant (7,670 p.)

Hmm.. Jest dobrze! Wygląda spoko. Myślę, że gdy menu jest cały czas otwarte, mógłbyś całkiem usunąć nagłówek, bo tytuł i tak jest w menu, a nie zajmowałby miejsca na stronie przed zawartością. Mógłbyś też zrobić taki efekt, że jak użytkownik przewinie poniżej menu, to ono pozostanie ciągle z boku, w tym samym miejscu na ekranie.

komentarz 17 listopada 2022 przez juampi Użytkownik (610 p.)

dzięki! Długo pracowałem nad wyglądem. zostało jeszcze tylko podmienić obrazy i napisać poradniki :) wydaje mi się że logo powinno zostać, moze je pomniejsze i dodam obraz obok. no i moze sproboję "przykleic" menu do użytkownika. Jak coś zmienie to dam znac tutaj :)

1	komentarz 18 listopada 2022 przez juampi Użytkownik (610 p.) Changelog 18.11.2022 - poprawiono responsywność - nowy poradnik: metoda cfop - cross -dodano kilka kolorowych obrazków - naprawiono ramkę występującą wokół niektórych linków (element .border1 )

odpowiedź 11 listopada 2022 przez reaktywny Nałogowiec (40,990 p.)

Popracowałbym szczególnie nad doborem kolorów, zwłaszcza tekstu i może typografią.

Przycisk do menu jest w dość nietypowym miejscu.

Ogólnie od strony graficznej - sporo jest do poprawy.

komentarz 12 listopada 2022 przez juampi Użytkownik (610 p.)

ok... a jestes w stanie mi powiedziec co konkretnie ci nie pasuje? dzieki za rady! na pewno posiedze sobie w css :)

komentarz 12 listopada 2022 przez reaktywny Nałogowiec (40,990 p.)

Przykładowo nie do końca podoba mi się biały tekst na szarym tle - za mały kontrast IMO.

Nie będę się rozpisywał, bo na UX/UI się nie znam. Ale tak graficznie jest średnio - takie strony robiło się 15-20 lat temu :)

To nie oznacza, że czeka Ciebie dużo pracy. Czasem pół godziny i zmiany w stylach kaskadowych przynoszą świetne rezultaty.

Jak nie masz "pomysła" na projekt graficzny to "zrzynaj" od specjalistów !!! :)

Strony z gotowymi templates są dobrym przykładem, duża część, szczególnie najlepiej sprzedających się szbalonów stanowi ciekawy przykład pod własny projekt.

odpowiedź 12 listopada 2022 przez VBService Ekspert (252,740 p.)
edycja 22 listopada 2022 przez VBService

Zmieniłbym sposób "wysuwania" menu, bo width (zawartość "pływa") nie za bardzo się do tego nadaje: on-line (spowolniłem transition dla prezentacji).

Proponuje użyć translatex() i zamiast w js-ie manipulować element.style użyj element.classList: on-line.

mySidenav.classList.add('open');

.open { /* .sidenav */
  transform: translatex(0);
}

P.S.2 możesz też spróbować "ostylować" scrollbar-a w menu.

P.S.3. poczytaj też: difference between addEventListener and onclick [ 1 ] [ 2 ]

komentarz 12 listopada 2022 przez juampi Użytkownik (610 p.)

o kurcze w js to nie za bardzo siedze ale wow dzk za pomysly - na pewno sprawdze :)

1	komentarz 14 listopada 2022 przez reaktywny Nałogowiec (40,990 p.) Fajne przykłady!

Podobne pytania

+6 głosów

5 odpowiedzi 796 wizyt

Pierwsza strona po kursie programowania

pytanie zadane 6 czerwca 2018 w Nasze projekty przez Daniel123 Początkujący (420 p.)

0 głosów

1 odpowiedź 131 wizyt

strona index

pytanie zadane 8 grudnia 2015 w Nasze projekty przez Wilier Bywalec (2,570 p.)

0 głosów

1 odpowiedź 982 wizyt

Temat projektu do szkoły (strona internetowa)

pytanie zadane 25 kwietnia 2017 w Rozwój zawodowy, nauka, praca przez bugs55 Obywatel (1,090 p.)

pierwsza strona - opinia

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci