Îmbunătățiți-vă abilitățile în JavaScript, HTML și CSS prin construirea unui tablou de bord pentru rețelele sociale cu o temă întunecată/luminoasă. Jess, care conduce popularul canal de YouTube Coder Coder, vă va ghida printr-o provocare pentru începători Frontend Mentor.
✏️ Curs creat de @TheCoderCoder
Resurse:
🔗 Design receptiv pentru începători! https://coder-coder.com/responsive/
🔗 Cod sursă pe GitHub: https://github.com/thecodercoder/fem-dklt-toggle
🔗 Provocare pe Mentor Frontend: https://www.frontendmentor.io/challenges/social-media-dashboard-with-theme-switcher-6oY8ozp_H
🔗 Andy Bell: creează un mod de întuneric sau de lumină controlat de utilizator — https://piccalil.li/tutorial/create-a-user-controlled-dark-or-light-mode/
⭐️ Cuprins ⭐️
Partea 1
⌨️ (0:00:00) Introducere
⌨️ (0:01:26) Cerințe funcționale ale proiectării
⌨️ (0:11:31) Controale de formulare accesibile
⌨️ (0:15:37) Actualizați proprietățile personalizate CSS cu JS
⌨️ (0:23:39) Text numai pentru cititor de ecran
Partea 2
⌨️ (0:29:10) Se creează un depozit GitHub
⌨️ (0:34:33) Configurați fișierele SCSS și JS
⌨️ (1:09:55) Configurați fluxul de lucru Gulp
Partea 3
⌨️ (1:31:24) Studierea designului
⌨️ (1:37:10) Construirea barei de sus
⌨️ (1:51:42) Utilizarea unui marcaj accesibil
⌨️ (2:04:55) Coafează bara de sus
⌨️ (2:23:26) Comută și face accesibil stilul
Partea 4
⌨️ (3:24:56) Ce este BEM? Planificarea numelor de clasă
⌨️ (3:36:46) Adăugarea de marcaj și selectoare SCSS pentru carduri
⌨️ (3:47:30) Stiluri pentru card
⌨️ (4:16:41) Aspect pentru grila de carduri cu flexbox, apoi grila CSS
⌨️ (4:33:26) Stilizarea barelor de sus de pe cărți
⌨️ (4:49:36) Markup și stiluri pentru cărți de jos
Partea 5
⌨️ (5:33:54) Schimbarea comutatorului pe baza comentariilor
⌨️ (5:54:42) Folosiți preferințele de sistem pentru a încărca tema deschisă sau întunecată
⌨️ (6:18:24) Creați logica de comutare pentru a schimba manual tema luminoasă/întunecată
⌨️ (6:43:34) Salvați setările de comutare în stocarea locală
🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 davthecoder
👾 jedi-or-sith
👾 Nangong Qianying
👾 Agustín Kussrow
👾 Îl atrag pe Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
—
Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org
Citiți sute de articole despre programare: https://freecodecamp.org/news
Cursuri interesante:
- Cum să faci o pagină de destinație folosind HTML, SCSS și JavaScript – Curs complet
- Curs de bootcamp pentru dezvoltare web front-end (JavaScript, HTML, CSS)
- Stay motivated when coding: don’t compare yourself with others #shorts
- Coding motivation: slow and steady wins the race 🐢🏁
- weird issue when putting an image in an anchor link
- Learn to code with these 4 free resources! #shorts
- Coding motivation tip: keep your goal in mind
- Tutorial Sass pentru începători – CSS cu superputeri
- Dezvoltare Android pentru începători – Curs complet
- CSS Анимация display block • Директива starting-style и свойство transition-behavior