0
Прегледи
Оформление и уеб разработка на уеб сайтове. Разширено ниво Web Develop - курс 1990 rub. от Stepik, обучение 131 урока, Дата: 1 декември 2023 г.
разни / / December 04, 2023
Здравейте!
Казвам се Дима. И ви каня да се потопите в самите дълбини на създаването и оформлението на уебсайт!
Този курс е за тези, които вече знаят основите, но искат да преминат от добро ниво на създаване на уебсайт към отлично.
Курсът е за тези, които познават основите на HTML и CSS, но знаят, че все още има много техники, техники за разработка и технологии, които се използват от истински про-разработчици.
Ако това ви звучи познато, то този курс е за вас)
Вдъхнете живот на уебсайтовете си с модерни анимации чрез CSS
Ще започнем с въвеждането на динамика в нашите сайтове, тоест ще направим анимация. Ще научим как да анимираме бутони, текстове и заглавия с помощта на чист CSS, ще научим как да създаваме анимации на карти, да създаваме динамично меню за навигация и всичко това без нито един ред JS код, само чист CSS.
Този курс съдържа най-добри практики в адаптивния дизайн.
Ще научите нови начини и трикове за адаптивен дизайн на вашите сайтове, ще използвате нови техники за дефиниране и писане на медийни заявки и ще научите как да адаптирайте всички елементи на страницата, като промените само едно свойство на CSS, така че вашият сайт да изглежда по-добре от всякога на всяко мобилно устройство устройство
Научете всички тънкости и предимства на съвременните препроцесори
Ще научите как да ускорите няколко пъти създаването на уебсайта си, като използвате пълните възможности на препроцесора SASS, като миксини, променливи и функции.
Основни основи за използване на NPM
Освен това пакетите NPM с плъгините, необходими на всеки професионален разработчик, ще ни дадат възможност да създаваме и оптимизираме уебсайтове по-бързо и по-ефективно от всякога.
Git системата за контрол на версиите ще ви помогне в развитието ви
Освен това ще научите необходимите основи за работа със системата за контрол на версиите git, така че винаги да имате способността да се върнете към правилната версия на вашия сайт, без значение колко лошо сте объркали последния път актуализирайте сайта)
Вие създавате 2 модерни уебсайта за вашето портфолио
Този курс е изграден върху практика и е разделен на малки видео уроци, в които стъпка по стъпка ще създадем 2 големи съвременни проекта, базирани върху системата float - за да можете да поддържате стари проекти и разбира се върху системата GRID CSS, която ви позволява да създавате оформления с невероятна сложност.
И разбира се, няма да се срамувате да покажете тези проекти на вашите потенциални клиенти или бъдещи работодатели.
Винаги съм във връзка!
И бъдете сигурни, че няма да останете сами, защото след всеки малък урок ще имате възможност да сравните вашия код с моя или просто да зададете въпрос; отговорите обикновено не отнемат много време, за да пристигнат.
Гарантирано връщане на парите!
И ако все още имате съмнения, този курс предоставя възможност да върнете парите, изразходвани за него, ако не ви хареса в рамките на 30 дни.
Присъединете се към мен и заедно ще научим как да създаваме професионални, модерни уеб сайтове.
Ще се видим в клас!
Дмитрий Фокеев
9
курсовеСъздавам оригинални онлайн курсове от 2016 г. Професионално преподавам работа с графични редактори на Adobe, преподавам дизайн и уеб разработка.
Здравейте! Казвам се Дима! Не искам да се хваля, но трябва) Преподавал съм повече от 5000 студенти по целия свят в собствените си онлайн курсове. Над 2000 реални отзива със среден рейтинг 4,83 от 5,00! Преподавам уеб дизайн, уеб разработка и необходимия софтуер (Photoshop Illustrator, Figma). Моят преподавателски опит се състои от 5 години уроци на свободна практика, както и преподаване чрез онлайн училища и курсове в глобални платформи за дистанционно обучение. Студентите от моите курсове отбелязват най-добрите ми качества в начина, по който представям материала без натъпкване, по забавен и интересен начин.
Подготовка / Повторение / Първи анимации
1. Здравейте!) Изтеглете материали за курса
2. Инсталирайте и конфигурирайте необходимия софтуер
3. Нов път на изрязване на свойството. Започваме да създаваме първия раздел на сайта
4. Ако приложението scout не работи за вас
5. Упражнявайте се: Създайте своя форма с помощта на Clip-path
6. Подравняване на елементи вертикално с помощта на абсолютно позициониране
7. Запознайте се с @KeyFrames. Нека създадем първата анимация.
8. Backface-видимост и създаване на бутони чрез псевдо-класове
9. Анимиране на бутон с помощта на псевдоелементи
10. Режим на запълване на анимация. Стартиране на анимация от определена точка.
11. 3 принципа на уеб разработката
12. Използвайте REM вместо PX
Git и GitHub
1. За какво е този блок?
2. Основни команди в терминала
3. Как да редактирате файлове чрез терминал
4. Инсталирайте системата git на нашия компютър
5. Как да стартирате git в конкретен проект
6. Създаване на първия ангажимент
7. Изпращане на проект в GitHub
8. Ако имате грешка при изпращане на вашия проект в GitHub
9. Грешка при влизане при опит за изпращане на проект към GitHub
10. Практика: Създайте свое собствено хранилище
11. Как да изтриете хранилище на GitHub
12. Как да изтеглите хранилища от GitHub
13. Емулираме работата на 2 разработчици в едно хранилище
14. Как да се показва информация за ангажименти в терминала. Git дневник
15. Какво представляват клоновете
16. Как да създавате и навигирате клонове.
17. Запълваме празнината от началото на мини курса с нотациите -u и -M
18. Незапазена грешка при записване по време на плащане
19. Как да преместите създадените промени в нов клон
20. Как да насочите множество ангажименти към нов клон
21. Какво представлява състоянието на отделената глава? Отделена ГЛАВА
22. Как да възстановите конкретен файл от предишен къмит
23. Разширен git log и git show
24. Как да обедините клонове с помощта на Git merge. Метод за бързо превъртане напред
25. Как да изтриете клонове
26. Как да премахнете файловете на директорията от непроследено състояние
27. Git reset --hard. Как да направите твърдо връщане назад на ангажимент
28. Втори начин за намиране на блокиран комит с помощта на ORIG_HEAD
29. Git reset --soft
30. Git commit --amend промяна на коментара на предишен комит
31. Git reset --mixed
32. Разлика между git reset и git restore
33. Въведение в git diff. Отпечатване на разликата от няколко ангажимента към конзолата
34. Практически пример за използване на git diff
35. Как да покажа диаграмата на разклонението в терминала. Git log --graph
36. Обединяваме клонове с помощта на git merge. Метод "Истински синтез"
37. Как да се върна след сливане
38. Как да копирате конкретен комит с помощта на git cherry-pick
39. Сливане на клонове с git rebase
40. Кое е по-добро git rebase или git merge
41. Как да използвате файла .gitignore
42. Последна дума
Разширено оформление - CSS/SASS
1. За какво е този блок?
2. Как работят SASS променливите
3. Как работят миксините
4. Как да добавите аргументи към mixins
5. Какво представляват SASS шаблоните
6. Как работят SASS функциите
7. Организиране на SASS файлове за голям проект
8. 3 начина за позициониране на елементите
9. Как работи float?
10. Създаване на собствена мрежова система
11. Прилагане на градиент към текст. Клип за фон
12. Как да създадете символи с помощта на HTML
13. Анимиране и завършване на втория раздел
14. Как да създадете свои собствени шрифтове за икони
15. Използваме свойството перспектива, за да отразим перспективата на елементите
16. Как работи режимът на смесване в CSS
17. Завършване на секцията с карти
18. Как да заоблите текст с помощта на свойството shape-outside
19. Как работят CSS филтрите
20. Как да добавите видео към страница
21. Запознаване с тага на формуляра и неговото съдържание
22. Анимиране на формата
23. Създаване на ваш собствен радио бутон с помощта на CSS
24. Създаване на футър на уебсайт
25. Създаване на навигационно меню с помощта на чист CSS част-1
26. Настройване на скоростни преходи на анимация с помощта на cubic-bezier
27. Анимиране на хамбургер
Адаптивен дизайн
1. За какво е този блок?
2. Как да създадете адаптивни уебсайтове
3. Създаване на миксин с медийни правила
4. Адаптиране на проекта част 1
5. Адаптиране на проекта част 2
6. Адаптиране на проекта част 3
7. Какво представляват отзивчивите изображения
8. Как да адаптирате изображения в HTML
9. Нека адаптираме HTML изображения в нашия проект
10. Адаптиране на CSS изображения
11. Няколко последни редакции на сайта
Мениджър на пакети на възли
1. За какво е този блок?
2. Какво е node.js и npm
3. Подготовка на първия npm пакет за използване
4. Стартиране на първия npm пакет
5. Използване на gulp в нашия проект
6. Как да отворите уебсайт на мобилен телефон
Въведение в CSS GRID
1. За какво е този блок?
2. Подготовка
3. Как да създадете шаблон за мрежа. Шаблон за мрежа
4. Как работят единиците fr
5. Как да преместите елемент в друга клетка
6. Поставяне на няколко елемента в една клетка
7. Практика: Създайте оформление на уебсайт
8. Пример за учител. Създайте оформление
9. Как да преименувате всеки ред в мрежа
10. Как да създадете мрежов шаблон с помощта на схема за именуване
11. Какво представляват явните и неявните мрежи?
12. Как да подравните елементи в клетките
13. Как да подравните решетка вътре в контейнер
14. Минимално-максимално съдържание
15. Автоматично попълване и автоматично побиране. Размери на клетки въз основа на съдържанието
16. Заключение. Мрежова градина
GRID CSS проект
1. За какво е този блок?
2. Подготовка
3. Създайте шаблон за мрежа, част 1
4. Създайте шаблон за мрежа, част 2
5. Как работят SVG спрайтовете
6. Завършваме втория раздел на сайта
7. Създаване на раздел "Банер", част 1
8. Създаване на раздел "Банер", част 2
9. Създаване на раздел с карти
10. Създаване на галерия
11. Създаване на долен колонтитул
12. Приготвяне на "Хамбургер"
13. Създаване на заглавна част 1
14. Създаване на заглавна част 2
15. Ние адаптираме сайта
Ще се видим отново!
1. Довиждане!
Вземете своя сертификат
1. Тест за получаване на сертификат за завършен курс
АБОНИРАЙ СЕ
YOU MIGHT ALSO LIKE