1. research
- plan
- modules
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. 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

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

2. 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
2.1 HTML Conventions

3. 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/

4. Basic
4.1 CSS Conventions
- logo
- color sheme
- text h, p, ul, ol, a+hover, strong, i, u, del, aligments
4.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/
4.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
4.4. Social icon set
4.5. Public forms
- contacts
- comments
- user
- careers
4.6. 404

5. 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
5.1. CSS
<link href="style.css" rel="stylesheet" media="all" />
<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

6. Videos

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

8. 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/

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

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

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