4 vietnes ar praktiskiem HTML un CSS projektiem iesācējiem

Key Takeaways

• Pārvarēt apmācību elli HTML un CSS ir iespējams, izmantojot praktisku pielietojumu un projektu izstrādi. Tādas platformas kā Codewell piedāvā dizaina veidnes, pirmkodu un līdzekļus, lai izveidotu reālus projektus.
• devChallenges piedāvā virkni reālās pasaules kodēšanas izaicinājumu iesācējiem un pieredzējušiem izstrādātājiem. Tas piedāvā ceļus ar dažādiem grūtības līmeņiem, un, izpildot izaicinājumus, jūs saņemat sertifikātus par savu portfolio.
• Frontend Mentor ir populāra platforma, kas piedāvā priekšgala izaicinājumus kopā ar profesionālu tīmekļa dizainu. Tajā ir atbalstoša kopiena un resursi, lai uzlabotu jūsu mācīšanos. Jūsu portfolio var papildināt ar izaicinājumiem, lai palielinātu darba iespējas.

Apmācības elle ir problēma, ar kuru varat saskarties, sākot apgūt HTML un CSS. Nogrimšana apmācību jūrā var jūs atbaidīt un, iespējams, kavēt jūsu tīmekļa izstrādes progresu. Vienkāršākais veids, kā to pārvarēt, ir iesaistīties praktiskā lietošanā un projektu izstrādē, pamatojoties uz visu, ko jūs iemācāties.

Šajā sarakstā iekļautās vietnes piedāvā reālus HTML un CSS projektus. Tie nodrošina dizaina veidnes, pirmkodu un līdzekļus, lai izveidotu projektus, izmantojot HTML un CSS.

Codewell piedāvā virkni izaicinājumu, kas izstrādāti, lai palīdzētu jums praktizēt un uzlabot prasmes HTML, CSS, JavaScript un adaptīvā tīmekļa dizaina jomā. Šiem izaicinājumiem ir divas kategorijas: bezmaksas un premium.

Izmantojot bezmaksas opciju, jūs iegūstat piekļuvi sākuma failiem, kas satur līdzekļus, Readme failam, kurā ir informācija par izaicinājumu, un PNG dizaina failiem galddatoru, planšetdatoru un mobilo ierīču skatam. Izvēloties Premium dalību, tiek paplašinātas jūsu priekšrocības, tostarp visas bezmaksas līmeņa funkcijas, kā arī papildu Figma veidne.

Kad pabeidzat izaicinājumu un iesniedzat savu risinājumu, varat saņemt atsauksmes vietnē. Lai iesniegtu risinājumu, jums būs jānorāda saite uz tā GitHub repo un tiešraides priekšskatījumu. GitHub repozitorija izveide un jūsu risinājuma mitināšana GitHub lapās ir papildu, vērtīgas prasmes. Varat arī redzēt citu personu iesniegtos risinājumus.

Daži Codewell izaicinājumi ietver galvenās lapas, reģistrēšanās lapas un informācijas paneļus. Tie visi ir iesācējiem draudzīgi projekti.

devChallenges palīdz apgūt kodēšanu, praktizējot, sagatavojot jūs dienai dzīvē kā izstrādātājam. Tas piedāvā virkni izaicinājumu, kas saistīti ar reāliem projektiem, kas ir atvērti iesācējiem un pieredzējušiem izstrādātājiem.

Ir pieejami bezmaksas un maksas plāni, no kuriem varat izvēlēties. Apmaksātajā plānā ietilpst pro un prēmija. Izmantojot bezmaksas opciju, jūs varat piekļūt pamatfunkcijām un dažām problēmām. Pēdējā opcija sniedz tādas priekšrocības kā piekļuve augstākās kvalitātes izaicinājumiem, Figma dizains un izaicinājumu atstarpju ceļvedis.

Platforma sagrupē izaicinājumus ceļos, katrs mērķējot uz dažādām prasmēm, piemēram, HTML un CSS, ar atšķirīgu grūtības pakāpi. Kad būsiet pabeidzis izaicinājumus vienā ceļā, jūs saņemsiet sertifikātu, ko iekļaut savā portfolio.

devChallenges ir redaktora lapa, kurā varat skatīt izaicinājuma specifiku, tostarp fontus, krāsas, skata loga attēlus, režģa displeju un līdzekļu lejupielādes. Lejupielādētajā failā ir tikai jums nepieciešamie attēli.

Ir arī uzvarētāju saraksts, lai jūs varētu konkurēt, kamēr trenējaties. Platforma veicina kopienas iesaistīšanos, mudinot jūs dalīties savos risinājumos. Tā piedāvā palīdzību, un jūs varat mācīties no citiem lietotājiem, izmantojot risinājumu sadaļu.

Tāpat kā Codewell, jums būs jānorāda saite uz demonstrāciju un repozitoriju, lai iesniegtu savus risinājumus. Interfeiss ir draudzīgs, tāpēc jums nebūs problēmu tajā pārvietoties.

Pateicoties daudzajām priekšrocībām, Frontend Mentor izceļas kā vispopulārākā izvēle starp šajā sarakstā iekļautajām platformām. Tas izceļas, piedāvājot bagātīgu priekšgala izaicinājumu izvēli kopā ar profesionālu tīmekļa dizainu. Platforma arī veicina dinamisku un atbalstošu tīmekļa izstrādātāju kopienu.

Tāpat kā citām platformām, Frontend Mentor ir gan bezmaksas, gan maksas iespējas. Izmantojot bezmaksas versiju, jums būs piekļuve pamatfunkcijām un lielākajai daļai izaicinājumu, savukārt maksas versija sniedz piekļuvi augstākās kvalitātes izaicinājumiem, Figma dizaina failiem un citiem.

Izaicinājumi ir iedalīti trīs galvenajās grupās, tostarp veids, grūtības pakāpe un valodas. Sadaļā Valodas varat piekļūt izaicinājumiem, kuru izpildei nepieciešams tikai HTML un CSS.

Katrs izaicinājums nodrošina piekļuvi sākuma failam, kurā ir daudz resursu, tostarp HTML avota kods, Readme fails, stila rokasgrāmata, darbvirsmas un mobilā izkārtojuma attēli un daudz kas cits. Iesniedzot risinājumu, jums būs iespēja iekļaut jautājumus kopienai. Jo īpaši varat skatīt citu cilvēku risinājumus tikai pēc tam, kad esat iesniedzis savus risinājumus.

Frontend Mentor izmanto punktu sistēmu, lai mudinātu jūs izpildīt izaicinājumus. Varat pievienot visus savus pabeigtos projektus a portfolio, lai pozicionētu sevi darba iespējām.

Frontend Mentor patiesi atšķir tās resursu lapa, kurā ir vairāk nekā 15 tīmekļa izstrādes materiālu filiāles. Katrā no tiem ir izveidots saraksts ar resursiem, no kuriem varat izvēlēties, lai jūs varētu uzzināt visu, kas jums kādreiz būs nepieciešams, lai praktizētu.

Visbeidzot, Frontend Mentor divreiz mēnesī atmet izaicinājumus, kas nozīmē, ka vienmēr būs pie kā strādāt.

Frontend Practice atšķiras no citām platformām vairākos veidos. Pirmkārt, tajā nav izaicinājumu; tā vietā piedāvā projektus. Šie projekti ir reālas vietnes, kas pieder reāliem uzņēmumiem, kurus jūs veidosit no jauna. Arī jums nav nepieciešams konts, lai mēģinātu šos projektus.

Sākumā avota kods nav nodrošināts. Tā vietā projekta aprakstā ir ārējās saites uz fotoattēlu līdzekļiem un ikonām, saite uz tiešraidi vietne, atsauces attēls, krāsu paletes un atlasīts resursu saraksts, kas jums būs nepieciešams, lai pabeigtu projektu. Turklāt jūs saņemat sarakstu ar jēdzieniem, kurus apgūsit, pabeidzot projektu, un grūtību norādes, kuras varat izmantot.

Platforma piedāvā trīs līmeņu grūtības pakāpi, taču kā iesācējs jūsu galvenā uzmanība tiks pievērsta pirmajam līmenim. Šeit varat praktizēt HTML, CSS, atsaucību, animāciju un daudz ko citu. Turklāt jums ir atļauja iekļaut projektus savā portfolio, ja ievērojat vienu vietnē norādīto noteikumu.

Frontend Practice ir lieliska izvēle, ja vēlaties uzlabot savas prasmes, atjaunojot esošās vietnes, sākot no nulles un beidzot ar HTML prasmju praktizēšanu.

Visas šīs platformas kopā sniegs jums pietiekami daudz satura, ko izmantot izveidot savu izstrādātāju portfeli. Treniņos varēsit veikt uzlabojumus un izprast jaunas koncepcijas, vairojot pārliecību un palīdzot tikt galā ar apmācību elli.

Praktizējot pilnveidojiet savas HTML un CSS prasmes

Apmācības elle būs izaicinājums, taču jūs varat to pārvarēt ar praksi. Iespējas ir patiesi bezgalīgas, un viss sākas ar šī pirmā soļa speršanu. Pieņemot izstrādātus izaicinājumus un reālus projektus, jūs izmantosit savas HTML un CSS zināšanas un papildināsit tās.

Neatkarīgi no izvēlētā ceļa jūs sākat izaugsmes un attīstības ceļojumu, uzlabojot savu prasmes un paaugstinot pārliecību, izmantojiet praktisku pieeju, veidojiet, mācieties un uzplaukt