Summary
Keywords
Full Transcript
how to make complete responsive personal portfolio website design using html, css ( sass ), javascript / jquery step by step. complete responsive personal portfolio tutorial for beginners. create a complete responsive personal portfolio website using html/css/jquery/javascript/sass/scss. mobile first website design with source code. the main feature of this website are: ✔ responsive navbar / header with toggle and scroll effect. ✔ responsive home section with text typing effect. ✔ responsive about section with progress bars. ✔ responsive service section with hover effects. ✔ responsive experience section. ✔ responsive portfolio section with filter effect ✔ responsive contact section. all section are made using bootstrap 5 framework. ✌ few lines of media queries are used. * SOURCE CODE * download the source code from google drive: https://drive.google.com/drive/folders/1IZ_vyzNa3ZvY1-xkJMXQTH9WGUxbzNH6?usp=sharing typed.js website link: https://github.com/mattboldt/typed.js/ typed.js cdn link: https://cdn.jsdelivr.net/npm/[email protected] bootstrap 5 website link: https://v5.getbootstrap.com/docs/5.0/getting-started/download/ jquery link: https://jquery.com/download/ font-awesome link: https://fontawesome.com/ download the main background image (home) from here: https://www.freepik.com/free-photo/young-handsome-smiling-happy-man-holding-vintage-photo-camera-isolated-white-studio-background-wearing-denim-shirt-hat-sunglasses-photographer-traveling-taking-pictures_9654168.htm#page=2&query=man+with+hat+and+suite&position=1 download the about image from here: https://www.freepik.com/free-photo/young-handsome-hipster-man-isolated-white-studio-background-stylish-outfit-denim-shirt-trousers-hat-sunglasses-sitting-chair-hands-together-pose-smiling-happy-positive_9654078.htm#page=2&query=man+with+hat+and+suite&position=40 download the font link from here: ( Exo 2 / Google fonts ) - https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,300;0,400;0,500;0,600;1,300&display=swap" rel="stylesheet images are from pexels: https://www.pexels.com/ icons are from flaticons: https://www.flaticon.com/ TIMESTAMPS: 0:00 demo 4:25 folder structure 4:52 header section 13:20 home section 14:30 typed.js 15:52 home section design 18:14 about section 24:37 service section 28:24 experience section 32:52 counter section 35:35 portfolio section 42:05 contact section 50:28 footer section 52:04 mobile first watch the full playlist of how to create responsive websites: https://www.youtube.com/playlist?list=PLSJxovi1IyDFf36uSXsfQTmTVVFjAEkuo New To My Channel Subscribe Now And See More Stuff Like This: https://youtube.com/channel/UCKwgH3vASrD2brd1l2m6NHw #PersonalPortfolio #ResponsiveWebsite #WebDesign #CompleteWesbite #ResponsiveDesigns #animatedWebsite #HTML5 #CSS3 #SASS #SCSS #BOOTSTRAP #JQUERY #Javascript #PortfolioWebsite #WebDevelopment
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
