Zawsze jest to ekscytujące, gdy po raz pierwszy próbujesz nauczyć się nowej umiejętności. Szczególnie kodowania.
Jednakże, jeśli nie masz praktyki, zapominasz większość z tego, czego się nauczyłeś. Dlatego w pewnym momencie uświadamiasz sobie, że musisz ćwiczyć to, czego się nauczyłeś. W przeciwnym razie zapomnisz to wszystko.
W tym miejscu pojawiają się projekty. Projekty są dobrym sposobem na przećwiczenie tego, czego się nauczyłeś. I uwierz mi, że chcesz pracować nad niektórymi projektami. Możesz użyć projektów, aby pokazać, nad czym pracowałeś.
Jako nowicjusz, wybór projektów, które odpowiadają twojemu obecnemu poziomowi wiedzy, może być zniechęcający. Możesz wybrać jakiś projekt. Wtedy projekt staje się zbyt duży, aby go zrealizować przy obecnym poziomie wiedzy. Przynajmniej, to jest to, przez co przeszedłem w tej podróży edukacyjnej.
Znalazłem kilka projektów, które są odpowiednie nawet jeśli twoja wiedza jest ograniczona do HTML i CSS tylko. Projekty te są dostępne w popularnych serwisach edukacyjnych, gdzie znajdziesz dodatkowe informacje na temat tego, czym będziesz się zajmował.
1. Strona z hołdem
Napisz hołd dla kogoś, kogo podziwiasz i opublikuj go jako stronę internetową. Ten projekt będzie obejmował pracę z dodawaniem obrazów, linków, list i akapitów. Do stworzenia tego projektu wymagana jest znajomość języka HTML. Możesz jednak użyć odrobiny CSS, aby projekt wyglądał lepiej.
2. Formularz ankiety
Formularze są przydatne w zbieraniu danych online. Ten projekt będzie głównie testował Twoje umiejętności w zakresie wszelkiego rodzaju danych wejściowych. Będzie to sprawdzenie Twojej wiedzy na temat formularzy i strukturyzacji strony internetowej. Formularz nie jest wymagany do przesyłania jakichkolwiek danych.
Jest to rozbudowa strony z daninami. Ten projekt będzie wymagał znajomości html/html5 do stworzenia.
3. Zbuduj stronę docelową produktu
To będzie testowało Twoją znajomość zarówno HTML jak i CSS. Będziesz musiał przećwiczyć tworzenie kolumn i wyrównywanie elementów w kolumnach. Będziesz także musiał wykonać podstawową edycję obrazów, np. przycinanie i zmianę rozmiaru, aby stworzyć idealne obrazy na stronę internetową.
Będziesz potrzebował solidnej wiedzy z zakresu HTML/CSS.
4. Zbuduj stronę dokumentacji technicznej
To będzie wymagało pewnej znajomości HTML CSS i bootstrap lub JavaScript. Podstawową ideą jest: kiedy klikasz na dowolny temat po lewej stronie, ładuje on zawartość po prawej stronie.
Jestem w trakcie realizacji tego projektu i opublikuję końcowy projekt, kiedy zostanie ukończony.
5. Zbuduj stronę internetową osobistego portfolio
Będziesz ćwiczył wszystkie umiejętności, których nauczyłeś się w HTML i CSS. Będziesz także musiał wiedzieć jak przycinać i zmieniać rozmiar obrazów. Jeśli nie masz takiej możliwości, użyj programu Gimp. Jest darmowy, open source i dostępny na Windows i Linux .
Jeśli spieszysz się, aby zrobić portfolio, możesz przeczytać artykuł Briana o robieniu portfolio online przy użyciu gotowego motywu/szablonu.
6. strona Google.com
Tak, widziałeś to wiele razy. Ale czy potrafisz go odtworzyć. Prosta strona google.com z ikonami, logo google, polem tekstowym i dwoma przyciskami. Możesz zrobić look-alike strony google.com. W tym projekcie musisz sprawić, aby wyglądała jak google.com, a nie funkcjonowała jak google.com.
Musisz znać zarówno HTML, jak i CSS.
7. google.com Strona wyników wyszukiwania
Twoja strona będzie miała format wyników wyszukiwania google. Twoja strona powinna mieć normalne 10 wyników i nawigację do następnych stron na dole.
Jest to ulepszenie podstawowej strony google.com powyżej. Jednakże, powinieneś być w stanie ponownie wykorzystać część kodu w tym projekcie.
Ponadto, strona powinna wyglądać nieco inaczej, ale funkcjonalność nie powinna być teraz problemem.
Wnioski
Jeśli chcesz nauczyć się podstaw HTML, możesz sprawdzić moją krótką lekcję wprowadzającą do HTML.
Czy zrobiłeś podstawowy projekt podczas nauki HTML i CSS? Jeśli tak, podziel się nim poniżej i pomóż innym uczącym się znaleźć 'proste’, ale wymagające pomysły do wypróbowania.