CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego
Gratulacje! Skoro czytacie ten tekst, oznacza to, że dowiedliście swoich umiejętności ze znajomości HTML & CSS. Zostaliście przydzieleni do zespołu, który będzie się uczył programowania i wykonywał prawdziwe aplikacje webowe. Teraz stajecie przed pierwszym większym wyzwaniem. Technologie, o których się uczyliście, trzeba zastosować w praktyce. To pierwszy i ostatni na CodersCamp projekt, który będziecie robić w pojedynkę. Jednakże już macie cały zespół i mentora, który z pewnością będzie Was wspierał.
W projekcie każdy z uczestników powinien 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. W trakcie przerabiania działu poznałeś wszystkie umiejętności, które pozwolą Ci wykonać Twoją wizytówkę od podstaw :)
Zapewne interesuje Was, w jaki sposób projekt zostanie „zaliczony” i oceniony. Ocenianie będzie miało kilka etapów.
- Kiedy skończycie pracę nad projektem, odnotujcie ten fakt w specjalnie przygotowanym formularzu — link otrzymacie od swojego mentora. Powinno to nastąpić najpóźniej o godzinie 23:59 dnia poprzedzającego prezentację projektu (data dostępna w harmonogramie kursu).
- Spotkajcie się w wyznaczonym dniu całym zespołem wraz z mentorem (np. za pomocą Google Meet). W trakcie spotkania zaprezentujcie wykonane przez Was projekty. Forma prezentacji pozostaje dowolna (musi zmieścić się w 5 minutach + 5 minut na pytania). Możecie przygotować jakieś slajdy, pokaz waszych talentów, czy nawet zaśpiewać — ale nie jest to konieczne. Na pewno musi zostać pokazana działająca strona internetowa, reszta wg Waszego uznania. Jeśli robicie wizytówkę o sobie, to być może chcecie też opowiedzieć o swoich zainteresowaniach, żeby inni w zespole poznali Was lepiej :) ?
- Po prezentacji mentor Waszego zespołu oceni projekt wg kryteriów opisanych w specjalnym arkuszu — przykład takiego arkusza możecie zobaczyć TUTAJ. Pamiętajcie też odpowiednio opracować README.md Waszego projektu, tak aby prezentowało kto, co, jak i dlaczego zostało wykonane. Zawartość, którą macie tutaj aktualnie (to co teraz czytacie) można usunąć — znajdziecie ją zawsze w oryginalnym repozytorium, które forkowaliście.
- Po zrecenzowaniu waszych projektów mentor powinien przekazać każdemu jego ocenę punktową i feedback jako uzasadnienie.
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 Wasi przyszli klienci i wasz zespół trochę lepiej Was poznali. Dlatego jako pierwszy projekt do Waszego portfolio proponujemy przygotowanie strony — wizytówki. Motywem przewodnim powinniście być właśnie Wy sami lub o wasze zrealizowane projekty lub zainteresowania, najważniejsze umiejętności — nie koniecznie programistycznych! 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.
W tym pierwszym, rozgrzewkowym projekcie pracujecie jeszcze osobno. Pamiętajcie, że macie zespół i mentora, który jest tutaj, żeby Was wspierać przez cały czas trwania kursu.
Dajcie się lepiej poznać dzięki internetowi i swoim umiejętnością! :)
Możesz posłużyć się projektem interfejsu strony — wizytówki, wykonanym przez organizatorów projektu. Jest to tylko dla ułatwienia Ci pracy. Możesz w trakcie implementacji go dowolnie przekształcać / zmieniać czy zrobić coś zupełnie innego. https://www.figma.com/file/WHtiMfcNHt4tc7mDamNBYa/CodersCamp2020-Wizytowka?node-id=0%3A1 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.
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 :) Dobrej zabawy!