1. research & Задание TODO: google docs -> plan, modules, offer all in one, bookmarks (designers, wireframes) by category (hotels, restorants, travel, corporate)
za restoranti:
https://guide.michelin.com/en
https://www.tripadvisor.com/
za hoteli
https://www.kiwicollection.com/
https://www.booking.com/
za travel
TODO
za corporate
https://www.sortfolio.com/
https://www.trustpilot.com/
https://clutch.co
- modules
- offer
- contract
- research for desing
- logo
- content
2. wireframing
- header
- footer
- grid all pages
3. grid all pages
4. basic
- logo
- favicons
- social icons
- content
- public forms (login, contacts, comments, careers)
- 404
- color sheme
5. html sections, all pages
- semantic
- structured data
- img
- svg
6. html all pages in one
- css
- js
7. test
- mobile apple / android
- desktop windows / apple
- favicons
- structured data
8. proto
- main
- pages
- popups
- forms
- success / failed
- login
- 404
9. test
- mobile apple / android
- desktop windows / apple
- test structured data

https://developers.google.com/search
https://www.w3schools.com/
https://web.dev/
https://developer.mozilla.org/
https://css-tricks.com/
https://stackoverflow.com/

1. Задание
- ако няма задание не правим нищо. Трябва да има линкове предоставени от клиента за неговите предпочитания и конкуренти
- описание на отделните модули, секции и функции. Всичко специфично за проекта трябва да бъде описано предварително още на етап оферта. Не трябва да има разминаване между офертата и крайния проект повече от 10% +. Може да се махат модули и функции, но ако се добавят срока и цената трябва да бъдат променени.

2. research
- следваме дизайнери, които са добри. Пример: https://www.behance.net/WebCastle
- не прави нищо ако не знаеш как ще изглежда и работи !!! Behance е добър източник, защото там проектите почти винаги не са имплементирани или са доста различни от предложената схема. Пример: https://www.behance.net/gallery/78860137/Leading-Hotels-of-the-World-Site-Redesign
- линк към дизайн схема, тема или сайт, който да служи за основа на дизайна. Behance горе. От него се вземат шрифтове и пропорции, разположение на блокове, примерна подредба на хедър и футър. !!! За хедър и футър първо преглеждаме наша билиотека. Ако нямаме подходящ пример е необходимо да се разработи първо в билбиотеката и после да се имплементира при клиента.
- за отделните секции трябва да има линкове към реални сайтове или теми, които да показвват как ще работи и изглежда съответната секция. Ако има готов wireframeing още по-добре. Пример: https://www.behance.net/gallery/111287301/Solo-Saas-Landing-Page-Kit

3. Мисли като инженер
- Paint -> скица на мобилна версия от която се построяват таблетната и десктоп. !!! Mobile first
- Theme

4. Semantic html
- INFO: https://web.dev/learn/html/semantic-html/
- INFO: https://www.w3schools.com/html/html5_semantic_elements.asp
- INFO: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
4.1 HTML Conventions

5. Grid
- float left / right
- display inline-block
- tables, table-view
- flex
- display grid // https://stackoverflow.com/questions/57053971/css-grid-like-fibonacci
TODO: fibonacci margin // https://jsfiddle.net/bc_rikko/aof4L89m/

6. Basic
6.1 CSS Conventions
- logo
- color sheme
- text h, p, ul, ol, a+hover, strong, i, u, del, aligments
6.2. Light and dark themes
- INFO: dark mode in svg https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
- INFO: https://web.dev/patterns/theming/
6.3. favIcon set
- https://realfavicongenerator.net/
- INFO: https://medium.com/swlh/are-you-using-svg-favicons-yet-a-guide-for-modern-browsers-836a6aace3df
- INFO: dark mode in svg https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them/
https://realfavicongenerator.net/favicon_checker
6.4. Social icon set
6.5. Public forms
- contacts
- comments
- user
- careers
6.6. 404

7. Images
- INFO: https://web.dev/learn/images/descriptive/
- INFO: https://web.dev/learn/images/prescriptive/
- INFO: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
- alt, lazy loading, width & height
7.1. CSS
<link href="style.css" rel="stylesheet" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />
aspect ratio INFO: https://www.designcise.com/web/tutorial/how-to-maintain-image-aspect-ratio-using-html

8. Videos

9. Meta
- INFO: https://web.dev/learn/html/metadata/

10. Forms
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
- https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/

11. Structured data
INFO: https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data

12. FAQ
TODO: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

13. POPUP
TODO: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog