В този учебник ще научиш как да подготвиш проекта си, за да работиш с CSS Flexbox. Важно е да имаш здрава основа, преди да се потопиш по-дълбоко в техниките за Flexbox layout. Ние използваме Visual Studio Code за разработка, но можеш да избереш и прост текстов редактор и браузър. В следващите стъпки ще създадем прост проект, който ще ти помогне да разбереш и приложиш Flexbox.
Най-важни упражнения
- Използването на разработъчен сървър улеснява работата по твоите проекти.
- Можеш да работиш без рамки, за да научиш основите на JavaScript и CSS.
- Файлът Index-HTML е централната точка на твоя проект, от където ще работиш.
Стъпка по стъпка насоки
Първо отвори терминал в Visual Studio Code или в друга програма по твой избор. Увери се, че Node.js е инсталиран преди да продължиш. Това е от съществено значение, за да изпълниш NPM командите.
Сега можеш да използваш NPM пакета за структуриране на проекта. Въведи в терминала командата npx create-v, за да започнеш процеса на създаване на проекта си. Ще бъдеш попитан дали искаш да изтеглиш пакета. Потвърди това.
След това въведи името на проекта си. Препоръчвам да го наименуваш просто "flexbox", защото темата точно се касае за това. След като въведеш името, ще бъдеш попитан за UI Framework. Избери "Vanilla JavaScript" в този случай, тъй като няма да използваме специални рамки.
В следващата стъпка ще те попитат дали искаш да използваш TypeScript. Отново е добре да избереш "не", за да опростиш нещата и да се фокусираш върху основните технологии.
Сега си почти готов. Следващото, което трябва да направиш, е да се преместиш в директорията на новия си проект. Това го правиш с командата cd flexbox. Така ще влезеш в папката, която беше току-що създадена.
След това изпълни командата npm install в терминала. Така ще бъдат инсталирани всички необходими пакети за проекта ти.
След като това приключи, стартирай локалния разработъчен сървър с npm run dev. Това отваря проекта ти и го предоставя на локален сървър.
Сега можеш да разгледаш генерирания файл Index-HTML, който се намира в директорията на проекта ти. Този файл е най-важната част на проекта ти, където ще създаваш всичките си съдържания и структури.
Следващото, което трябва да направим, е да изтрием стандартния скрипт, който беше генериран за проекта. Не е необходимо да използваме скрипта main.js в началото, така че го премахни просто. Също така можеш да премахнеш и Stylesheet style.css, тъй като първоначално искаме всичко да се управлява в Index-HTML.
В Index-HTML ще създадем структурата си на Flexbox контейнер. Ни трябва родителски контейнер, който от своя страна ще съдържа няколко детски контейнера. Това е основна структура, която ни е необходима за Flexbox.
За да видиш промените си в браузъра, отвори Chrome и отиди на http://localhost:3000. Когато стартираш разработъчния сървър, ти се показва URL адресът, по който можеш да отвориш Index-HTML файла си.
Препоръчвам ти, когато отваряш линкове в браузъра, да използваш бутона Control (или Command на Mac) за да ги отвориш директно в стандартния си браузър. Така ще виждаш промените си в реално време.
Когато страницата е отворена, например можеш да промениш заглавието в Index-HTML от "Weed App" на "Flexbox" и да запазиш страницата. Животната актуализация внесе промените ти незабавно в браузъра.
Можете да добавите още текст на страницата, например "Курс по Flexbox", и да видите как текстът се актуализира динамично, без да е необходимо да презареждате страницата ръчно. Тази реално време предварителен изглед значително улеснява работата.
Примерите за Flexbox ще бъдат допълнително обработени на следващата стъпка в Index-HTML. Там ще изградим оформлението с CSS и ще създадем Flexbox контейнерите. Бъдете готови за предстоящите видеоклипове, в които ще дебнем по-дълбоко в техниките на Flexbox.
Обобщение
В този урок научихте как да създадете прост проект за работа с CSS Flexbox. Осъзнахте основите на структурата на проекта, подготвихте Index-HTML файл и използвахте локалния развойен сървър. Това са първите стъпки на пътя ви за овладяване на Flexbox.
Често задавани въпроси
Как да инсталирам Node.js?Изтеглете инсталационния пакет от официалния уебсайт на Node.js и следвайте инструкциите.
Мога ли да използвам Flexbox без фреймуърк?Да, е напълно възможно да използвате Flexbox само с HTML и CSS.
Как да стартирам развойния сървър?Изпълнете командата npm run dev в терминала, за да стартирате локалния развойен сървър.
