Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step]
🎬 Responsive Personal Portfolio Website using HTML CSS and JavaScript | Step by Step
Hi everyone!
With this video you will finally be able to program your own personal portfolio website, mobile first, with a clean and solid design, and animations that add value to your content that you will insert.
Maybe you need a professional way (portfolio) to present your work or you are starting in a new area and looking for new jobs, whatever the case, code this website portfolio with me and give the value your work and studies deserve.
👍 If You Enjoy This Video, Consider Hitting The Like Button!
🥁 Subscribe To Stay Notified For New Videos: / @mathe.creative
🌟 The "Front-end for Beginners" EBOOK is now available! High quality content, check it out now:
/ shop
[SOURCE CODE]
Became a channel member:
--- Patreon:
🌟 / mathecreative
Technologies used in this video:
HTML
https://www.w3schools.com/html/html_i...
CSS
https://www.w3schools.com/css/css_int...
Javascript
https://www.w3schools.com/js/js_intro...
Google Fonts
https://fonts.google.com/about
Font Awesome for Icons
https://fontawesome.com/
Swiper.js for Touch Slider
https://swiperjs.com/
ScrollReveal.js for Fade Effects
https://scrollrevealjs.org/guide/hell...
Timestamps:
00:00:00 - Demo
00:03:00 - HTML - Header
00:04:50 - Google Fonts - Urbanist
00:06:15 - Setting the Color Palette
00:07:50 - CSS - Header
00:10:30 - HTML - Upside (photo) of Intro Section
00:13:50 - CSS - Upside (photo) of Intro Section
00:19:10 - HTML - Upside (about) of Intro Section
00:20:00 - CSS - Upside (about) of Intro Section
00:22:35 - Responsive - Upside of Intro Section
00:26:30 - HTML - Bottom of Intro Section
00:28:45 - CSS - Bottom of Intro Section
00:33:30 - Responsive - Bottom of Intro Section
00:35:40 - HTML - Practice Cards Section
00:37:10 - CSS - Practice Cards Section
00:40:55 - Responsive - Practice Cards Section
00:41:20 - HTML - Portfolio Section (Part I)
00:43:22 - CSS - Portfolio Section (Part I)
00:47:40 - HTML - Portfolio Section (Part II)
00:48:35 - Responsive - Portfolio Section
00:49:40 - HTML - Experience Section
00:50:40 - Configuring the Swiper.js for Experience Slider
00:58:10 - CSS - Experience Slider
01:03:20 - HTML - Education Section
01:04:15 - Configuring the Swiper.js for Education Slider
01:08:05 - Responsive - Experience/Education Sections
01:17:50 - HTML - Footer
01:20:10 - CSS - Footer
01:23:50 - Responsive - Footer
01:26:00 - HTML - Portfolio Case Details (Part I)
01:29:45 - CSS - Portfolio Case Details
01:37:30 - Responsive - Portfolio Case Details
01:41:50 - HTML - Portfolio Case Details (Part I)
01:42:40 - Javascript - Open Details of Portfolio
01:49:00 - CSS - Open Details of Portfolio
01:51:05 - ScrollReveal - Installation and Configuration
01:53:15 - ScrollReveal - Assigning the Classes
01:58:17 - Dreams come true
Watch video Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step] online without registration, duration hours minute second in high quality. This video was added by user Mathe. | Creative Coding Camp 12 February 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,464 once and liked it 45 people.