TASKI dla ProjektSass - Ćwiczenie obowiązkowe dla Technik Programista - na ocene

Część 1 Przygotowanie preprocesora SASS

1. Utworzenie nowego folderu o nazwie: "ProjektSass"
2. Wchodzimy do folderu za pomocą CMD (konsoli) do "ProjektSass"
np. c:\cd ProjektSass
c:\ProjektSass\
oraz za pomocą konsoli tworzymy dwa foldery: "sass" oraz "css"
c:\ProjektSass\mkdir sass
c:\ProjektSass\mkdir css
3. za pomocą konsoli CMD w "ProjektSass" - uruchamiamy nasłuchiwanie SASS:
c:\ProjektSass\sass --watch sass:css
4. Tworzymy index.html w "ProjektSass"
5. Tworzymy w "ProjektSass\sass" plik o nazwie style.scss
6. Sublime Text dzielimy na 3 kolumny oraz otwieramy pliki w edytorze:
"View->Layout->Columns 3" odpowiednio 1kol. index.html, 2kol. style.scss, 3kol. style.css

Część 2 - pobranie materiałów z repozytorium GITHUB

1. Aby pograć materiały z "https://github.com/pzsnr1/projektsass.git" GitHuba należy:

a) utworzyć nowe konto na https://github.com/ (w razie problemów pisać na grupie)
b) zainstalować program na lokalnym komputerze do zarządzania repozytoriami "GIT" ze strony: https://git-scm.com/downloads
dla odpowiedniego systemu operacyjnego (pewnie wszyscy macie WIN, instalacja domyślna za pomocą kreatora... w razie problemów pisać na grupie)
c)uruchomić konsole w nowym oknie CMD lub domyślną "Git Bash" po instalacji wejść do projektu "c:\ProjektSass"
d)pobrać materiały poleceniem c:\ProjektSass\ git clone https://github.com/pzsnr1/projektsass.git
e)cieszyć się z materiałów pobranych XD


f)Na ocenę celujący: w ramach swojego konta na githubie w gałęzi branch master nowego repozytorium o nazwie "ProjektSass" dla każdego ćwiczenia z osobna tworzycie commity wraz z aktualizacją dokumentów(plików).
W razie podjęcia się zadania i braku wiedzy jak to wykonać, proszę na grupie pisać lub dzwonić (poprowadzę za rączkę). Jeśli ktoś nie ma mojego nr tel to podam na grupie.
Dla niewtajemniczonych polecam tutorial git'a: https://www.youtube.com/watch?v=D6EI7EbEN4Q&list=PLjHmWifVUNMKIGHmaGPVqSD-L6i1Zw-MH
2. Pobrane materiały to:
a) główny plik projektu index.html (celem ćwiczenia jest wygenerowanie arkusza style.css za pomocą preprocesora SASS z pliku style.scss) na potrzeby projektu index.html aby sformatować wygląd strony
b) Pobranie zdjęć -- folder img.
c) Do materiałów dodane są dwa pliki: taski.html, taski.css oraz katalog zadania- gdzie podane są wytyczne do projektu (czyli to co teraz czytacie)

Część 3 Wykonanie zadania projektowego

1. Ćwiczenia wykonujemy zgodnie z poniższym opisem, pliki scss zapisujemy do katalogu sass

Ćwiczenie 1 - dodajemy do pliku "style.scss" poniższy kod jak na obrazku

Strona index.html - dodaj obsługę znaków pl

Zmieniamy styl dla id=main-nav

oraz dla section h1


Ćwiczenie 2 - dodajemy do pliku "style.scss" poniższy kod jak na obrazku

poszerzamy styl dla id=main-nav

oraz stylujemy pseudoklase after

UWAGA !!! proszę w komentarzu w kodzie style.scss opisać w co oznacza pseudoklasa after

np. //komentarz dotyczy Ćwiczenia 2 --- i umieszczamy opis "co oznacza pseudoklasa after"


Ćwiczenie 3 - dodajemy do pliku "style.scss" poniższy kod jak na obrazku

Tworzymy Mixins oraz aktualizujemy kod styli.

Proszę zwrócić uwagę na tworzenie @mixin oraz sposób ich użycia

UWAGA !!! proszę w kodzie dodać komentarz opisać czym są "wstawki @mixin"


Ćwiczenie 4 - tworzymy dodatkowe dokumenty scss - poniższy kod jak na obrazku

Teraz tworzymy dokumenty i w sublime text zapisujemy do katalogu sass:

variables.scss (bedą przechowywać zmienne)

reset.scss (ustawienia domyślne)

mixins.scss (dokument z wstawkami)

plik style.scss (aktualizujemy go jak na zdjeciu)

UWAGA !!! w tej części ćwiczenie polega na aktualizacji kodu w pliku style.scss i dopisaniu kodu do poszczególnych dokumentów

Proszę w komentarzu w pliku style.scss napisać jaka według was, dlaczego projest został wzbogacony o dodatkowe dokumenty scss?






Ćwiczenie 5 - pseudo klasy – wycinamy z jednego miejsca pseudoklasy do innego poniższy kod jak na obrazku

zajmujemy się w tej części dokumentem mixins.scss oraz style.scss

proszę zastanowić się i odpowiedzieć w komentarzu co oznacza w pliku mixins.scss wpis:

@mixins clearFix{ &:after ....} ze szczególnym uwzględnieniem znaku "&" ?


Ćwiczenie 6 - Matematyczne operatory - poniższy kod jak na obrazku

w tej części zwracamy szczególną uwagę na zastosowanie operatora dzielenia "/" oraz aktualizujemy dokument style.scss

UWAGA !!! opisz w komentarzu jak na obrazku. Dlaczego dla id=services użyłem wpisu: "width: (100% / 3)"


Ćwiczenie 7 - Grid width SASS Math - poniższy kod jak na obrazku

w tej części projektu proszę znaleźć w pliku style.scss KOD "#projects li{ }" oraz zawartość jego zamienić na kod jak na obrazku:


Dopisujemy @mixins grid($cols,$mgn) do pliku mixins.scss jak na poniższym obrazku

UWAGA !!! proszę w komentażu opisać co dokładnie wykonuje @mixins grid($cols,$mgn)


Ćwiczenie 8 - Colour Function – (ligthen,complement ) polecam- http://sass-lang.com - poniższy kod jak na obrazku

Zwróć uwagę na kolejne zmiany: w dokumencie style.scss

zmieniamy w: #main-nav dla znacznika "a"

oraz zmieniamy w #services dla znacznika "a" oraz aktualizujemy style.scss

UWAGA !!! opis w komentarzu za co są odpowiedzialne funkcje: ligthen,complement ?





Ćwiczenie 9 - The @Content Keyword - poniższy kod jak na obrazku

w tej części zmieniamy content dla roździelczości strony 600px z użyciem "@media" (w momencie zmniejszenia strony menu powinno się zmienić jak na zdjęciu

UWAGA !!! proszę poeksperymetować z roździelczościami dla różnych "@media"





Ćwiczenie 10 - @if Statements - Wyrażenia warunkowe w SASS - poniższy kod jak na obrazku

Tutaj pracujemy na dwóch dokumentach: style.scss oraz mixins.scss
Przykład pokazania jak można wykorzystać wyrażenie warunkowe do sterowania wyświetlania li dla dwóch roździelczości 600px oraz 300px
UWAGA !!! proszę przestudiować kod oraz w komentarzu spróbować opisać zasadę działania




Ćwiczenie 11 - @if Statements - Wyrażenia warunkowe w SASS ciąg dalszy - poniższy kod jak na obrazku

zmodyfikuj dokument mixins.scss
wykorzystaj istniejacy kod @mixin mQ() i dodaj go dla obsługi @mixin banner{} jak pokazano na obrazku



W razie problemów proszę o komentarz na grupie !!!
Powodzenia !!!
Termin wykonania zadania do 20.03.2020