#naukaprogramowaniaodkuchni #w90dniit

Wszystkim, którzy mi kibicowali serdecznie dziękuję.

Zakończyłem swoje 90-dniowe wyzwanie i dostałem pracę, jako Junior Front End Developer.

Jeśli ktoś myśli o tym, żeby zacząć swoją przygodę z programowaniem, to jest na to dobry czas, szczególnie jeśli mieszkacie w większym mieście, gdzie naprawdę jest dużo miejsc pracy w tej branży. Po trzech miesiącach nauki ,płatny staż jest jak najbardziej w waszym zasięgu, a nie tylko mój przykład dowodzi, że również i stanowisko juniorskie.
Za wszystkich, którzy podejmują wszelkie wyzwania i rezygnują ze status quo - trzymam kciuki!
Pozdrawiam i powodzenia!

https://www.youtube.com/watch?v=1EuG4fVK0Fw pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień 36 - https://youtu.be/LEb6aHmGNd8

Pochłonęło mnie nowe zadanie stworzenia gry w szachy dla dwóch osób przy użyciu JavaScript. Kombinuje na różne sposoby, bawię się tym i zapominam, która godzina. Mam z tego radochę. Pierwszy raz zastosowałem w praktyce Sprite'y, czyli jeden plik obrazu będący czymś na kształt rolki filmowej, z której potem wybiera się w arkuszu stylów tylko interesujące nas fragmenty. Planszę do gry w szachy można sprawdzić tutaj: http://w90dni.it/szachy/index.html pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień numer 33 - https://www.youtube.com/watch?v=pY-vP5wcmoM&feature=youtu.be

Powróciłem do nauki stricte Javascriptu, gdyż ostatnie dni zdominowane były rzeczami ledwie luźno z nim związanymi. Wracając pamięcią do początków mojej tego języka nauki, dobrze to wspominam i lubię ożywiać ten temat. Posługując się dodatkowo biblioteką Simple weather, stworzyłem mikro aplikację pogodową ( http://w90dni.it/pogoda ) która pokazuje nam warunki pogodowe w naszej lokalizacji ( swoją drogą na chrome, nie zawsze mi to działa, za to na IE zawsze jest ok ). Dodatkowo rozpocząłem zadanie od mojego mentora Maćka, czyli stopniowe budowanie gry w szachy dla dwóch osób - bez żadnych tutoriali, wysilam się dość mocno przy tej konstrukcji :) pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień numer 32. - https://youtu.be/4RFTwjOZrwM

Dotychczas korzystałem z z Bootstrapa w wersji 3 - dzisiaj wypróbowałem nowe możliwości, jakie daje rozwojowa wersja 4 tego frameworka. Poznałem też wreszcie możliwości wtyczki do Bracketsa o nazwie Emmet, która znacząco przyspiesza pisanie kodu (czy takie skróty już na samym początku nauki to dobry pomysł?). Dowiedziałem się też czym jest SASS, czyli język arkuszy stylów, który znacząco ułatwia zarządzanie zawartością swoich plików CSS. Adres strony opracowanej dzisiaj: https://w90.github.io/space-b4/ pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień numer 31. - https://www.youtube.com/watch?v=CmqP7CpycsY

Projektowałem szkic strony w Photoshopie, z góry uwzględniając kolumnowe rozłożenie zawartości, po czym wyeksportowałem wszystkie potrzebne elementy i wspierając się frameworkiem Bootstrap złożyłem wszystko od podstaw w HTMLu i CSS. Forma projektu wreszcie zbliżona do obecnych standardów, choć wciąż daleka od perfekcji - zobaczyć ją można tutaj: https://w90.github.io/code-boxing/ pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzisiaj poznałem metody tworzenia szkiców strony internetowej przy użyciu Adobe Photoshop (którego oryginalna kopia kosztuje w tym momencie 10 euro miesięcznie, czego wiele osób łącznie ze mną mogło nie wiedzieć). Schematy powstałe w Photoshopie są jedynie obrazkami i pomagają w funkcjonalnym rozplanowaniu zawartości strony - dalsze przenoszenie takich szkiców do plików html i css wkrótce przede mną.

Dzień numer 30 - https://youtu.be/yK20Ocn3x0E

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Piątek poświęciłem na dalsze poznawanie bootstrapa i integrowanie go z moją obecną stroną. Stworzyłem szkielet strony mobilnej przy użyciu Bootstrapa i zapełniłem go zawartością mojej oryginalnej strony w90dni.it, na której umieściłem (korzystając z dodatkowego pliku bootstrap.js ) przycisk przekierowujący na stronę mobilną. Efekt końcowy oczywiście nie jest piorunujący i ma sporo niedociągnięć, ale przede mną kolejne dni na wprowadzanie usprawnień.

Dzień 27 - https://www.youtube.com/watch?v=x3LI_NKK-gA&feature=youtu.be

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Poznałem framework "Bootstrap", który ułatwia tworzenie stron. Początkowo miałem względem niego mieszane uczucia, bo teoretycznie "odwala sporo roboty za nas" i traktowałem go, jako taką drogę na skróty, którą niekoniecznie chciałbym podążyć od razu na początku nauki. Mój mentor przekonał mnie, że warto dać mu szanse, gdyż jest bardzo często wykorzystywany nawet w większych projektach.

Dzień numer 25 - https://www.youtube.com/watch?v=qfPv-zfxPkg

Screenshoty z nauki: https://drive.google.com/drive/folders/0BwsOkIdNSSGNSEduMHFIYzhrVlU

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

To był dobry dzień, napisałem kod swojej strony od nowa, jest lepiej niż poprzednio (choć cały czas z pewnością sporo niedociągnięć). Wielką zabawę sprawiało mi animowanie elementów strony z jQuery, której to biblioteki wreszcie jako tako nauczyłem się używać w celach animacyjnych. Przedstawiam też na wideo nagranie w stylu "user experience" mojej strony.

Dzień numer 24 - https://youtu.be/eExSE4fmjXE

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Drugi dzień z nauką jQuery, dużo ćwiczeń i przyswojonej wiedzy, jednak kolejny raz za mało praktycznego zastosowania wszystkich pojęć na raz - skupienie się na wielu małych, nie do końca powiązanych w jedną całość zadaniach.

Dzień 22 - https://youtu.be/CjEqOCyfDW8 pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Pierwsza styczność z biblioteką jQuery, za którą nie do końca przepada mój mentor Piotrek - fan Vanilla JS, minimalizmu i uglyfikacji ;) z którym przeczatowałem dzisiaj 3 godziny, kiedy to przekazywał mi swoją cenną wiedzę, momentami znacząco wykraczającą poza standardowy zakres kursu. Nigdy nie jest tak, że wie się już wszystko, nawet o tych najprostszych sprawach - programowanie jest tą dziedziną, gdzie nad wyraz staje się to widoczne.

Dzień 19. - https://youtu.be/H8QrmOqH6Lo

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Zrobiłem na swojej stronie skrypt Zegarka. Dowiedziałem się o działaniu funkcji SetTimeout i odświeżyłem kod swojej strony. Wreszcie powstał oddzielny plik .JS analogicznie do pliku .CSS - skrypty opuściły INLINE html i mają swoje nowe miejsce.

Dzień numer 18. - https://www.youtube.com/watch?v=gNQWsiYrN-g

Screenshoty z dnia : https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Adres mojej strony: http://w90dni.it pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dostałem propozycję od CodersTrust Polska, by kontynuować naukę podstaw programowania na ich platformie i relacjonować dalej swoje postępy, tak jak to robiłem podczas okresu próbnego. Jeśli uda mi się zaliczyć cały kurs w przeciągu moich 90 dni, nie będę musiał za niego zapłacić, ELSE { PAYTHEFULLPRICE:) } Wyzwanie przyjęte. Dodatkowo uczyłem się dzisiaj o strukturze DOM i jak zręcznie używać jego funkcjonalności do manipulacji w ustawieniach elementów strony.

Dzień numer 17 - https://youtu.be/F8jCfYFErYs

Screenshoty z dnia : https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler <p onclick="this.innerHTML='witka'" onmouseover="this.innerHTML='elko'" onmouseout="this.innerHTML='strzałka'">strzałka</p> ---akcja kliknięcia na element, najechania myszą i odjechania myszą


pokaż spoiler onmousedown --- akcja w momencie wciśnięcia i przytrzymania klawisza
onmouseup - akcja po odpuszczeniu klawisza


pokaż spoiler var x = document.getElementById("myBtn");
x.addEventListener("click", pierwszaFunkcja);
x.addEventListener("click", drugaFunkcja);
-----addEventListener(“akcja”, nazwaFunkcji) - można dodawać do danego elementu dodatkowe akcje, które nakładają się na siebie i nie wykluczają się


pokaż spoiler addEventListener("click", myFunction, false /*domyslna, moze jej nie być*/ );
addEventListener("click", myFunction, true);
----- event propagation ---- event Bubbling (false) vs event Capturing (true) --- jeśli jeden element jest wewnątrz drugiego i klikniemy na środek tego kontenera, to w zależności od ustawienia false/true, najpierw wywołana zostanie akcja childa(ustawienie false, albo brak) lub akcja parenta(true).
Dwie warstwy, jedna na drugiej. false - najpierw ta na wierzchu. true - najpierw ta pod spodem.


pokaż spoiler document.getElementById("myDIV").addEventListener("mousemove", funkcjaRuchu);
document.getElementById("myDIV").removeEventListener("mousemove", funkcjaRuchu);
--------dodawanie akcji i usuwanie jej


pokaż spoiler <button onclick=”one()” id=”myBtn”>Przycisk</button>
<script>
function one() {

wywolanieAkcji1();

pokaż spoiler document.getElementById("myBtn").onclick = two;
}
function two() {

akcja2();

pokaż spoiler document.getElementById("myBtn").onclick = one;
}
-------- 1 przycisk, 2 kliknięcia, 2 różne funkcje
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzisiaj uczyłem się automatyzacji zadań przy pomocy pętli FOR i WHILE, nie było wcale łatwo, musiałem sobie nawet rozpisywać schematy funkcji na kartce, żeby momentami to zrozumieć :) Zawsze lubiłem automatyzować procesy i ułatwiać sobie zadania - potencjalnie widzę w tego typu czynnościach miejsce dla siebie :)

Dzień numer 16. - https://youtu.be/aW6oaxguK4M

Screenshoty z dnia : https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Notatki:

pokaż spoiler x += y to samo co x = x + y
x - = y x = x - y
x * = y x = x * y
x / = y x = x / y
x % = y x = x % y


pokaż spoiler Pętla for:
var i;
for ( i= wartość_początkowa_ ; i < wartość_końcowa ; i++ /* dodawanie +1*/ ) {
}


pokaż spoiler pętla while - właściwie to samo, ale bez pierwszego i ostatniego statement w nawiasie
var i = 0;
while (i <15) {
document.getElementById(“wynik”).innerHTML += i + “<br>”;
i++
}


pokaż spoiler \ - backslash na końcu linijki podczas pisania “Stringa” umożliwia jego kontynuację w następnej linijce, od miejsca wstawienia backslasha


pokaż spoiler var x = document.getElementsByClassName("container");
var y = x.getElementsByTagName(“p”);
document.getElementById("wynik").innerHTML =
'Pierwszy akapit w klasie Container to ' + y[0].innerHTML;


pokaż spoiler var x = document.querySelectorAll("p.intro"); -znalezienie dowolnego selektora css
document.getElementById("demo").innerHTML =
'pierwszy akapit klasy Intro to: ’' + x[0].innerHTML;


pokaż spoiler document.getElementsByClassName("test")[0].innerHTML = "Znalazles pierwszy selektor klasy test!";


pokaż spoiler document.title --- zawartość tagu <title>


pokaż spoiler document.getElementById("akapit").style.visibility = "hidden"; --ukrywanie elementów bez usunięcia ich z układu strony


pokaż spoiler var x = document.getElementById("myH1").style.color; document.getElementById("demo").innerHTML = x;
--- wyswietlanie tekstowe wartosci danego atrybutu stylu
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień 15. - https://youtu.be/ibQTay1ECZU

Trzeci tydzień nauki zaczął się od pierwszego dnia samodzielnej pracy bez pomocy mentorów, było trochę chaotycznie, chociaż pierwsze bardziej logiczne linijki kodu JS w postaci gry kamień papier nożyczki już za mną.

Trochę notatek:

pokaż spoiler `> > gra Kamień Papier Nożyczki
> var userChoice = prompt("Do you choose rock, paper or scissors?");
> var computerChoice = Math.random();
> if (computerChoice < 0.34) {

computerChoice = "rock";

pokaż spoiler > } else if(computerChoice <= 0.67) {

computerChoice = "paper";

pokaż spoiler > } else {

computerChoice = "scissors";

pokaż spoiler > } console.log("Computer: " + computerChoice);


function compare(choice1,choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}
else if (choice1 === "rock") {
if ( choice2 === "scissors"){
return "rock wins";
}
else {
return "paper wins";
}
}
else if (choice1 === "paper") {
if (choice2 === "scissors") {
return "scissors win";
}
else {
return "paper wins";
}
}
else if (choice1 === "scissors") {
if (choice2 === "rock") {
return "rock wins";
}
else {
return "scissors win";
}
}
}
compare(userChoice, computerChoice);


pokaż spoiler > funkcja alternatywna:

function compare(choice1,choice2) {
if (choice1 === choice2) {
return "The result is a tie!";
}

else if ( ((choice1 === "paper") & (choice2 === "rock")) &
((choice1 === "rock") & (choice2 === "scissors")) &
((choice1 === "scissors") & (choice2 ==="paper")) ) {
return "You win! Congratulations!";
}
else {
return "You loose. Computer wins."
}


pokaż spoiler > <button onclick="this.innerHTML=Date()">_tresc+przycisku_</button> -THIS.INNER~ oznacza obecny element, który ulegnie zmianie
> <span onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Mouse over me!</span> --- po najechaniu myszką zmienia się kolor, po odjechaniu też
> czas uniksowy -liczba sekund które upłynęły od 1 stycznia 1970roku - pczątku epoki unixa
> var d = new Date(99,5,24,11,33,30,0); - najpierw rok, potem miesiąc licząc od 0 do 11
> document.getElementById("demo").innerHTML = d;
> document.getElementById("demo").innerHTML = new Date().toDateString(); zapis w uproszczonej formie

var d = new Date();

pokaż spoiler > document.getElementById("demo").innerHTML = d.getFullYear(); - pobiera rok YYYY
> Array - Tablica – kontener uporządkowanych danych[1] takiego samego typu[2][3], w którym poszczególne elementy dostępne są za pomocą kluczy (indeksu)
> var cars = ["Saab", "Volvo", "BMW"]; stworzenie tablicy
> var cars [2] --- wybranie konkretnej danej ztablicy, numer 2 czyli 3 w kolejnści (numeracja od 0), lub stworzenie nowej danej jeśli dany numer na tablicy nie występuje
> cars[cars.length] = “Audi” ---- dodanie do tablicy nowego elementu - cars length x = ostatni element tablicy x-1 (z powodu numerowania od zera)


pokaż spoiler > ustawianie właściwości obiektu:
> var owoc = {
> nazwa : "jabłko",
> kolor : "czerwony",
> numerSeryjny : 90210,
> };
> document.getElementById("demo").innerHTML = owoc.nazwa + " " + owoc.kolor;


pokaż spoiler > ustawianie properties i method obiektu w tablicy
> var samochod = {

marka: "Ford",
model: "Mustang",
przebieg: 43534,
pelnaNazwa: function() { /* METHOD */
return this.marka + " " + this.model; } };

pokaż spoiler > document.getElementById("demo").innerHTML = samochod.pelnaNazwa();`
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień dwunasty - https://youtu.be/Fk2SbudtSA0

Robiłem ćwiczenia z JavaScript, skupiłem się na zrozumieniu zastosowania funkcji i przykładach z użyciem wielu zmiennych.
Screenshoty z dnia : https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler > Wszystkie nazwy własne (funkcji, zmiennych itd) w JS mogą zaczynać się jedynie od: liter(caseSensitive), podkreślnika _ , i znaku dolara $
> Nie używamy w nich myślników “ - “ które zarezerwowane są dla działania odejmowania
> Znak równości = oznacza przyporządkowanie a nie równość wartości per se
> 2 znaki równości == oznaczają równą wartość
> 3 znaki równości === oznaczają równą wartość i ten sam typ (string=string / numer=numer)
> konkatenacja == łączenie dwóch wyrażeń (np. tekstowych) w jedno (ustawienie jednego za drugim).


pokaż spoiler > confirm("Jeśli jesteś pewien, że chcesz usunąć tę stronę z internetu, kliknij 'OK'");
> wyskakujący komunikat, z opcjami OK i Anuluj
> prompt(“_pytanie_komunikat_”); - wyskakuje okienko z możliwością wypełnienia treścią
> “_dany_ciąg_znaków_czyli_string”.length == obliczenie ilości znaków stringu (incl. spaces)
> Boolean = typ logiczny– uporządkowany zbiór wartości logicznych, składający się z dokładnie dwóch elementów: prawda (true, 1, +) i fałsz (false, 0, -) (George Bool)
> “Tyson był lepszy od Aliego”.length > 10; - wynik “True” <10 - wynik “False”
> if ( prompt(“Wpisz swoje imię”).length >= 5) {
> console.log(“Masz długie imię”);
> }
> else {
> console.log(“Masz krótkie imię”);
> }
> symbol Modulo = 23%10 daje 3. (2x10 +%3%) Dzieli pierwszą liczbę przez drugą, w wyniku uwzględnia jednostkową resztę z dzielenia. 30%10 daje 0 (3x10 +%0%)
> "wonderful".substring(3,7); == derf - 0 w 1 o 2 n 3 d 4 e 5 r 6 f 7 u 8 l 9


pokaż spoiler > var podzielPrzezTrzy = function(liczba //parametr// ) {

var wynik = liczba / 3;

pokaż spoiler > console.log(wynik);
> }
> -----
> podzielPrzezTrzy(21);


pokaż spoiler > Zasada Don't Repeat Yourself (D.R.Y)


pokaż spoiler > var orangeCost = function(kosztJednej) {


var suma = 5 * kosztJednej;
console.log(suma);


pokaż spoiler > }
> orangeCost(5);
> -----
> var razyDwa = function(liczba) {

return liczba* 2;

pokaż spoiler > };
> var nowyWynik = razyDwa(5) * 2
> console.log(nowyWynik); --- wychodzi 10
> --------
> var cwiartka= function(liczba) {

return liczba / 4;

pokaż spoiler > }


pokaż spoiler > if (cwiartka(12) % 3 === 0 ) {

console.log(“Wszystko jest w porządku");

pokaż spoiler > } else {

console.log("To się nie zgadza!");

pokaż spoiler > }
> -------
> var obwodBoxa = function(dlugosc, szerokosc) {

return 2 * dlugosc+ 2 *szerokosc;

pokaż spoiler > };


pokaż spoiler > obwodBoxa(3,2); ----wychodzi 10
> ---------
> zmienne var zadeklarowane poza nawiasami funkcji { } są globalne i można wywoływać je wszędzie. Zmienne var zlokalizowane tylko wewnątrz pola działąnia funkcji { }, są jedynie lokalne, na użytek funkcji i nie można ich wywołać poza funkcją.
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień jedenasty - https://youtu.be/QWum2yv6prQ

Miałem pierwszy raz styczność z JavaScript i mimo lekkiej tremy będę to dobrze wspominał. Składnia ma dla mnie sens i jestem w stanie napisać pierwsze podstawowe skrypty bazując na logicznej kolejności wszystkich elementów funkcji, które wypisuje. Piotrek obdarzył mnie całą listą jego sugestii odnośnie do poprawy działania mojej strony - dzięki!

Screenshoty z dnia : https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler > <button
onclick=”document.getElementById(‘nazwa_ID’).style.fontFamily=’Garamond’”> Nazwa Przycisku</button> - zmiana danego atrybutu stylu


pokaż spoiler <button type="button" onclick=”document.getElementById(‘nazwa_ID’).src=’http://w90dnit.it/avatar.png’”> Nazwa Przycisku</button> - zmiana źródła zdjęcia


pokaż spoiler <button type="button" onclick="document.getElementById('demo').style.display='none'">Nazwa_Przycisku</button> - ukrywanie elementów - by pokazać z powrotem - display=”block”


pokaż spoiler .innerHTML=’zmiana_treści_na_wpisaną’


pokaż spoiler Nie ma znaczenia czy używamy cudzysłowiu, czy apostrofu


pokaż spoiler umieszczanie skryptu jako funkcji w innym miejscu na stronie, np na dole <body>, by strona ładowała się szybciej (skrypt ładowany jest na końcu)


pokaż spoiler <button onclick=”moja_funkcja()”>Aktywuj!</button>
<script>
function moja_funkcja() {

document.getElementById(‘nazwa_ID’).innerHTML=’Było Warto!’;

pokaż spoiler }
</script>


pokaż spoiler <script>window.alert(_liczby_ / _”litery”)</script> - wyświetli się małe okienko powiadamiające z treścią
‘
document.write(


pokaż spoiler <h3 id="tekst"> </h3>
<button onclick="szczescieMoje()">Nacisnij</button>
<script>
function szczescieMoje() {
var imie = "malenia";
var ksywa = "fighter";
document.getElementById("tekst").innerHTML = imie + " czyli " + ksywa;
}
</script>
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Nadrobiłem :)

Dzień dzisiąty- https://www.youtube.com/watch?v=s7fean4BMU4

Zapoznałem się z nowym mentorem, który zalał mnie nową wiedzą i zachęcił bym rozpoczął kolejny blok ćwiczeń poświęcony JavaScriptowi (na 90%, bo się trochę go boję). Design strony już uaktualniony, pozostaje zapełnić ją tekstem i prawdopodobnie wzbogacić o jakiś pierwszy skrypt :)

Screenshoty z nauki dostępne tutaj: https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler > Strona do sprawdzania poprawności naszego projektu:
> https://validator.w3.org/nu/?doc=http%3A%2F%2Fw90dni.it%2F
> Strona do sprawdzania zgodności zastosowanych technik z przeglądarkami:
> http://caniuse.com/
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Z lekkim opóźnieniem, ale jest:

Dzień dziewiąty - https://www.youtube.com/watch?v=H473C_wy_4A

Wreszcie skończyłem pierwszy, bardziej bardziej niż dotychczas zaawansowany (jak na mnie) projekt strony - http://w90dni.it
Możecie rzucić okiem i powiedzieć, co wg Was trzeba kategorycznie poprawić i nie jest zgodne z zasadami dobrych praktyk (korzystałem jedynie ze swoich mocno ograniczonych umiejętności, a ustawianie konkretnych elementów w zasadzie zawsze bazowało na position:absolute/fix i marginy), pozdrawiam Mirków!

Screenshoty z nauki dostępne tutaj: https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler `nawias {list-style-type: none(brak), circle(puste kółka), decimal-leading-zero(cyfry, z poprzedzającym zerem), lower/*upper*/-alpha(a,b,c*/A,B,C), lower/*upper*/-roman(i,ii,iii/I,II,III), square(kwadraty),
(spersonalizowany bullet-point) li:before {

content: "•"; /* Twoja treść wypunktowania /
padding-right: 8px;
color: blue; / np. dowolny kolor */

pokaż spoiler div div p { color:red } - zmiana tylko dla <p> umieszczonego w drugim z kolei DIVie
gwiadka * { color:red} - zmiana właściwości dla wszystkich elementów`
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień ósmy- https://youtu.be/f2EpS4ynwAQ

Nabieram wprawy w CSSie, który ostatnio mnie skutecznie frustrował.

@Kramarz @austra @Dante15 Dzięki za sugestie dotyczące zrzutów ekranu! Poradziłem sobie z tym i efekty poniżej.

Screenshoty dostępne tutaj: https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU

Trochę notatek:

pokaż spoiler > * { color:red } - nadaje wszystkiemu dany atrybut
> div div p { color:blue} - obejmuje tylko p wewnątrz div/div
> div > p { color:red } - obejmuje jedynie p, które jest bezpośrednio pod div - direct child
> a:hover { color:red} - po selektorze /*a*/ zastosować można pseudoselektor /*hover*/
> a:link a:visited a:hover -link nieodwiedzony/odwiedzony/pod kursorem
> p:first-child { -tylko pierwszy w kolejności selektor otrzymuje atrybut
> p:nth-child(2) -selektor enty w kolejności (jego numer w nawiasie)otrzymuje atrybut (uwzględniając w numeracji wszystkie występujące tagi, nie tylko wpisany tag)
> { display: block (ma formę klocka o ustalonych wymiarach, blokuje całą szerokość wiersza),

inline-block (również forma klocka, można ustawiać inne elementy obok)
none (element wraz z zawartością jest całkowicie wymazany ze strony)

pokaż spoiler > { margin: auto - automatycznie te same marginesy po lewej i prawej - wyśrodkowanie elementu
> { float: right left - element przystawia się do wybranej krawędzi i inne elementy mogą go opływać
> { clear: both/right/left - element usuwa się z drogi innym elementom (przeskakuje niżej), które są już po którejś ze strony
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień szósty ( i siódmy, bo w niedziele nawet Bóg odpoczywał :) - https://youtu.be/KQSC6dQsixY

Skriny dzisiejszego tasowania się z CSSem - https://drive.google.com/open?id=0BwsOkIdNSSGNSEduMHFIYzhrVlU
Tak, jak mi powiedział @mafiozorek - zbyt dużo teorii, pora zacząć się więcej bawić w kompleksowym ujęciu, a mniej tasować na prostych ćwiczeniach wyrwanych z kontekstu. Idę spać, pozdrawiam #nocnazmiana pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień piąty - https://youtu.be/fTVAdtdsklc

Ze screenshotami mieliście dobry pomysł, zacznę je zamieszczać. Macie jakiś swój do tego polecany program?

Nareszcie poznałem CSSa, super ułatwienie dotychczasowego procesu edycji stylów na stronie. Było sporo ćwiczeń i teorii, jutro trochę więcej ćwiczeń i edycja strony.

Trochę notatek:

pokaż spoiler <link type="text/css" rel="stylesheet" href="stylesheet.css"/> -zawsze na początku

-tak samo jak <img src /> jest samozamykający, nie trzeba oddzielnego taga zamykającego
<span></span> - znowu zaznaczanie konkretnych fragmentów tekstu
span {
atrybut: wartość;
}
/* tekst komentarza dla css / <!-- kontra tekst komentarza dla html -->

kolory mogą być zapisane jako wartości heksadecymalne #aaa000 znaki 0-9 i a-f razem 16 znakow
font-size: 1em -domyślna wielkość czcionki na każdym urządzeniu relatywnie taka sama, 2em oznacza dwukrotnie większą niż normalnie
text-decoration: none; -tekst bez podkreslen i innych dekoracji np linki
a { } -style dla linków
trzy zawsze dostępne w css czcionki, bez względu na urządzenie, na którym są wyświetlane:
serif (szeryfowa), sans-serif (zwykła, bez dekoracji), cursive (stylizowana a'la comic sans)
font-family: Vivaldi, Impact, cursive; -ustawienie kolejności ładowania czcionek przy braku
zainstalowania pierwszej wpisanej czcionki
div {
background-color: #cc0000;
height: 100px;
width: 100px;
} -przykładowy czerwony blok
dla obramowania komórek i całych tabel można ustawić:
border: 1px dashed/solid/ blue; -grubość ramki; linia przerywana/ciągła*/; kolor

Priorytetowanie źródła informacji o stylu /* Cascade order /:
tag !important > w kodzie html jako atrybut /inline/ > w sekcji head > w pliku CSS (jeśli konkretne atrybuty się powtarzahą i mają inne wartości, to priorytet ma późniejszy wpis / poniżej */)

ustalanie selektorów w css
dla class .nazwa
dla id #nazwa
kursywa italic {font-style: italic;}
marginesy { margin-top/bottom,left,right/: 10px }
umieszczenie obiektu po którejś stronie z opcją opływania tekstu:
{ float: left/right,none/ }

(nie umiem dać całości do spoilera :( ) pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień czwarty - https://youtu.be/XgAaoA7LPH4

Pierwsze zderzenie z Gitem i Wierszem Poleceń

Świetna strona do nauki Gita - http://learngitbranching.js.org/ (dzięki @Kramarz!)

@Dawiducik: jutro sprawdzę bracketsa z CSSem, dzięki za info!
@plotkiit: dzięki za słówko o Sublime :) Screenshoty świetny pomysł!

`Wiersz poleceń

pokaż spoiler git bash command line
~ home directory
pwd - obecny katalog
ls - lista folderów i plików
ls -l -dokladniejsza lista
cd - change directory
cd V...pierwsza litera i TAB automatycznie dokańcza nazwe
cd Videos -przechodzi do katalogu z poziomu obecnego katalogu
cd /c/Windows/System32/ -przechodzi prosto do dokładnego katalogu
cd .. -wraca do folderu wyzej
cd Moje\ Dokumenty - znak \ trzeba umieszczac przed spacja w nazwie folderu
cd ../../.. -wraca do X folderów wyżej
cd ~ albo cd = wraca do folderu domowego
which ls - znalezienie polozenia danej komendy
echo "treść" -wyświetlanie danej treści
echo "ścieżka zmiennych to $PATH" -wyświetli tekst + katalog $Path}
echo "przykladowy tekst" >> demo.txt -stworzenie demo.txt o treści "przykładowy tekst"
echo "dodatkowy tekst" >> demo.txt -uzupełnienie pliku o dodatkową treść
echo "kolejny tekst" > demo.txt - nadpisanie demo.txt nową treścią, usunięcie starej treści
ls >> tekst.txt -spisuje zawartość obecnego katalogu do tekst.txt
cat _nazwa pliku_ - wyświetla w całości treść pliku_
less _nazwa pliku_ - to samo, ale z możliwością nawigacji strzałkami (nacisnąć q by wyjść)
touch demo.txt -tworzenie pliku demo.txt
jeszcze raz ta sama nazwa pliku - uaktualnienie daty pliku bez zmiany zawartości
mv demo.txt demo-1.txt -zmiana pierwszej nazwy na drugą nazwę
mkdir projekt -stworzenie folderu projekt
mkdir -p projekt/klient/order - tworzenie wszystkich podkatalogów naraz
rmdir projekt -usunięcie wybranego folderu
rm -rf projekt -usuniecie folderu projekt wraz z podfolderami
clear -wyczyszczenie ekranu z pozostałych logów
`
pokaż całość

#w90dniit #naukaprogramowaniaodkuchni

Dzień trzeci eksperymentu z nauką HTMLa na czele. Udało mi się skonfigurować serwer, na którym od dzisiaj będzie się znajdować moja, codziennie uaktualniana stronka http://w90dni.it/ na razie oczywiście jest na poziomie gimnazjum, a nawet gorzej :)

Film z dnia trzeciego:
https://www.youtube.com/watch?v=uAbkC3ihpzk pokaż całość

Nauki dzień drugi za mną. Pierwsza wizyta na StackOverflow.com i zakup JEDYNEJ książki do HTML i CSS, której będę używał do wspomagania wiedzy z kursu.

02/90 - https://www.youtube.com/watch?v=7qzOcFpNIjQ&feature=youtu.be

#naukaprogramowaniaodkuchni
#w90dniit pokaż całość

Początek nauki HTMLa za mną. Dzięki za wszystkie komentarze i wiadomości! Odpiszę jutro o 6, bo już trochę późno. Wrzucam dzień 2 i do zobaczenia jutro! #naukaprogramowaniaodkuchni
https://youtu.be/amNvMQR4nys #w90dniit

Mirki, startuje z moim wyzwaniem - najbliższe 90 dni będę FULL TIME codziennie uczył się podstaw programowania, zaczynając od HTML, CSS i JavaScript. Pobudka o 6 rano, koniec z leniuchowaniem. Mój cel minimum - staż w firmie IT, jako Front-End Developer. Będę robił to również w formie vloga, by mieć dodatkową motywację do nauki - pierwszy filmik i trochę #pokazmorde https://www.youtube.com/watch?v=uIbQEz31LI0&spfreload=10 . Założyłem do tego nowe konto, wcześniej na wykopie, jako @Stopowicz , dodatkowo dodaje taga #w90dniit i #naukaprogramowaniaodkuchni , może ktoś zajrzy na kanał i się zainspiruje, czy coś

#naukaprogramowania #webdev #w90dniit

Kochani wczoraj wieczorem coś się popsuło, coś się popsuło i nie było mnie słychać, więc wołam Mirków, którzy polubili mój ostatni wpis, bo google niestety usunął mi pierwsze konto, nie wiem dlaczego :)
@Gruby_Mirek @Kalvot @cruc @FNwsk @sokytsinolop (vlog motywuje cumplu!) @Dawiducik @npsr @Dante15 @Jaro070 @paulina-sudyniak @briskmann @drwxr @Gomusss @Havii @kovalski @LetMeCaptureIt @MlodyBocian @offensive_gk @TheBestThing @ysqx pokaż całość