Sé thasc d'fhorbróir Front-End

1. Форма кредитной карты

Cruth cárta creidmheasa fionnuar le micrea-idirghníomhaíochtaí réidh agus taitneamhach. Áirítear leis sin formáidiú uimhreacha, fíorú agus braite cineál cárta uathoibríoch. Tá sé tógtha ar Vue.js agus tá sé lánfhreagrach freisin. (Is féidir leat a fheiceáil anseo.)

foirm chárta creidmheasa

Cad a fhoghlaimeoidh tú:

• Próiseáil agus bailíochtaigh foirmeacha
• Láimhseáil imeachtaí (mar shampla, nuair a athraíonn réimsí)
• A thuiscint conas gnéithe a thaispeáint agus a chur ar an leathanach, go háirithe an t-eolas cárta creidmheasa atá le feiceáil ar bharr na foirme

Aistríodh an t-alt le tacaíocht ó EDISON Software, a заботится о здоровье программистов и их завтракеAgus разрабатывает программное обеспечение на заказ.

2. Гистограмма

Is cairt nó graf é histeagram a léiríonn sonraí catagóireacha le barraí dronuilleogacha a bhfuil airde nó faid i gcomhréir leis na luachanna a léiríonn siad.

Is féidir iad a chur i bhfeidhm go hingearach nó go cothrománach. Uaireanta tugtar línechairt ar bharrachairt ingearach.

Cad a fhoghlaimeoidh tú:

• Taispeáin sonraí ar bhealach struchtúrtha sothuigthe
• Ina theannta sin: Foghlaim conas an eilimint a úsáid canvas agus conas eilimintí a tharraingt leis

Anseo is féidir leat sonraí daonra an domhain a fháil. Déantar iad a shórtáil de réir bliana.

3. Анимация сердечка Twitter

Ar ais i 2016, thug Twitter isteach an beochan iontach seo dá tweets. Ó 2019, tá cuma an chuid fós air, mar sin cén fáth nach gcruthóidh tú ceann duit féin?

Cad a fhoghlaimeoidh tú:

• Oibriú le tréith CSS keyframes
• Déan eilimintí HTML a ionramháil agus a bheochan
• Comhcheangail JavaScript, HTML agus CSS

4. Репозитории GitHub с функцией поиска

Níl aon rud mhaisiúil anseo - níl i stórtha GitHub ach liosta glóire.
Is é an sprioc ná na stórtha a thaispeáint agus ligean don úsáideoir iad a scagadh. Úsáid API oifigiúil GitHub chun stórtha a fháil do gach úsáideoir.

Leathanach próifíle GitHub - github.com/indreklasn

Cad a fhoghlaimeoidh tú:

• Faigh sonraí ó API
• Taispeáin sonraí ó API
• Scag agus taispeáin sonraí ábhartha do gach cuardach
• Roghnach: Má tá dúshlán romhat, bain úsáid as API v4, tógtha ag baint úsáide as GraphQL. Más mian leat GraphQL a fhoghlaim, téigh go dtí ceann de na hailt a bhí agam roimhe seo.

5. Чаты в стиле Reddit

Is bealach cumarsáide coitianta iad comhráite mar gheall ar a simplíocht agus éasca le húsáid. Ach cad a chothaíonn seomraí comhrá nua-aimseartha i ndáiríre? Gréasáin Soicéid!

Cad a fhoghlaimeoidh tú:

• Úsáid WebSockets, cumarsáid fíor-ama agus nuashonruithe sonraí
• Oibrigh le leibhéil rochtana úsáideoirí (mar shampla, tá an ról ag úinéir cainéal comhrá admin, agus daoine eile sa seomra - user)
• Próiseáil agus bailíochtaigh foirmeacha - cuimhnigh, is é an fhuinneog comhrá chun teachtaireacht a sheoladh input
• Cruthaigh agus glac le comhráite éagsúla
• Oibrigh le teachtaireachtaí pearsanta. Is féidir le húsáideoirí comhrá a dhéanamh le húsáideoirí eile go príobháideach. Go bunúsach, beidh tú ag bunú nasc WebSocket idir dhá úsáideoir.

6. Навигация в стиле Stripe

Is é an rud a dhéanann an loingseoireacht uathúil seo ná go n-athraítear an coimeádán aníos chun an t-ábhar a oiriúnú. Tá galántacht leis an aistriú seo i gcomparáid leis an iompar traidisiúnta a bhaineann le hoscailt agus dúnadh popover nua.

Cad a fhoghlaimeoidh tú:

• Comhcheangail beochan CSS le haistrithe
• Laghdaigh an t-ábhar agus cuir an rang gníomhach i bhfeidhm ar eilimint shnámhaithe

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим treoir céim ar chéim.

Foinse: will.com