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
www.w3schools.com/html/html_i...
- CSS
www.w3schools.com/css/css_int...
- Javascript
www.w3schools.com/js/js_intro...
- Google Fonts
fonts.google.com/about
- Font Awesome for Icons
fontawesome.com/
- Swiper.js for Touch Slider
swiperjs.com/
- ScrollReveal.js for Fade Effects
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

[@mathe.creative]

Hi there!
Learn, share, enjoy and develop, coders! ✌
Get access to all Mathe. Creative features: www.patreon.com/MatheCreative

[@rogeracevedo2033]

Hey! i would suggest maybe adding audio to your videos. it is so much easier to follow along when there is a voice guiding you. Even if your native language is not english, you should try.
just an idea. great video!

[@mathe.creative]

Hi there, Roger!!
First of all thanks for the suggestion and for the engagement with the channel, I am very happy with that. Second, I'll think about your suggestion and I'm already advancing that soon I'll have news for the channel :)