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