Verkkosivujen ulkoasu ja verkkokehitys. Edistyneen tason Web Develop - kurssi 1990 hieroa. Stepikistä, koulutus 131 oppituntia, Päivämäärä: 1.12.2023.
Miscellanea / / December 04, 2023
Hei!
Nimeni on Dima. Ja kutsun sinut sukeltamaan verkkosivustojen luomisen ja ulkoasun syvyyksiin!
Kurssi on tarkoitettu niille, jotka jo osaavat perusasiat, mutta haluavat siirtyä hyvästä verkkosivuston luomisen tasosta erinomaiseen.
Kurssi on tarkoitettu niille, jotka tuntevat HTML: n ja CSS: n perusteet, mutta tietävät, että todellisten pro-kehittäjien käytössä on edelleen monia tekniikoita, kehitystekniikoita ja teknologioita.
Jos tämä kuulostaa tutulta, tämä kurssi on sinulle)
Tuo verkkosivuillesi eloa nykyaikaisilla animaatioilla CSS: n kautta
Aloitamme tuomalla dynamiikkaa sivustoillemme, eli teemme animaatioita. Opimme animoimaan painikkeita, tekstejä ja otsikoita puhtaalla CSS: llä, luomaan korttianimaatioita, luomaan dynaamisen navigointivalikon, ja kaikki tämä ilman yhtäkään JS-koodiriviä, vain puhdasta CSS: ää.
Tämä kurssi sisältää parhaita käytäntöjä reagoivaan suunnitteluun.
Opit uusia tapoja ja temppuja suunnitella sivustosi reagoivasti, käytät uusia tekniikoita mediakyselyjen määrittämiseen ja kirjoittamiseen ja opit muokata kaikkia sivun elementtejä muuttamalla vain yhtä CSS-ominaisuutta, jotta sivustosi näyttää paremmalta kuin koskaan millään mobiililaitteella laite
Opi kaikki nykyaikaisten esiprosessorien hienoudet ja edut
Opit kuinka nopeuttaa verkkosivustosi luomista useita kertoja käyttämällä SASS-esiprosessorin kaikkia ominaisuuksia, kuten mixinejä, muuttujia ja toimintoja.
Tärkeimmät perusasiat NPM: n käyttöön
Lisäksi NPM-paketit, joissa on jokaisen ammattikehittäjän tarvitsemat lisäosat, antavat meille mahdollisuuden luoda ja optimoida verkkosivustoja nopeammin ja tehokkaammin kuin koskaan ennen.
Git-versionhallintajärjestelmä auttaa sinua kehityksessäsi
Lisäksi opit tarvittavat perusasiat git-versionhallintajärjestelmän kanssa työskentelyyn, jotta sinulla on aina kyky palata sivustosi oikeaan versioon riippumatta siitä, kuinka pahasti sotsit viime kerralla päivitä sivusto)
Olet luomassa 2 modernia verkkosivustoa portfoliollesi
Tämä kurssi on rakennettu käytännössä ja on jaettu pieniin videotunteihin, joissa luomme askel askeleelta 2 suurta modernia projektia. float-järjestelmässä - jotta voit tukea vanhoja projekteja ja tietysti GRID CSS -järjestelmässä, jonka avulla voit luoda uskomattoman monimutkaisia asetteluja.
Etkä tietenkään häpeä esitellä näitä projekteja potentiaalisille asiakkaillesi tai tuleville työnantajillesi.
Olen aina yhteydessä!
Ja voit olla varma, et jää yksin, koska jokaisen pienen oppitunnin jälkeen sinulla on mahdollisuus verrata koodiasi omaani tai yksinkertaisesti esittää kysymys; vastausten saapuminen ei yleensä kestä kauan.
Rahat takaisin takuu!
Ja jos sinulla on edelleen epäilyksiä, tämä kurssi tarjoaa mahdollisuuden palauttaa siihen käytetyt rahat, jos et pidä siitä 30 päivän kuluessa.
Liity kanssani ja opimme yhdessä luomaan ammattimaisia, nykyaikaisia verkkosivustoja.
Nähdään luokassa!
9
kurssitOlen luonut alkuperäisiä verkkokursseja vuodesta 2016 lähtien. Opetan ammattimaisesti työskentelemistä Adoben graafisten editorien kanssa, opetan suunnittelua ja web-kehitystä.
Hei! Nimeni on Dima! En halua kerskua, mutta minun on pakko) Olen opettanut yli 5 000 opiskelijaa ympäri maailmaa omistamillani verkkokursseilla. Yli 2 000 todellista arvostelua, joiden keskimääräinen arvosana on 4,83/5,00! Opetan web-suunnittelua, web-kehitystä ja tarvittavia ohjelmistoja (Photoshop Illustrator, Figma). Opetuskokemukseni koostuu 5 vuoden freelance-tutoroinnista sekä opettamisesta verkkokoulujen ja -kurssien kautta maailmanlaajuisilla etäopetusalustoilla. Kurssieni opiskelijat huomaavat parhaat puoleni siinä, miten esitän materiaalin ilman tukkoisuutta, hauskalla ja mielenkiintoisella tavalla.
Valmistelu / Toisto / Ensimmäiset animaatiot
1. Hei!) Lataa materiaalit kurssille
2. Asenna ja määritä tarvittava ohjelmisto
3. Uuden ominaisuuden clip-path. Aloitamme sivuston ensimmäisen osan luomisen
4. Jos scout-sovellus ei toimi sinulle
5. Harjoittelu: Luo muotosi Clip-pathilla
6. Elementtien kohdistaminen pystysuoraan absoluuttisella sijoittelulla
7. Tapaa @KeyFrames. Luodaan ensimmäinen animaatio.
8. Backface-näkyvyys ja painikkeiden luominen pseudo-luokkien kautta
9. Painikkeen animointi pseudoelementeillä
10. Animaatio-täyttötila. Animaation aloittaminen tietystä kohdasta.
11. 3 verkkokehityksen periaatetta
12. Käytä REM: ää PX: n sijaan
Git ja GitHub
1. Mistä tässä lohkossa on kyse?
2. Terminaalin peruskomennot
3. Kuinka muokata tiedostoja terminaalin kautta
4. Asenna git-järjestelmä tietokoneellemme
5. Kuinka ajaa gitiä tietyssä projektissa
6. Ensimmäisen sitoumuksen luominen
7. Projektin lähettäminen GitHubiin
8. Jos sinulla on virhe lähettäessäsi projektia GitHubiin
9. Kirjautumisvirhe yritettäessä työntää projektia GitHubiin
10. Harjoitus: Luo oma arkisto
11. GitHub-arkiston poistaminen
12. Kuinka ladata arkistot GitHubista
13. Emuloimme kahden kehittäjän työtä yhdessä arkistossa
14. Kuinka näyttää tietoja sitoumuksista terminaalissa. Git loki
15. Mitä ovat oksat
16. Haarojen luominen ja niissä liikkuminen.
17. Suljetaan minikurssin alusta merkinnöillä -u ja -M
18. Tallentamaton toimitusvirhe kassalla
19. Luotujen muutosten työntäminen uuteen haaraan
20. Kuinka työntää useita sitoumuksia uudelle haaralle
21. Mikä on irronneen pään tila? Irrotettu PÄÄ
22. Tietyn tiedoston palauttaminen aiemmasta toimituksesta
23. Edistynyt git-loki ja git-esitys
24. Kuinka yhdistää haarat Git Merge -sovelluksella. Pikakelausmenetelmä
25. Kuinka poistaa oksia
26. Kuinka poistaa hakemistotiedostot jäljittämättömästä tilasta
27. Git reset -- vaikea. Kuinka peruuttaa sitoumus lujasti
28. Toinen tapa löytää juuttunut toimitus käyttämällä ORIG_HEAD
29. Git reset -- soft
30. Git commit --muuta edellisen sitoumuksen kommenttia
31. Git reset --mixed
32. Ero git resetin ja git returnin välillä
33. Git-diffin esittely. Useiden sitoumusten eron tulostaminen konsoliin
34. Käytännön esimerkki git diff: n käytöstä
35. Haarakaavion näyttäminen terminaalissa. Git log --graph
36. Yhdistämme haarat git merge -ominaisuuden avulla. Menetelmä "True Fusion"
37. Kuinka palata takaisin yhdistämisen jälkeen
38. Kuinka kopioida tietty sitoumus git cherry-pickin avulla
39. Haarojen yhdistäminen git rebaseen
40. Kumpi on parempi git rebase vai git merge
41. .gitignore-tiedoston käyttäminen
42. Viimeinen sana
Edistynyt asettelu - CSS/SASS
1. Mistä tässä lohkossa on kyse?
2. Kuinka SASS-muuttujat toimivat
3. Miten mixinit toimivat
4. Kuinka lisätä argumentteja mixineihin
5. Mitä ovat SASS-mallit
6. Kuinka SASS-toiminnot toimivat
7. SASS-tiedostojen järjestäminen suurta projektia varten
8. 3 tapaa sijoittaa elementtejä
9. Miten float toimii?
10. Oman verkkojärjestelmän luominen
11. Liukuvärin käyttäminen tekstiin. Taustaleike
12. Kuinka luoda symboleja HTML: n avulla
13. Toisen osan animointi ja viimeistely
14. Kuinka luoda omia kuvakefontteja
15. Käytämme perspektiiviominaisuutta heijastamaan elementtien perspektiiviä
16. Kuinka sekoitustila toimii CSS: ssä
17. Osion viimeistely korteilla
18. Tekstin pyöristäminen shape-outside-ominaisuuden avulla
19. Miten CSS-suodattimet toimivat
20. Kuinka lisätä video sivulle
21. Lomaketunnisteeseen ja sen sisältöön tutustuminen
22. Lomakkeen animointi
23. Oman valintanapin tekeminen CSS: n avulla
24. Sivuston alatunnisteen luominen
25. Navigointivalikon luominen käyttämällä puhdasta CSS-osaa 1
26. Animaationopeuden siirtymien asettaminen kuutio-bezierillä
27. Hampurilaisen animointi
Mukautuva muotoilu
1. Mistä tässä lohkossa on kyse?
2. Kuinka luoda responsiivisia verkkosivustoja
3. Mixinin luominen mediasäännöillä
4. Hankeosan mukauttaminen 1
5. Hankeosan mukauttaminen 2
6. Hankeosan mukauttaminen 3
7. Mitä ovat responsiiviset kuvat
8. Miten muokata kuvia HTML: ssä
9. Mukautetaan HTML-kuvia projektissamme
10. CSS-kuvien mukauttaminen
11. Muutama viimeinen muokkaus sivustolle
Node-pakettien hallinta
1. Mistä tässä lohkossa on kyse?
2. Mikä on node.js ja npm
3. Ensimmäisen npm-paketin valmistelu käyttöön
4. Ensimmäisen npm-paketin julkaisu
5. Gulpin käyttö projektissamme
6. Kuinka avata verkkosivusto matkapuhelimessa
Johdatus CSS GRIDiin
1. Mistä tässä lohkossa on kyse?
2. Valmistautuminen
3. Kuinka luoda ruudukkomalli. Ruudukkomalli
4. Kuinka fr-yksiköt toimivat
5. Kuinka siirtää elementti toiseen soluun
6. Useiden kohteiden sijoittaminen yhteen soluun
7. Harjoitus: Luo verkkosivuston ulkoasu
8. Esimerkki opettajasta. Luo asettelu
9. Kuinka nimetä jokainen rivi uudelleen ruudukossa
10. Ruudukkomallin luominen nimitysjärjestelmän avulla
11. Mitä ovat eksplisiittiset ja implisiittiset ruudukot?
12. Kuinka kohdistaa elementtejä solujen sisällä
13. Kuinka kohdistaa ruudukko säiliön sisällä
14. Min-Max sisältö
15. Automaattinen täyttö ja automaattinen sovitus. Solujen koot sisällön mukaan
16. Johtopäätös. Ristikkopuutarha
GRID CSS -projekti
1. Mistä tässä lohkossa on kyse?
2. Valmistautuminen
3. Luo ruudukkomalli, osa 1
4. Luo ruudukkomalli, osa 2
5. Kuinka SVG-spritit toimivat
6. Olemme viimeistelemässä sivuston toista osaa
7. "Banneri"-osion luominen, osa 1
8. "Banneri"-osion luominen, osa 2
9. Osion luominen korteilla
10. Gallerian luominen
11. Alatunnisteen luominen
12. "Hampurilaisen" valmistus
13. Luodaan otsikkoosa 1
14. Luodaan otsikkoosa 2
15. Mukautemme sivustoa
Nähdään taas!
1. Hyvästi!
Hanki todistus
1. Testi todistuksen saamiseksi kurssin suorittamisesta