Update README file.
This commit is contained in:
@@ -12,7 +12,7 @@ Run development environment:
|
||||
npm start
|
||||
```
|
||||
|
||||
## How it works
|
||||
## How it works ⚙️
|
||||
|
||||
The project runs `gulp` and `browsersync` beyond the scenes.
|
||||
Each change in template, styling or script files will reload the page. The idea is to have a comfortable development
|
||||
@@ -62,7 +62,7 @@ All the template layout must be in a single `*.hbs` file that located in `/src`
|
||||
> Use the data that is available in `/data` folder.
|
||||
> Avoid using any kind of "freestyle" input/content. Your template file must contain only HTML tags and Handlebars parameters.
|
||||
|
||||
### Static Media Files
|
||||
### Static Media Files 🖼️
|
||||
|
||||
Use the `/src/images` folder in case you need to upload images or video files to the template.
|
||||
These files will be available by the next URL: http://localhost:3000/images/${filename}
|
||||
@@ -71,9 +71,9 @@ These files will be available by the next URL: http://localhost:3000/images/${fi
|
||||
|
||||
Use BEM naming system for class names: http://getbem.com/naming/
|
||||
|
||||
## Styling rules
|
||||
## Styling rules 🎨
|
||||
|
||||
### Mobile First
|
||||
### Mobile First 📱
|
||||
|
||||
Use Mobile First approach. Start with mobile device styling and then focus on other screen sizes by using @media (
|
||||
min-width: ...px).
|
||||
@@ -102,18 +102,26 @@ For any kind of slides animations - use [SwiperJS](https://swiperjs.com/get-star
|
||||
|
||||
The lib is included in the project and ready for use. Test with `window.Swiper` in browser console.
|
||||
|
||||
# Testing
|
||||
# Summary
|
||||
|
||||
## Development Toolbar
|
||||
## Short Video Review
|
||||
Check the [Video Guide](https://www.loom.com/share/1c707a4ea14e48b7a35a49d7b0a6f1e0)
|
||||
> PRO TIP
|
||||
> Use x2 speed in the player 😜
|
||||
|
||||
|
||||
## Testing ✅
|
||||
|
||||
### Development Toolbar ✔️
|
||||
|
||||
Use development toolbar to switch between data sources.
|
||||
|
||||
## Hover/Focus States
|
||||
### Hover/Focus States ✔️
|
||||
|
||||
Make sure all "clickable" elements have `&:hover` & `&:focus` states in CSS rules.
|
||||
This might be related to links, buttons or any other interactive elements.
|
||||
|
||||
## Responsiveness
|
||||
### Responsiveness ✔️
|
||||
|
||||
Make sure the layout is rendered correctly on all standard breakpoint size:
|
||||
|
||||
@@ -132,7 +140,7 @@ Make sure the layout is rendered correctly on all standard breakpoint size:
|
||||
If you follow the rules of REM unit - your layout must be "elastic" and most of the breakpoints should be rendered
|
||||
properly.
|
||||
|
||||
## Pixel Perfect Test
|
||||
### Pixel Perfect Test ✔️
|
||||
|
||||
Compare the final result with provided screenshots.
|
||||
|
||||
@@ -141,3 +149,7 @@ available [Browser Extensions](https://chrome.google.com/webstore/detail/perfect
|
||||
or any other tool/approach that you're familiar with.
|
||||
The idea is to have "pretty close" result to requested design.
|
||||
|
||||
## Delivery
|
||||
Once you finished with the task, before letting me know - please review the next [Google Form link](https://forms.gle/w4sJjAyRDSSBRuGLA](https://forms.gle/w4sJjAyRDSSBRuGLA)
|
||||
|
||||
If everything is OK - send a Pull Request to the git project or share a ZIP file with me directly.
|
||||
|
||||
Reference in New Issue
Block a user