layout_landing-page

parcel daemon

npm i -D parcel

parcel watch

File | Settings -> Tools | File Watchers -> … npx parcel src/index.html

parcel vs npm run buid

Для разработки и быстрой проверки изменений всегда используй npx parcel src/index.html. Для финальной сборки — npm run build. Почему, как думаешь, hot reload удобнее для верстки?

stylelint

IDE settings: run stylelint –fix on save (save up 15% of dev time) npx stylelint ./src/styles/style.css –fix (save for issue of empty lines before media, etc as well)

Landing Page

❗❗ You will complete this task in the Landing topic. Now just choose a design and do the parts from the videos. Note: in the first task of this topic you will find 4 examples of landing pages. Choose only one of them and create your page.

Choose a design for your landing page:

• MET landing
• MYBIKE landing
• B&O
• Nothing

Follow the instructions in this and next lessons to implement the page block by block:

• Here is the design from the video (❗❗ DO NOT implement this design ❗❗ choose one of the options above ❗❗ ☝️)
• Start writing styles in the main.scss file. It is be explained in the Sass lesson.
• DON’T try to do it Pixel Perfect - implement it the most simple way so it looks similar.
• When done check yourself using the CHECKLIST when finished.
• Deploy and create a Pull Request with a DEMO LINK.

Tips & Hints

• Check background-image: url() to be relative to the main.scss. So should start with ../images.
• If some points from the checklist are not relevant to your design, just skip it.

This site is open source. Improve this page.