Uczenie się kodowania jest zawsze ekscytujące i zabawne dla każdego, a kiedy przychodzi do wkroczenia w świat programowania większość ludzi zaczyna od najprostszych rzeczy HTML i CSS. Każda podróż początkującego kodera we frontend zaczyna się od tych dwóch podstawowych bloków i musisz być kreatywny, jeśli chodzi o projektowanie pięknej aplikacji.
Początkowo początkujący cieszą się z tworzenia przycisków, dodawania linków, dodawania obrazów, pracy z układem i wielu innych fajnych rzeczy w projektowaniu stron internetowych, ale kiedy przychodzi do tworzenia projektu przy użyciu tylko HTML i CSS, utknęli i mylą się co powinni zrobić, aby przećwiczyć te wszystkie rzeczy. W końcu ich wiedza jest ograniczona tylko do HTML i CSS. Bez względu na wszystko po nauczeniu się wszystkiego w pewnym momencie zdasz sobie sprawę, że zrobienie projektu jest ważne aby ćwiczyć umiejętności HTML i CSS. Musisz sprawdzić jak HTML i CSS współpracują ze sobą aby zaprojektować piękną aplikację frontendową. Więc pytanie brzmi jakie są przyjazne dla początkujących projekty, które możesz zbudować aby przećwiczyć wszystko czego się nauczyłeś…Omówmy to.
Strona hołdu
Najprostszą stroną jaką możesz zrobić jako początkujący jest strona hołdu dla kogoś kogo podziwiasz w swoim życiu. Wymaga ona tylko podstawowej znajomości HTML i CSS. Stwórz stronę pisząc o tej osobie dodając jej zdjęcie. Na górze strony dodaj zdjęcie i imię osoby, a poniżej rozplanuj resztę szczegółów. Możesz użyć akapitów, list, linków, obrazów z CSS, aby nadać jej przyzwoity wygląd. Dodaj odpowiedni kolor tła i styl czcionki na swojej stronie internetowej. Większość z tych części możesz zrobić używając HTML, ale aby nadać jej lepszy wygląd użyj trochę CSS. Skorzystaj z pomocy linku podanego poniżej.
- My Tribute Page
- Tribute Page to Steve Jobs
- Tribute Page to Albert Einstein
Webpage Including Form
Formularze są zawsze istotną częścią każdego projektu i będziesz pracował z wieloma formularzami w większości aplikacji, więc dlaczego nie przećwiczyć tego wcześniej i nie sprawdzić swojej wiedzy. Po zapoznaniu się z polem wejściowym lub podstawowymi znacznikami w HTML aby stworzyć formularz zrób projekt używając wszystkich tych znaczników. Jak korzystać z pola tekstowego, pola wyboru, przycisk radiowy, data, i inne ważne elementy w jednym formularzu. Dowiesz się jak nadać odpowiednią strukturę stronie internetowej podczas tworzenia formularza. Znajomość HTML/HTML5 jest wystarczająca, ale możesz użyć odrobiny CSS, aby projekt wyglądał lepiej. Skorzystaj z pomocy linków podanych poniżej.
- Formularz ankiety
- Formularz dobrych wibracji
- Formularz ankiety
Paralaksa strony internetowej
Paralaksa strony internetowej zawiera stałe obrazy w tle, które można utrzymać w miejscu i można przewijać stronę w dół, aby zobaczyć różne części obrazu. Mając podstawową wiedzę o HTML i CSS, możesz nadać efekt paralaksy na stronie internetowej. Używanie efektu paralaksy w projektowaniu stron internetowych jest naprawdę popularne i daje piękny wygląd i odczucia na stronie internetowej. Spróbuj i podziel całą stronę na trzy do czterech różnych sekcji. Ustaw 3-4 obrazy tła, wyrównaj tekst dla różnych sekcji, ustaw margines i wyściełanie, dodaj background-position i inne elementy CSS i właściwości, aby stworzyć efekt paralaksy. Możesz wziąć pomoc z Parallax Website.
Strona docelowa
Strona docelowa jest kolejnym dobrym projektem, który możesz zrobić używając HTML i CSS, ale wymaga solidnej wiedzy o tych dwóch elementach. Będziesz używał dużo kreatywności podczas tworzenia strony docelowej. Będziesz ćwiczył jak dodać stopkę i nagłówek, tworzyć kolumny, wyrównywać elementy, dzielić sekcje i wiele innych rzeczy. Będziesz musiał uważnie używać CSS, pamiętając o tym, aby poszczególne elementy nie nakładały się na siebie. Będziesz również dbał o kombinacje kolorów, padding, margines, przestrzeń pomiędzy sekcjami, akapitami i boksami. Kombinacje kolorów powinny dobrze ze sobą współgrać dla różnych sekcji lub tła. Możesz wziąć pomoc z linku podanego poniżej.
- Full Screen Landing
- Landing Page
Strona internetowa restauracji
Pokaż swoją solidną znajomość HTML i CSS tworząc piękną stronę internetową dla restauracji. Tworzenie układu strony dla restauracji będzie nieco bardziej skomplikowane niż poprzednie przykłady projektów. Będziesz wyrównywał różne artykuły spożywcze i napoje używając siatki CSS. Będziesz dodawał ceny, obrazki i musisz nadać jej piękny wygląd, używając odpowiedniej kombinacji kolorów, stylu czcionek i obrazków. Możesz dodać galerię zdjęć dla różnych artykułów spożywczych, możesz również dodać przesuwane obrazy, aby uzyskać lepszy wygląd. Dodaj linki do przekierowania do wewnętrznych stron. Uczyń go responsywnym ustawiając rzutnię, używając zapytań o media i siatki. Możesz wziąć pomoc z Restaurant Website.
An Event or Conference Webpage
Możesz zrobić statyczną stronę organizującą wydarzenie lub konferencję. Ludzie, którzy są zainteresowani uczestnictwem w konferencji stworzyć przycisk rejestracji dla nich. Wspomnij o różnych linkach do mówcy, miejsca i harmonogramu na górze w sekcji nagłówka. Opisz cel konferencji lub kategorię osób, które mogą czerpać korzyści z tej konferencji. Dodaj wprowadzenie i zdjęcia mówcy, szczegóły dotyczące miejsca i główny cel konferencji na swojej stronie internetowej. Podziel stronę na sekcje, dodaj nagłówek i stopkę prezentującą menu. Użyj odpowiedniego koloru tła, które mogą iść dobrze ze sobą dla różnych sekcji. Wybierz przyzwoity styl i kolor czcionki, który pasuje do tematu Twojej strony internetowej. Wymaga to dogłębnej znajomości HTML/HTML5 i CSS. Możesz wziąć pomoc z Konferencji Stylów.
Strona Sklepu Muzycznego
Jeśli jesteś miłośnikiem muzyki, możesz zrobić dla niej stronę internetową. Wymaga to znajomości HTML5/CSS3. Dodaj odpowiedni obrazek w tle opisujący cel lub to, o czym jest strona. W sekcji header dodaj różne menu. Dodaj przyciski, linki, obrazki i opisy dotyczące kolekcji dostępnych utworów. Na dole strony umieść linki do zakupów, sklepu, kariery lub dane kontaktowe. Możesz również dodać inne funkcje na swoich stronach, takie jak opcja próbna, karty podarunkowe lub subskrypcja. Uczyń ją responsywną ustawiając viewport lub używając media queries i grid. Możesz skorzystać z pomocy myTunes.
Strona fotograficzna
Jeśli posiadasz dogłębną wiedzę na temat HTML5 i CSS3, możesz stworzyć jednostronicową responsywną stronę fotograficzną. Użyj flexbox i media queries dla responsywności. Dodaj nazwę firmy z obrazem (związanym z fotografią) na górze (landing page). Poniżej zaprezentuj swoją pracę dodając wiele zdjęć. Wspomnij o danych kontaktowych fotografa na dole (stopka). Dodaj przycisk, aby zobaczyć swoje prace. Ten przycisk bezpośrednio przeniesie Cię na dół do sekcji zdjęć. Musisz zadbać o margines, wyściełanie, kombinację kolorów, rozmiar czcionki, styl czcionki, rozmiar obrazu i stylizację przycisku. Możesz skorzystać z pomocy Acme Photography.
Personalne portfolio
Z wiedzą na temat HTML5 i CSS3, możesz również stworzyć swoje portfolio. Zaprezentuj swoje próbki pracy i umiejętności w swoim portfolio, podając swoje imię i nazwisko oraz zdjęcia. Możesz również dodać tam swoje CV i hostować całe portfolio na koncie GitHub. W sekcji nagłówka umieść kilka menu takich jak o, kontakt, praca lub usługi. Na górze dodaj jedno ze swoich zdjęć i przedstaw się. Poniżej dodaj kilka próbek pracy, a na końcu (w stopce) dodaj informacje kontaktowe lub konto w mediach społecznościowych. Możesz skorzystać z pomocy Personal Portfolio.
Dokumentacja techniczna
Jeśli masz trochę wiedzy na temat Javascript to możesz stworzyć stronę z dokumentacją techniczną. Wymaga to znajomości HTML, CSS i podstaw javascript. Podziel całą stronę na dwie części. Lewa strona tworzy menu z wszystkimi tematami wymienionymi od góry do dołu. Po prawej stronie należy zamieścić dokumentację lub opis do tematów. Idea jest taka, że po kliknięciu na jeden z tematów w lewej sekcji, powinna załadować się zawartość po prawej stronie. Do kliknięcia możesz użyć javascript lub opcji zakładki CSS. Nie trzeba robić tego zbyt fantazyjnie, wystarczy nadać prosty i przyzwoity wygląd, który wygląda dobrze dla dokumentacji technicznej. Możesz wziąć pomoc z Dokumentacja techniczna.
Helpful Link: 10 Tips for Effective Web Designing in 2019
