Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step]

Published: 12 February 2023
on channel: Mathe. | Creative Coding Camp

1,464

🎬 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

On this page of the site you can watch the video online Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step] with a duration of hours minute second in good quality, which was uploaded by the user Mathe. | Creative Coding Camp 12 February 2023, share the link with friends and acquaintances, this video has already been watched 1,464 times on youtube and it was liked by 45 viewers. Enjoy your viewing!