Без обзира да ли се рачунају као програмски језици или не, нема сумње да ХТМЛ и ЦСС – заједно са ЈаваСцриптом – чине камен темељац Ворлд Виде Веба. На срећу, оне су неке од технологија које је најлакше научити и приказати.
Као амбициозни веб програмер, како вежбате и демонстрирате своје вештине? Прво, потребан вам је један или више пројеката да бисте тестирали своје способности и подстакли процес учења осим учења синтаксе.
Ових осам пројеката су савршени за вас да усавршите своје ХТМЛ и ЦСС вештине и покажете шта сте научили.
Израда личне веб странице је један од најпопуларнијих али изазовних пројеката за почетнике у ХТМЛ и ЦСС. То је добро заокружен пројекат који тестира већину вештина стечених током процеса учења. Штавише, лична веб локација је одлично место за приказ вашег ЦВ-а и повезивање са њим ГитХуб налог.
Многи почетници користе софтвер попут СкуареСпаце-а или ВордПресс-а за више техничких аспеката изградње веб локација. Користећи ове алате, можете се фокусирати на усавршавање вештина маркирања и стилизовања. Или можете да направите веб локацију од нуле и изазовете све своје вештине.
Лична веб страница може послужити као портфолио за сав ваш рад. Заглавље је савршено за представљање, показивање контакт информација и повезивање других радова. Слично, подножје може да садржи везе до налога друштвених медија и даље информације о вама и вашим услугама.
Страница за признање је веб страница на једној страници која описује квалитете некога кога сматрате идолом или узором. Овај пројекат захтева само основне ХТМЛ и ЦСС вештине и један је од најједноставнијих задатака које можете користити да покажете своје способности.
Најистакнутија карактеристика странице поклона је слика субјекта. Као такво, правилно позиционирање ове слике захтева техничке вештине, вештине дизајна и око за детаље. Морате одабрати праве боје позадине како бисте употпунили слику.
Име субјекта је једнако важно као и слика, често истакнуто јединственим фонтовима и бојама у заглављу. Поред тога, страница са поклоном садржи један или два пасуса о теми, везе и јавне контакт информације.
Пројекат обрасца за анкету ће тестирати ваше знање и вештину у интерактивним контролама. Покрива цео опсег УИ/УКС-а, укључујући пријем и слање корисничког уноса. Штавише, у овом пројекту ћете користити ХТМЛ елементе као што су радио дугмад, текстуална поља, потврдни оквири и ознаке.
Ваш образац за анкету не мора да поставља питања из стварног живота или да чува одговоре у бази података. Уместо тога, можете користити текст чувара места да бисте демонстрирали своју наредбу о правилној структури веб странице. Штавише, можете направити одговарајући образац који прилагођава свој садржај на основу величине екрана.
Одредишна страница је још једна веб страница на једној страници посебно дизајнирана за маркетиншке кампање. Има за циљ да привуче купце у компанију или генерише потенцијалне клијенте. Као таква, одредишна страница је често прва тачка контакта са веб локацијама оптимизованим за претраживаче.
Можете да користите аналитику да бисте утврдили колико је ефикасна ваша одредишна страница. Дизајнирање одредишне странице како би се осигурало максимално ангажовање је од највеће важности. Одредишна страница је један од најизазовнијих пројеката за почетнике, упркос својој једноставности.
Биће вам потребне креативне вештине за овај пројекат, како бисте максимално искористили различите ХТМЛ елементе који су вам на располагању. Требаће вам савладавање ЦСС-а да бисте задовољили сложене изгледе на различитим уређајима.
Ваша одредишна страница мора да буде довољно интерактивна и да реагује да очара вашу публику и генерише активност корисника.
На први поглед, страница догађаја изгледа као било који пројекат статичне веб странице на овој листи. Међутим, његова карактеристика је дугме за регистрацију за посетиоце заинтересоване да присуствују догађају. Још једна истакнута карактеристика су везе за место одржавања, план пута и говорнике.
Овај пројекат тестира вашу способност да убаците много информација у ограничен простор. Сходно томе, ваша веб страница мора јасно навести сврху догађаја и предности, ако је применљиво. Такође можете укључити релевантне слике места, говорника и теме догађаја.
Страница догађаја захтева да знате како да користите ХТМЛ и ЦСС да бисте своју страницу поделили на секције. Поред тога, заглавље треба да садржи интерактивни мени, а подножје треба да приказује додатне информације.
Веб локација ресторана мора да користи праву комбинацију боја како би храна и пиће изгледали привлачније купцима. Можете такође учините веб страницу интерактивном за повећање ангажовања купаца. На пример, прелазак миша преко слике оброка може да прикаже картицу менија која садржи цену и доступност.
Овај пројекат пружа прилику да изазовете своје вештине распореда. На пример, можете користити клизаче за слике да бисте приказали опције менија ресторана. Алтернативно, можете користити ЦСС мрежа или флексбокс да усклади храну. Једноставне анимације на дугмадима и сликама такође могу дати вашој веб локацији узбудљив изглед.
Веб локација ресторана може захтевати вештине изван једноставног ХТМЛ-а и ЦСС-а, као што су јКуери и @кеифрамес.
Клон веб-сајта се често сматра врхунским тестом ваших ХТМЛ и ЦСС вештина, за који је потребно више времена и труда него било који други пројекат. Сајтови за дељење видеа попут ИоуТубе-а и Нетфлик-а су популарни кандидати за клонирање веб страница због своје сложености и професионалног изгледа.
Процес клонирања почиње снимцима екрана корисничког интерфејса веб локације, посебно интерактивних елемената. Затим користите све вештине које су вам на располагању да бисте реплицирали изглед и осећај различитих делова веб локације.
Ваш сајт за клонирање треба да садржи функције као што су претраживачи, одељци за коментаре, канали и планови плаћања. Такође можете да уградите ХТМЛ5 видео позадину да бисте опонашали функције репродукције видео записа ових веб локација.
Овај пројекат пружа увид у мисаони процес великих, професионалних тимова за веб развој. Штавише, можете користити Инспецт алат на вашем веб прегледачу да завирите у ХТМЛ и ЦСС изворни код за ове сајтове.
Паралаксно померање је широко распрострањен ефекат на модерним веб локацијама где се елементи позадине крећу различитим брзинама од елемената у предњем плану приликом померања. Упркос свом визуелно запањујућем изгледу, веб локација паралаксе је један од најлакших пројеката за почетнике.
Да бисте добили најбољи ефекат паралаксе, поделите своју веб страницу на три или четири одељка, сваки са различитом сликом у позадини. Кључни састојак за прављење паралакс веб странице је позадински прилог: фиксно ЦСС својство на одговарајућим сликама.
Неки почетници користе градитељи веб страница на мрежи као што су Вик, ВордПресс и Елементор за брзо креирање паралакс веб локација. Међутим, ови алати поткопавају изазов и процес учења стварања ефекта паралаксе од нуле.
Следећи кораци на вашем путу развоја веба
ХТМЛ и ЦСС су само две од многих технологија које можете користити за креирање интерактивних веб локација. Као резултат тога, одабир гомиле на коју ћете се фокусирати је често неодољив и збуњујући за почетнике.
Срећом, један програмски језик се истиче као краљ веб развоја. ЈаваСцрипт је можда тежи за савладавање од ХТМЛ-а и ЦСС-а, али су награде огромне. Учење ЈаваСцрипт-а вам омогућава да користите оквире као што су Реацт, Ангулар и Вуе.јс, штедећи време и труд приликом креирања запањујуће веб странице.
