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 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