NaKodach.pl - Projekt HTML & CSS

Gratulacje! Skoro czytasz ten tekst, oznacza to, że wykonałeś swój pierwszy wielki krok na drodze do zostania programistą. Miałeś tyle determinacji, aby przejść przez wszystkie materiały z HTML & CSS!

Już niedługo będziesz w stanie wykonywać prawdziwe aplikacje webowe... ale nie tak szybko! Zanim to nastąpi, stajesz przed pierwszym większym wyzwaniem. Technologie, o których się uczyłeś, trzeba zastosować w praktyce. Nie będzie już tak łatwo, jak przepisując kod z filmików. Jednakże masz mentora, który z pewnością będzie Cię wspierał.

Projekt HTML & CSS — Wizytówka / Portfolio

Czego się nauczysz?

W trakcie realizacji projektu nie tylko dowiedziesz swoich umiejętności z HTML i CSS, ale też opanujesz metody pracy używane przez programistów na co dzień!

• Jak korzystać z systemu kontroli wersji Git
• Jak pracować z GitHubem
• Jak opublikować swoją własną stronę na GitHub Pages
• Jak projektować interfejsy za pomocą Figma
• Jak korzystać z narzędzia do zarządzania projektami i planować pracę za pomocą GitHub Projects
• Jak tworzyć PullRequesty i współpracować z innymi programistami (CodeReview)

Zasady wykonywania projektu:

W projekcie powinieneś zaprezentować praktyczną znajomość poniższych zagadnień związanych z HTML & CSS:

• Box-model
• Kaskadowość CSS
• Selektory CSS
• Popularne tagi HTML
• Jak podpinać CSSa do HTMLa
• Zapisywanie kolorów
• Stylowanie tekstu
• Zewnętrzne ikony/fonty (fontawesome, google fonts)
• Flexbox i/lub CSS Grid
• Position (absolute, relative)
• Animacje keyframes
• Formularz (wysłanie formularza może powodować przeładowanie strony, gdyż w kursie nie było jeszcze jego obsługi)
• Responsive Web Design

Nie używaj JavaScriptu ani żadnego innego frameworka. Nie używaj też gotowych bibliotek styli takich jak Bootstrap czy Tailwind CSS. W trakcie przerabiania działu poznałeś wszystkie technologie, które pozwolą Ci wykonać Twoją wizytówkę od podstaw :)

Opis projektu

Pozyskanie pierwszego klienta nie przychodzi łatwo. Dla klienta, który chce otrzymać produkt wysokiej jakości, nie jest ważna tylko firma, która spróbuje zrealizować jego wizję. Równie istotne jest też to, z jakimi konkretnymi osobami przyjdzie komuś współpracować przy wytwarzaniu oprogramowania. Dobrze, żeby Twoi przyszli klienci i Twój mentor trochę lepiej Cię poznali. Dlatego jako pierwszy projekt do Twojego portfolio proponuję przygotowanie strony — wizytówki. Motywem przewodnim powinieneś być właśnie Ty sam / Twoje zrealizowane projekty (niekoniecznie programistyczne) lub zainteresowania czy najważniejsze umiejętności! Jesteś fotografem? Możesz przygotować stronę reklamującą swoje usługi. Jako fryzjer czy mechanik, możesz zrobić podobnie. Świat web designu stoi przed Tobą otworem.

Daj się lepiej poznać dzięki internetowi i swoim umiejętnością! :)

Jak rozpocząć pracę nad projektem

Aby ułatwić prezentację projektu innym osobom, dobrze, gdyby był on dostępny bez problemów pod adresem strony internetowej. Wtedy nawet Twój tata, będzie mógł zobaczyć, czego już się nauczyłeś! W tym przypadku większość pracy z tym związanej zrobiłem już za Ciebie. Oto co musisz zrobić, żeby zobaczyć efekt i zacząć development:

1. Przejdź do zakładki Settings w Twoim repozytorium.
2. Znajdź w zakładce Settings sekcję GitHub Pages i wybierz branch main jako source.
3. Po wyborze brancha main, zatwierdź ustawienia, klikając przycisk Save. Dzięki temu aktywujesz GitHub Pages dla swojego repozytorium.
4. Znajdź sekcję GitHub Pages w zakładce Settings jeszcze raz. Teraz powinien znajdować się w tym miejscu link. Po kliknięciu zaprowadzi Cię do Twojej strony. Ten link możesz od razu przekazać swojemu mentorowi - pokaż, że Ci się udało? A jeśli nie... nic straconego — poproś go o pomoc (w końcu po to tutaj jest). Od teraz Twoja strona jest od razu dostępna w internecie dla każdego, kto chciałby ją odwiedzić. I to kompletnie za darmo! Wiedziałeś, że to takie proste!?
5. Jeśli po kliknięciu w link, pokazała Ci się strona o treści pliku index.html z tego repozytorium, to znaczy, że wszystko jest w porządku.

Od teraz każda zmiana, jaką commitujesz do głównego brancha, będzie się pokazywać pod tym adresem. Masz już działające środowisko, więc na co czekasz? Do dzieła!

Porady odnośnie do projektu

Interfejs

Możesz posłużyć się projektem interfejsu strony — wizytówki, który znajdziesz poniżej. Jest to tylko dla ułatwienia Ci pracy. Możesz w trakcie implementacji go dowolnie przekształcać / zmieniać czy zrobić coś zupełnie innego.

• FIGMA

Pamiętaj też, że Twoje rozwiązanie musi być responsywne! Czyli odpowiednio dostosowywać sposób wyświetlania treści do rozmiaru okna przeglądarki.

Inspiracją może być także DevChallenge.io - Portfolio. Pamiętaj tylko, że Ty korzystasz tutaj jedynie z HTML i CSS, do JavaScriptu przejdziemy już naprawdę niedługo! Zobacz też co udało się zrobić innym osobom (na podobnym etapie rozwoju programisty), z którymi współpracowałem:

• Wizytówka Tomka: https://tomaszdworniczak.github.io/CodersCamp2020.Project.HTML-CSS.BusinessCard/
• Strona kancelarii prawniczej zrobiona przez Jolę (nieresponsywna): https://jolantakluzowska.github.io/Nauka.Projekt.HTML-CSS.KancelariaAdwokacka/

Przygotowane projekty interfejsu użytkownika są tutaj po to, żebyś bez problemów postawił swoje pierwsze kroki w praktycznym wykorzystaniu HTML i CSS. Jednakże zachęcamy do wykonania czegoś, co ukaże Twoje wnętrze i sprawdzenia swoich umiejętności designerskich przy użyciu Figma :)

Dobrej zabawy!

PS. Jeśli Git będzie sprawiał Ci problemy, to warto przerobić poniższe materiały.

• Git od podstawy | Overment

Oczywiście cały internet stoi przed Tobą otworem i Google to pierwsze miejsce, gdzie powinieneś zajrzeć, jeśli z czymś sobie nie radzisz.