Moj prvi HTML/CSS kod - šta mislite?

Salah ad-Din · Post by **Salah ad-Din** » 09/03/2018 11:43

Ovako, prije nekoliko godina pokušao sma učiti HTML/CSS jer stvarno imam želju da probam naučiti makar osnove da mogu praviti jednostavne stranice, prilagođavati već postojeće template i slično. Gledao sam na youtube-u, učio međutim nikako nisam mogao da svarim kako pozcionirati stranicu da na svakom uređaju izgleda isto, da mi slike ne bježe, da pravim kontejnere koji će se prilagođavati rezoluciji ekrana. Jednostavno kad bi napravio neki kod svi elemnti bi bili razbacani, tekst bi izlazio iz okvira itd. Nisam se više mogao zamarati s tim pa sam odustao. Međutim nedavno sam čuo za freecodecamp, hvale ga kao odličan kurs gdje se stvarno može naučiti, imaju comunity koji je uvijek spreman pomoći itd. I ja odlučim da krenem s njihovim kursem. Završio sam HTML-CSS i Jquerry i sad sam dobio zadatak da napravim stranicu sličnu ovoj : https://codepen.io/freeCodeCamp/full/NNvBQW, završio sam za nekih 2-3 sata pa bi sa vama da podijelim svoj kod, da malo pogledate ako imate vremena, i da me posavjetujete šta bi ispravili, šta bi se moglo lakše odraditi i tako to. Opet malo imam problem s ovim okvirima, koristim ovu boostrap komandu col-xs, pa je malo lakše sama se prilagođava al opet imam osjećaj da ne radim nešto dobro, tačnije ubacim ja tu komandu al ne razumijem šta uradi i to ne volim, pa ako ima neko da pojasni. Hvala vam puno unaprijed i puno pozdrava.

Code: Select all

<HTML>
  <style>
  h1 {
  font-family: "Times";
  font-style: italic;
  font-size: 60px;
}

h2 {
  font-family: "Times";
  font-style: italic;
  font-size: 30px;
}
.caption {font-family: "Times";}
p {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}

ul {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}
  </style>
  
  <body>
    <div class="container">
      <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12">
          <div class="well">
            <h1 class="text-center">Safet Isović</h1>
            </br>
            <h2 class="text-center">Najveći izvođač sevdalinki na prostorima bivše Jugoslavije</h2>
            </br>
            <div class="thumbnail">
              <img src="https://backend.hayat.ba/uploads/tx_ssselnews/safet.jpg" width="1105" height="614">
              <div class="caption text-center"> Jedan je Safet Isović</div>
             </div>
                </br>
                <p>
                Biografija ovog velikog čovjeka:
              </br>
                  <ul>
                    <li>Rođen je 6 januara <b>1936</b> godine u Bileći (tadašnja Jugoslavija)</li>
                    <li><b>1955</b> godine upisuje Pravni fakultet u Sarajevu</li>
                    <li>Za vrijeme studiranja snimio je dvije pjesme koje su objavljene <b>1957</b> godine </li>
                    <li><b>1963</b> godine održao je svoj prvi koncert u Beogradu
                      <li><b>1992</b> za vrijeme okupacije Sarajeva, ranjen je</>
                    <li>Umro je <b>2007</b> godine u Sarajevu</li>
                </ul>
                </p>
      </br>  <p>
        "Zasigurno jedan od najvećih bosanskohercegovačkih umjetnika. Može se samo reći Jedan je Safet" </p>
    </br>
    <p> Ako imate vremena više o ovom umjetniku možete pročitati na <a href="https://en.wikipedia.org/wiki/Safet_Isovi%C4%87">Wikipediji</a> </p>
                
          </div>
        </div>
        </div>
     </div> 
<footer class="text-center">Coded by Anonymus Coder</footer>
  </body>
</HTML>

NoaLada · Post by **NoaLada** » 09/03/2018 19:03

Pozdrav,

Ova stranica ti moze pomoci u pocetnom razumijevanju Bootstrap grid sistema: https://www.w3schools.com/bootstrap/boo ... system.asp. XS ti je ustvari oznaka column sirine za male uredjaje i ti kazes konkretno da ti tvoj sadrzaj bude preko citave sirine (max je 12) za XS uredjaje (kasnije se to scale up, ali to ces procitati i na ovom linku).

Sto se tice same stranice, previse italics. Takodjer, tekst je jednolican, probaj kao i oni posebno urediti quote da bude kao neki block i slicno.

Sve u svemu, puno srece u radu! Meni je w3schools bio zakon, plus imas vjezbice, tako da samo naprijed.

Cookie85 · Post by **Cookie85** » 10/03/2018 08:58

Salah ad-Din wrote:Ovako, prije nekoliko godina pokušao sma učiti HTML/CSS jer stvarno imam želju da probam naučiti makar osnove da mogu praviti jednostavne stranice, prilagođavati već postojeće template i slično. Gledao sam na youtube-u, učio međutim nikako nisam mogao da svarim kako pozcionirati stranicu da na svakom uređaju izgleda isto, da mi slike ne bježe, da pravim kontejnere koji će se prilagođavati rezoluciji ekrana. Jednostavno kad bi napravio neki kod svi elemnti bi bili razbacani, tekst bi izlazio iz okvira itd. Nisam se više mogao zamarati s tim pa sam odustao. Međutim nedavno sam čuo za freecodecamp, hvale ga kao odličan kurs gdje se stvarno može naučiti, imaju comunity koji je uvijek spreman pomoći itd. I ja odlučim da krenem s njihovim kursem. Završio sam HTML-CSS i Jquerry i sad sam dobio zadatak da napravim stranicu sličnu ovoj : https://codepen.io/freeCodeCamp/full/NNvBQW, završio sam za nekih 2-3 sata pa bi sa vama da podijelim svoj kod, da malo pogledate ako imate vremena, i da me posavjetujete šta bi ispravili, šta bi se moglo lakše odraditi i tako to. Opet malo imam problem s ovim okvirima, koristim ovu boostrap komandu col-xs, pa je malo lakše sama se prilagođava al opet imam osjećaj da ne radim nešto dobro, tačnije ubacim ja tu komandu al ne razumijem šta uradi i to ne volim, pa ako ima neko da pojasni. Hvala vam puno unaprijed i puno pozdrava.
Code: Select all
<HTML>
  <style>
  h1 {
  font-family: "Times";
  font-style: italic;
  font-size: 60px;
}

h2 {
  font-family: "Times";
  font-style: italic;
  font-size: 30px;
}
.caption {font-family: "Times";}
p {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}

ul {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}
  </style>
  
  <body>
    <div class="container">
      <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12">
          <div class="well">
            <h1 class="text-center">Safet Isović</h1>
            </br>
            <h2 class="text-center">Najveći izvođač sevdalinki na prostorima bivše Jugoslavije</h2>
            </br>
            <div class="thumbnail">
              <img src="https://backend.hayat.ba/uploads/tx_ssselnews/safet.jpg" width="1105" height="614">
              <div class="caption text-center"> Jedan je Safet Isović</div>
             </div>
                </br>
                <p>
                Biografija ovog velikog čovjeka:
              </br>
                  <ul>
                    <li>Rođen je 6 januara <b>1936</b> godine u Bileći (tadašnja Jugoslavija)</li>
                    <li><b>1955</b> godine upisuje Pravni fakultet u Sarajevu</li>
                    <li>Za vrijeme studiranja snimio je dvije pjesme koje su objavljene <b>1957</b> godine </li>
                    <li><b>1963</b> godine održao je svoj prvi koncert u Beogradu
                      <li><b>1992</b> za vrijeme okupacije Sarajeva, ranjen je</>
                    <li>Umro je <b>2007</b> godine u Sarajevu</li>
                </ul>
                </p>
      </br>  <p>
        "Zasigurno jedan od najvećih bosanskohercegovačkih umjetnika. Može se samo reći Jedan je Safet" </p>
    </br>
    <p> Ako imate vremena više o ovom umjetniku možete pročitati na <a href="https://en.wikipedia.org/wiki/Safet_Isovi%C4%87">Wikipediji</a> </p>
                
          </div>
        </div>
        </div>
     </div> 
<footer class="text-center">Coded by Anonymus Coder</footer>
  </body>
</HTML>

Evo ti male izmjene da bude responsive website i po mom ukusu previse italic. Danas ti je jako bitno da bude responsive

imas i komentare u "kodu" i ako trebas jos nesto, javi

Code: Select all

<HTML>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 /*ja bih koristio Sans font zbog nasih znakova ako ih vec mislis koristiti*/
  <style>
  h1 {
  font-family: "Times";
  font-style: italic;
  font-size: 60px;
}

h2 {
  font-family: "Times";
  font-style: italic;
  font-size: 30px;
}
.caption {font-family: "Times";}
p {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}

ul {
  font-family: "Times";
  font-style: italic;
  font-size: 20px;
}
 <style>
.left, .right {
  float:left;
  width:20%; /*sirina je 20%, by default*/
}

.main {
  float:left;
  width:60%; /*sirina je 60%, by default*/
}

/*Use a media query to add a breakpoint at 800px:*/
@media (max-width:800px) {
  .left, .main, .right {
    width:100%; /*sirina je 100%, kada viewport je 800px ili manje*/
  }
}
</style> 
  </style>
 
  <body>
    <div class="container">
      <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12">
          <div class="well">
            <h1 class="text-center">Safet Isović</h1>
            </br>
            <h2 class="text-center">Najveći izvođač sevdalinki na prostorima bivše Jugoslavije</h2>
            </br>
            <div class="thumbnail">
              <img src="https://backend.hayat.ba/uploads/tx_ssselnews/safet.jpg" width="100%" height="auto">
              /*ako bas hoces odredjenu dimenziju slike onda je "resize" nisam bas siguran kako hoces da ti ova slika stoji*/
              <div class="caption text-center"> Jedan je Safet Isović</div>
             </div>
                </br>
                <p>
                Biografija ovog velikog čovjeka:
              </br>
                  <ul>
                    <li>Rođen je 6 januara <b>1936</b> godine u Bileći (tadašnja Jugoslavija)</li>
                    <li><b>1955</b> godine upisuje Pravni fakultet u Sarajevu</li>
                    <li>Za vrijeme studiranja snimio je dvije pjesme koje su objavljene <b>1957</b> godine </li>
                    <li><b>1963</b> godine održao je svoj prvi koncert u Beogradu
                      <li><b>1992</b> za vrijeme okupacije Sarajeva, ranjen je</>
                    <li>Umro je <b>2007</b> godine u Sarajevu</li>
                </ul>
                </p>
      </br>  <p>
        "Zasigurno jedan od najvećih bosanskohercegovačkih umjetnika. Može se samo reći Jedan je Safet" </p>
    </br>
    <p> Ako imate vremena više o ovom umjetniku možete pročitati na <a target="_blank" href="https://en.wikipedia.org/wiki/Safet_Isovi%C4%87">Wikipediji</a> </p>
    /*stavio sam ti da se otvara u novom tab-u, tako da citalac ostaje na tvojoj stranici, a otvori link u drugom tabu*/
               
          </div>
        </div>
        </div>
     </div>
<footer class="text-center">Coded by Anonymus Coder</footer>
  </body>
</HTML>

Salah ad-Din · Post by **Salah ad-Din** » 11/03/2018 09:54

Joj hvala vam puno, iskreno se nisam nadao da će biti ljudi koji žele pomoći

Sad počinjem shvatati logiku ovog bootstrap grid sistema, hvala za ovaj w3 link. Ma nisam toliko iskreno obraćap pažnju na tekst, sadržaj i font iskreno sada mi je bitno da savladam osnovne funkcije, koja za šta služi. Sada imam idući zadatak i mislim da stvarno nisu fer xD Dali su mi da napravim svoj "portofolio" koji bi izgledao ovako:
https://codepen.io/freeCodeCamp/full/YqLyXB, iskreno ne znam odakle da počnem

Mislim glupo mi je da odem na source page i prepišem kod, pokušat ću nešto sam mrljati pa vidjet ćemo, koliko sam uspio vidjeti u source kodu oni ovdje nisu koristili bootstrap grid, već su jednostavno samo napravili header (navbar), 3 div-a i footer, također vidim neke skripte koje pozivaju pa valjda ću se i tu snaći (to ću morat prepisati). Uglavnom zanimat ću se sada sa ovim i pokušati napraviti barem nešto slično ovako od nule, ali mi je drago jer će ovo stvarno biti dobra vježba. Hvala vam puno momci pa ako ikad ovo uspijem završiti podijelim sa vama

Cookie85 · Post by **Cookie85** » 11/03/2018 10:07

Salah ad-Din wrote:Joj hvala vam puno, iskreno se nisam nadao da će biti ljudi koji žele pomoći Sad počinjem shvatati logiku ovog bootstrap grid sistema, hvala za ovaj w3 link. Ma nisam toliko iskreno obraćap pažnju na tekst, sadržaj i font iskreno sada mi je bitno da savladam osnovne funkcije, koja za šta služi. Sada imam idući zadatak i mislim da stvarno nisu fer xD Dali su mi da napravim svoj "portofolio" koji bi izgledao ovako:
https://codepen.io/freeCodeCamp/full/YqLyXB, iskreno ne znam odakle da počnem Mislim glupo mi je da odem na source page i prepišem kod, pokušat ću nešto sam mrljati pa vidjet ćemo, koliko sam uspio vidjeti u source kodu oni ovdje nisu koristili bootstrap grid, već su jednostavno samo napravili header (navbar), 3 div-a i footer, također vidim neke skripte koje pozivaju pa valjda ću se i tu snaći (to ću morat prepisati). Uglavnom zanimat ću se sada sa ovim i pokušati napraviti barem nešto slično ovako od nule, ali mi je drago jer će ovo stvarno biti dobra vježba. Hvala vam puno momci pa ako ikad ovo uspijem završiti podijelim sa vama

Jesu koristili boostrap, a ako ti zatreba pomoc pisi

Sretno!

Salah ad-Din · Post by **Salah ad-Din** » 11/03/2018 11:08

Evo krenuo sam piskarati malo, danas imam malo vremena. Sada ne pratim njih jer stvarno mi je konfuzno ovo što mi izbaci kada idem na source page (vjerovatno on kupi kod i od ove stranice codepen pa me zbunjuje), idem samostalno, tražim na w3 i pokušavam napraviti nešto slično, naravno koristim svoje boje, fontove i to, ne kopiram njih. Za sada sam otkucao nekoliko linija koda i u komentarima koda ću postaviti neka pitanja pa kad budeš imao vremena baci odgovor

Code: Select all

<HTML>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
 #banner {
  background-color: #111;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li {
    position: sticky;
}
</script>
 <body>
 <header class="navbar navbar-default navbar-fixed-top" id="banner">
 <!-- Kontam da dodam class="container-fluid u ovaj header kako bi bio siguran da će biti preko čitavog ekrana ovaj navigation bar, da li je to potrebno i da li je moguće u header stavljati to ili se on samo dodaje u div -->
 <!-- Također ako dodam u neki div class=container-fluid ili samo container onda moram dodati i id, jel tako? Kada kasnije u CSS-u hoću da se pozovem na taj element ne mogu preko div imena (izvini ne znam terminologiju) nego moram preko id-a, kontam bit će puno elementa koji će imati div container-->
   <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/02/best-logo-design-for-company.png" id="logo" height="100" width="150" />
      <div class="navbar">
  <ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Portofolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<!-- Znaš li možda kako napraviti da kada skrolujem navbar se automatski prebacuje, npr kada skrolujem na kontakt, da se navbar sam prebacuje na kontakt. Odnosno kada kliknem na kontakt u navbaru da me prebaci na taj dio stranice, ja znam kako da me prebaci na novu stranicu ili pod stranicu, tako što dodam  url u href ali ovo mi je već komplikovanije i ne mogu da nađem to na internetu, hvala ti puno unaprijed, stvarno svaka čast za pomoć -->
      </div>
        </header>
          </body>  
            </HTML>

Cookie85 · Post by **Cookie85** » 11/03/2018 22:48

Salah ad-Din wrote:Evo krenuo sam piskarati malo, danas imam malo vremena. Sada ne pratim njih jer stvarno mi je konfuzno ovo što mi izbaci kada idem na source page (vjerovatno on kupi kod i od ove stranice codepen pa me zbunjuje), idem samostalno, tražim na w3 i pokušavam napraviti nešto slično, naravno koristim svoje boje, fontove i to, ne kopiram njih. Za sada sam otkucao nekoliko linija koda i u komentarima koda ću postaviti neka pitanja pa kad budeš imao vremena baci odgovor

Code: Select all

<HTML>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
 #banner {
  background-color: #111;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: right;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li {
    position: sticky;
}
</script>
 <body>
 <header class="navbar navbar-default navbar-fixed-top" id="banner">
 <!-- Kontam da dodam class="container-fluid u ovaj header kako bi bio siguran da će biti preko čitavog ekrana ovaj navigation bar, da li je to potrebno i da li je moguće u header stavljati to ili se on samo dodaje u div -->
 <!-- Također ako dodam u neki div class=container-fluid ili samo container onda moram dodati i id, jel tako? Kada kasnije u CSS-u hoću da se pozovem na taj element ne mogu preko div imena (izvini ne znam terminologiju) nego moram preko id-a, kontam bit će puno elementa koji će imati div container-->
   <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/02/best-logo-design-for-company.png" id="logo" height="100" width="150" />
      <div class="navbar">
  <ul>
  <li><a href="#">About</a></li>
  <li><a href="#">Portofolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<!-- Znaš li možda kako napraviti da kada skrolujem navbar se automatski prebacuje, npr kada skrolujem na kontakt, da se navbar sam prebacuje na kontakt. Odnosno kada kliknem na kontakt u navbaru da me prebaci na taj dio stranice, ja znam kako da me prebaci na novu stranicu ili pod stranicu, tako što dodam  url u href ali ovo mi je već komplikovanije i ne mogu da nađem to na internetu, hvala ti puno unaprijed, stvarno svaka čast za pomoć -->
      </div>
        </header>
          </body>  
            </HTML>

Ovako uvijek koristi ID i odvoji CSS file i napravi link.

ako sam razumio ti hoces ovako nesto ili ? mislim ti mozes staviti kako ti zelis, top, side left, side right, bottom...

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: green;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: red;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#news">Portfolio</a>
  <a href="#contact">Contact</a>

</div>

<div style="padding-left:16px">
  <h1>Naslov</h1>
  <p>Tekst ...</p>
</div>

</body>
</html>

Ako sam te dobro razumio tebi treba Anchor tag

Code: Select all

<a href="#primjer">Tekst</a>

-> anchor tag ti odredjujes ime i ovo je ako je na istoj stranici

Code: Select all

<a href="../link.html#primjer">Tekst</a>

-> ovo je kada oznacavas na nekoj drugoj stranici.

Ako sam sta zaboravio ili preskocio , pisi

Moj prvi HTML/CSS kod - šta mislite?

#1 Moj prvi HTML/CSS kod - šta mislite?

#2 Re: Moj prvi HTML/CSS kod - šta mislite?

#3 Re: Moj prvi HTML/CSS kod - šta mislite?

#4 Re: Moj prvi HTML/CSS kod - šta mislite?

#5 Re: Moj prvi HTML/CSS kod - šta mislite?

#6 Re: Moj prvi HTML/CSS kod - šta mislite?

#7 Re: Moj prvi HTML/CSS kod - šta mislite?