Skip to content

PRO TIP Block youtube.com at the DNS level โ€” Pi-hole, NextDNS or your hosts file โ€” but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

๐Ÿ’ผ Create a Responsive Mini Portfolio Website Design Using HTML CSS & JavaScript

192.1K views on YouTube

How to make a responsive personal mini portfolio website design using HTML, CSS, and JavaScript. With a user profile card style. Along with css animations and dark light theme. Developed first with the Mobile First methodology, then for desktop.

๐Ÿ”” Subscribe for more!
https://www.youtube.com/c/Bedimcode

โค๏ธ Get source code
https://buymeacoffee.com/bedimcode/e/65191

๐Ÿ’™ Get template by PayPal
https://ko-fi.com/s/dc2ea111c2

——————————
๐Ÿ‘จโ€๐Ÿ’ป Start project from scratch
https://github.com/bedimcode/responsive-mini-portfolio

โ˜ Start developing the project (base files + images)
– Click on the GitHub link
– Click the green button (code)
– Click Download ZIP
– Extract the project to the desired location

๐Ÿ“ Assets
Icons: https://remixicon.com/
Fonts: https://fonts.google.com/
GitHub: https://github.com/bedimcode/responsive-watches-website
ScrollReveal: https://scrollrevealjs.org/
Dopely colors: https://colors.dopely.top/color-pedia

โฑ Timestamps
0:00 Intro Responsive Mini Portfolio
2:03 Project Setup
4:08 Variables CSS
6:21 Reset HTML & Reusable CSS Classes
08:06 Header Profile
26:13 Filters tabs
27:08 Projects
36:24 Skills
00:50:10 Footer
00:51:15 Scroll Bar
00:52:32 Dark/Light Theme
00:58:58 Breakpoints
01:07:45 ScrollReveal Animation
01:11:07 Change Color To Project
01:13:40 Final Project

——————————
Profile pictures
https://unsplash.com/@rafaelladiniz

——————————
โ˜•๏ธ Support me
https://www.buymeacoffee.com/bedimcode

๐Ÿ’™ Support me by PayPal
https://ko-fi.com/bedimcode

๐Ÿ‘ Thanks for watching!
Make sure to like + Subscribe For More! โค

#portfoliohtmlcss #portfoliowebsite #bedimcode