10 projetos de HTML e CSS para adicionar no seu portfólio
1.Landing Pages
https://dribbble.com/shots/14953088-spark-marketing-page
https://dribbble.com/shots/15798662-Product-page-hero-section
https://dribbble.com/shots/16256966-digital-education-website-design
https://dribbble.com/shots/16151477-shopify-website-landing-page-design
https://dribbble.com/shots/16249097-SaaS-Design-in-Webfllow
https://dribbble.com/shots/15096546-Landing-Page-UX-UI-Design
https://dribbble.com/shots/16186293-website-landing-page
https://dribbble.com/shots/16356525-Bangtut-Hero-Section
2.Páginas de Login e Cadastro
https://dribbble.com/shots/15252242-Sign-Up-Page
https://dribbble.com/shots/15820957-Login-Screen-from-Webpixels-Templates
https://dribbble.com/shots/14019613-Sign-up-form
https://dribbble.com/shots/14621147-Romeo-Illustrations
https://dribbble.com/shots/14960376-Sign-Up
https://dribbble.com/shots/15846049-Simple-Sign-Up-Page
https://dribbble.com/shots/14147292-Sign-Up-Form
https://dribbble.com/shots/13993146-Ghost-Sign-In
https://dribbble.com/shots/16383982-User-account-page-illustrations
3.Formulário
https://dribbble.com/shots/14414277-Subscrify-modals
https://dribbble.com/shots/9145103-Request-a-demo-page
https://dribbble.com/shots/16365420-Sign-up-with-illustration
https://dribbble.com/shots/11785205-Employees-Information-Sytem-Part-3
https://dribbble.com/shots/7862230-Checkout-UI-Concept
https://dribbble.com/shots/16485699-Edit-Task-Light-Dark
https://dribbble.com/shots/11141590-Registration-form
https://dribbble.com/shots/12882202-Freelance-Form-Register-DropDown
https://dribbble.com/shots/3553449-Travel-Form
4.Catálogo de produtos
https://dribbble.com/shots/15711636-Catalog
https://dribbble.com/shots/16039018-E-commerce-Furniture-Landing-Page
https://dribbble.com/shots/13893056-Online-Fashion-Store
https://dribbble.com/shots/6626669-e-commerce-personalize
https://dribbble.com/shots/11243718-LH-1064-05-Swimsuits-Catalog
https://dribbble.com/shots/9004128-Catalog-for-ATF-Cosmetics-store
https://dribbble.com/shots/5604689-Lindt-Product-Catalog
https://dribbble.com/shots/5879104-Ulmart-Top-10-Russian-Online-Retailer
https://dribbble.com/shots/5535038-Flower-Shop
https://dribbble.com/shots/10066562-Website-for-sweets-shop
https://dribbble.com/shots/15483957-Catalog-Free-Download
https://dribbble.com/shots/16233335-Product-card
5.Página de notícias ou blog
https://dribbble.com/shots/15379976-News-Website
https://dribbble.com/shots/14435664--Exploration-Article-Page
https://dribbble.com/shots/16385499-News-Site
https://dribbble.com/shots/14134149-Penlon-News-Page
https://dribbble.com/shots/6863071-News
https://dribbble.com/shots/11030123-Retro-News-Components
https://dribbble.com/shots/11958568-Farimarket-article-page
https://dribbble.com/shots/15601683-Personal-Blog-Layout
https://dribbble.com/shots/15395473-Personal-Blog
https://dribbble.com/shots/14481273-Portfolio-Courses-website-Blog
https://dribbble.com/shots/14377374--Exploration-Sport-News-Hero-Section
https://dribbble.com/shots/15229042-AGENCY
https://dribbble.com/shots/16279660-Website-design-for-Izabela-Kielczyk
6.Desenhar algum elemento específico
https://dribbble.com/shots/16289478-3D-Glass-Card-Illustration
https://dribbble.com/shots/13978524-Button
https://dribbble.com/shots/7268454-Rubber-Slider
https://dribbble.com/shots/14712568-CSS-Glowin-Drop-version
https://dribbble.com/shots/15491646-phone-icon-set
https://dribbble.com/shots/14052578-Star-Toggle
https://dribbble.com/shots/14185527-Figma-UI-kit-React-components-Counter
https://dribbble.com/shots/3541363-Clock
https://dribbble.com/shots/3978148-CSS-Advocat
https://dribbble.com/shots/7425055-Book-Loader
https://dribbble.com/shots/8424211-Smoke-Slider
https://dribbble.com/shots/9070657-Heart-Switch
https://dribbble.com/shots/9828547-Feedback-Reactions
https://dribbble.com/shots/11139240-Thumbs-up-button
https://dribbble.com/shots/12287144-Rating
https://dribbble.com/shots/4364095-Rainbow-is-here
https://dribbble.com/shots/13985244-Colorful-Buttons
https://dribbble.com/shots/14725005-3D-Switch
7.Dashboard
https://dribbble.com/shots/16364085-Wallet-Dashboard-Design
https://dribbble.com/shots/15378686-Task-Management-Dashboard-Design
https://dribbble.com/shots/15543862-Finance-Dashboard-Dark-theme
https://dribbble.com/shots/15501287-Finance-Dashboard-Design
https://dribbble.com/shots/16362432-E-learning-platform-dashboard
https://dribbble.com/shots/16152318-Tukunen-Sales-Analytics-Dashboard
https://dribbble.com/shots/15023587-File-Manager-Dashboard-design
https://dribbble.com/shots/15271947-Finance-Dashboard-UX-UI-Design
https://dribbble.com/shots/15145910-Store-Admin-Panel
https://dribbble.com/shots/16508365-Finance-Dashboard-Design
https://dribbble.com/shots/16097888-Dark-Theme-for-Project-Management-Dashboard-Animation
https://dribbble.com/shots/15223174-Project-Management-Dashboard-UI-Exploration
https://dribbble.com/shots/16018192-Digital-Wallet-Dashboard-UI-Dark-Theme
https://dribbble.com/shots/15804820-Finance-Dashboard-Dark-theme
https://dribbble.com/shots/15877041-Prostore-Sales-Dashboard
https://dribbble.com/shots/14973430-Fitness-Tracker-Dashboard
8.Email marketing
https://dribbble.com/shots/13801246-Email-Design-Mailchimp
https://dribbble.com/shots/8810403-Referral-Program
https://dribbble.com/shots/6153546-anyExcuse-Newsletter-Template
https://dribbble.com/shots/14554850-Order-Confirmation-Email-Dark-UI
https://dribbble.com/shots/14238815-Email-Receipt-Design
https://dribbble.com/shots/15184358-Sendlane-Visual-Identity
https://dribbble.com/shots/7104528-Mens-Watch-Brand-Email-Design
9.To do list/calendário/organização pessoal/notion
https://dribbble.com/shots/5726145-Todo-Web-App
https://dribbble.com/shots/7882888-Daily-UI-042-To-Do-List
https://dribbble.com/shots/3383167-To-Do-List
https://dribbble.com/shots/14238178-To-Do-List
https://dribbble.com/shots/15850805-Calendar-App-Concept
https://dribbble.com/shots/5019211-Simple-To-Do-List-App-UI-Concent
https://dribbble.com/shots/10544666-Hyperskill-To-Do-List-course
https://dribbble.com/shots/2366419-Projects-http-getlaps-com
https://dribbble.com/shots/4517985-Todo-web-app-tidily-io
https://dribbble.com/shots/3884941-Todooo-Tasks
https://dribbble.com/shots/14928544-Goal-based-project-management
10. Seu portfólio
https://dribbble.com/shots/15790280-personal-portfolio-Website-UI
https://dribbble.com/shots/16077352-Personal-Portfolio-Site-Bruno-Erdison
https://dribbble.com/shots/15534060-Freelancer-Personal-Portfolio-Website-UI-Design
https://dribbble.com/shots/14832163-JOHN-Developer-Portfolio-Website
https://dribbble.com/shots/15566022-Personal-portfolio-landing-page
https://dribbble.com/shots/15176184-Portfolio-Landing-Page
https://dribbble.com/shots/15473091-MoonexLab-Digital-Agency-Index
https://dribbble.com/shots/14135859-JanLosert-com-V4-Live
Dicas para te ajudar durante o desenvolvimento
-
Utilize sites para se inspirar Alguns deles são: Codepen, Up labs, Behance, Dribbble, Niice e Pinterest
-
Utilize sites para pegar imagens e ícones Alguns deles são: Pixabay e Flaticon
-
Utilize sites para escolher as cores do seu site e paletas Alguns deles são: Color hunt, Adobe color, Coolors e Web gradients
-
Utilize sites para se inspirar em fontes e importá-las Alguns deles são: Adobe fonts e Google fonts