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
Auf dieser Seite können Sie das Online-Video Responsive Personal Portfolio Website using HTML CSS and JavaScript | [Step by Step] mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Mathe. | Creative Coding Camp 12 Februar 2023 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,464 Mal angesehen und es wurde von 45 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
