10 projetos de HTML e CSS para adicionar no seu portfólio

Vídeo no Youtube

1.Landing Pages

https://dribbble.com/shots/14953088-spark-marketing-page <br> https://dribbble.com/shots/15798662-Product-page-hero-section <br> https://dribbble.com/shots/16256966-digital-education-website-design <br> https://dribbble.com/shots/16151477-shopify-website-landing-page-design <br> https://dribbble.com/shots/16249097-SaaS-Design-in-Webfllow <br> https://dribbble.com/shots/15096546-Landing-Page-UX-UI-Design <br> https://dribbble.com/shots/16186293-website-landing-page <br> https://dribbble.com/shots/16356525-Bangtut-Hero-Section <br>

2.Páginas de Login e Cadastro

https://dribbble.com/shots/15252242-Sign-Up-Page <br> https://dribbble.com/shots/15820957-Login-Screen-from-Webpixels-Templates <br> https://dribbble.com/shots/14019613-Sign-up-form <br> https://dribbble.com/shots/14621147-Romeo-Illustrations <br> https://dribbble.com/shots/14960376-Sign-Up <br> https://dribbble.com/shots/15846049-Simple-Sign-Up-Page <br> https://dribbble.com/shots/14147292-Sign-Up-Form <br> https://dribbble.com/shots/13993146-Ghost-Sign-In <br> https://dribbble.com/shots/16383982-User-account-page-illustrations <br>

3.Formulário

https://dribbble.com/shots/14414277-Subscrify-modals <br> https://dribbble.com/shots/9145103-Request-a-demo-page <br> https://dribbble.com/shots/16365420-Sign-up-with-illustration <br> https://dribbble.com/shots/11785205-Employees-Information-Sytem-Part-3 <br> https://dribbble.com/shots/7862230-Checkout-UI-Concept <br> https://dribbble.com/shots/16485699-Edit-Task-Light-Dark <br> https://dribbble.com/shots/11141590-Registration-form <br> https://dribbble.com/shots/12882202-Freelance-Form-Register-DropDown <br> https://dribbble.com/shots/3553449-Travel-Form <br>

4.Catálogo de produtos

https://dribbble.com/shots/15711636-Catalog <br> https://dribbble.com/shots/16039018-E-commerce-Furniture-Landing-Page <br> https://dribbble.com/shots/13893056-Online-Fashion-Store <br> https://dribbble.com/shots/6626669-e-commerce-personalize <br> https://dribbble.com/shots/11243718-LH-1064-05-Swimsuits-Catalog <br> https://dribbble.com/shots/9004128-Catalog-for-ATF-Cosmetics-store <br> https://dribbble.com/shots/5604689-Lindt-Product-Catalog <br> https://dribbble.com/shots/5879104-Ulmart-Top-10-Russian-Online-Retailer <br> https://dribbble.com/shots/5535038-Flower-Shop <br> https://dribbble.com/shots/10066562-Website-for-sweets-shop <br> https://dribbble.com/shots/15483957-Catalog-Free-Download <br> https://dribbble.com/shots/16233335-Product-card <br>

5.Página de notícias ou blog

https://dribbble.com/shots/15379976-News-Website <br> https://dribbble.com/shots/14435664--Exploration-Article-Page <br> https://dribbble.com/shots/16385499-News-Site <br> https://dribbble.com/shots/14134149-Penlon-News-Page <br> https://dribbble.com/shots/6863071-News <br> https://dribbble.com/shots/11030123-Retro-News-Components <br> https://dribbble.com/shots/11958568-Farimarket-article-page <br> https://dribbble.com/shots/15601683-Personal-Blog-Layout <br> https://dribbble.com/shots/15395473-Personal-Blog <br> https://dribbble.com/shots/14481273-Portfolio-Courses-website-Blog <br> https://dribbble.com/shots/14377374--Exploration-Sport-News-Hero-Section <br> https://dribbble.com/shots/15229042-AGENCY <br> https://dribbble.com/shots/16279660-Website-design-for-Izabela-Kielczyk <br>

6.Desenhar algum elemento específico

https://dribbble.com/shots/16289478-3D-Glass-Card-Illustration <br> https://dribbble.com/shots/13978524-Button <br> https://dribbble.com/shots/7268454-Rubber-Slider <br> https://dribbble.com/shots/14712568-CSS-Glowin-Drop-version <br> https://dribbble.com/shots/15491646-phone-icon-set <br> https://dribbble.com/shots/14052578-Star-Toggle <br> https://dribbble.com/shots/14185527-Figma-UI-kit-React-components-Counter <br> https://dribbble.com/shots/3541363-Clock <br> https://dribbble.com/shots/3978148-CSS-Advocat <br> https://dribbble.com/shots/7425055-Book-Loader <br> https://dribbble.com/shots/8424211-Smoke-Slider <br> https://dribbble.com/shots/9070657-Heart-Switch <br> https://dribbble.com/shots/9828547-Feedback-Reactions <br> https://dribbble.com/shots/11139240-Thumbs-up-button <br> https://dribbble.com/shots/12287144-Rating <br> https://dribbble.com/shots/4364095-Rainbow-is-here <br> https://dribbble.com/shots/13985244-Colorful-Buttons <br> https://dribbble.com/shots/14725005-3D-Switch <br>

7.Dashboard

https://dribbble.com/shots/16364085-Wallet-Dashboard-Design <br> https://dribbble.com/shots/15378686-Task-Management-Dashboard-Design <br> https://dribbble.com/shots/15543862-Finance-Dashboard-Dark-theme <br> https://dribbble.com/shots/15501287-Finance-Dashboard-Design <br> https://dribbble.com/shots/16362432-E-learning-platform-dashboard <br> https://dribbble.com/shots/16152318-Tukunen-Sales-Analytics-Dashboard <br> https://dribbble.com/shots/15023587-File-Manager-Dashboard-design <br> https://dribbble.com/shots/15271947-Finance-Dashboard-UX-UI-Design <br> https://dribbble.com/shots/15145910-Store-Admin-Panel <br> https://dribbble.com/shots/16508365-Finance-Dashboard-Design <br> https://dribbble.com/shots/16097888-Dark-Theme-for-Project-Management-Dashboard-Animation <br> https://dribbble.com/shots/15223174-Project-Management-Dashboard-UI-Exploration <br> https://dribbble.com/shots/16018192-Digital-Wallet-Dashboard-UI-Dark-Theme <br> https://dribbble.com/shots/15804820-Finance-Dashboard-Dark-theme <br> https://dribbble.com/shots/15877041-Prostore-Sales-Dashboard <br> https://dribbble.com/shots/14973430-Fitness-Tracker-Dashboard <br>

8.Email marketing

https://dribbble.com/shots/13801246-Email-Design-Mailchimp <br> https://dribbble.com/shots/8810403-Referral-Program <br> https://dribbble.com/shots/6153546-anyExcuse-Newsletter-Template <br> https://dribbble.com/shots/14554850-Order-Confirmation-Email-Dark-UI <br> https://dribbble.com/shots/14238815-Email-Receipt-Design <br> https://dribbble.com/shots/15184358-Sendlane-Visual-Identity <br> https://dribbble.com/shots/7104528-Mens-Watch-Brand-Email-Design <br>

9.To do list/calendário/organização pessoal/notion

https://dribbble.com/shots/5726145-Todo-Web-App <br> https://dribbble.com/shots/7882888-Daily-UI-042-To-Do-List <br> https://dribbble.com/shots/3383167-To-Do-List <br> https://dribbble.com/shots/14238178-To-Do-List <br> https://dribbble.com/shots/15850805-Calendar-App-Concept <br> https://dribbble.com/shots/5019211-Simple-To-Do-List-App-UI-Concent <br> https://dribbble.com/shots/10544666-Hyperskill-To-Do-List-course <br> https://dribbble.com/shots/2366419-Projects-http-getlaps-com <br> https://dribbble.com/shots/4517985-Todo-web-app-tidily-io <br> https://dribbble.com/shots/3884941-Todooo-Tasks <br> https://dribbble.com/shots/14928544-Goal-based-project-management <br>

10. Seu portfólio

https://dribbble.com/shots/15790280-personal-portfolio-Website-UI <br> https://dribbble.com/shots/16077352-Personal-Portfolio-Site-Bruno-Erdison <br> https://dribbble.com/shots/15534060-Freelancer-Personal-Portfolio-Website-UI-Design <br> https://dribbble.com/shots/14832163-JOHN-Developer-Portfolio-Website <br> https://dribbble.com/shots/15566022-Personal-portfolio-landing-page <br> https://dribbble.com/shots/15176184-Portfolio-Landing-Page <br> https://dribbble.com/shots/15473091-MoonexLab-Digital-Agency-Index <br> https://dribbble.com/shots/14135859-JanLosert-com-V4-Live <br>

Dicas para te ajudar durante o desenvolvimento

1. Utilize sites para se inspirar Alguns deles são: Codepen, Up labs, Behance, Dribbble, Niice e Pinterest

2. Utilize sites para pegar imagens e ícones Alguns deles são: Pixabay e Flaticon

3. Utilize sites para escolher as cores do seu site e paletas Alguns deles são: Color hunt, Adobe color, Coolors e Web gradients

4. Utilize sites para se inspirar em fontes e importá-las Alguns deles são: Adobe fonts e Google fonts