Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript (Full Tutorial)

EGATOR

チャンネル登録者数 9.01万人

6.6万回視聴・ 1684いいね・ 2021/11/25

Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript (Full Tutorial)

Complete Responsive Personal Portfolio Website using HTML CSS & JavaScript (Full Tutorial)
Hostinger Discount: www.hostg.xyz/SH8cs

In this video, I'm going to show you step-by-step how to create and deploy a complete responsive personal portfolio website using HTML, CSS & JavaScript. This website will be fully functional and fully responsive, so by following along, should have your personal portfolio website up and running in just a hours! I will be explaining every step along the way, although a basic understanding of HTML, CSS, and JavaScript is required. This website will be created with a modern approach, so we will be using CSS Flexbox, CSS Grid, CSS Variables, and more!

Source Code, Assets & Live Demo: patreon.com/egator

As a developer, having a custom portfolio website with a custom domain name and hosting is key! Every recruiter looks for these simple things to shorten their long list of options. Stand out by building something amazing to showcase your skills. This is why I created this tutorial to help create something simple, yet unique and beautiful for your portfolio.

Assets: drive.google.com/file/d/1538eTIZ3uvVXFn3y6jJoisvI-…

Timestamps
00:00:00 Course Introduction (Project Overview)
00:07:15 Buying our Hosting & claming our free Domain Name
00:10:46 Project Folder Structure & extensions
00:13:05 Navbar HTML
00:15:40 Adding Material Icons CDN
00:17:40 General CSS Styles (CSS Variables and more)
00:29:00 Navbar CSS
00:36:10 Landing (Animation Area) HTML
00:44:00 Landing (Animation Area) CSS
01:01:20 About HTML
01:05:25 About CSS
01:09:10 Skills HTML
01:15:20 Skills CSS
01:24:10 Services HTML
01:25:50 Services CSS
01:31:30 Portfolio (Recent Work) HTML
01:35:40 Portfolio (Recent Work) CSS
01:39:45 Testimonial HTML
01:43:58 Testimonial CSS
01:48:55 Swiper JS (for testimonial slides)
01:53:42 Contact HTML
01:57:15 Contact CSS
02:05:35 FORMSPREE for Contact Form Submission
02:10:32 Footer HTML
02:13:15 Footer CSS
02:18:15 Responsive Design on small screens (CSS Media Queries)
02:39:45 Nav Menu / Sidebar Toggle using JavaScript
02:43:25 Nav Items Active Class Toggle in JavaScript
02:46:45 Show more / SHow Less Description Toggle using JavaScript
02:50:20 Skills Items Toggle using JavaScript
02:55:02 Box Shadow on Navbar on scroll
02:57:20 Scrollbar Customization
02:58:40 Website Deployment (Uploading our website to the internet)