How to Build a Responsive Portfolio Website Using HTML , CSS and JavaScript | Step-by-Step Tutorial
This is an HTML and CSS code for a responsive portfolio website. The website contains a home section, about section, skills section , services section ,project section and contact section. Responsive navigation bar , scroll to top button , animated scroll bar also in there.
✂ Timecodes ≪ 0:00 ─〇──── 0:00 ≫
0:00:00 - Portfolio Website Design
0:02:27 - Channel Intro
0:02:35 - start create project in vs code
0:03:07 - Navigation Menu (HTML )
0:05:03 - Styling Navigation Bar (CSS)
0:08:29 - Make Navigation Menu Responsive
0:10:19 - Add Button on Navigation Menu
0:15:20 - Home Section (HTML…
Watch on YouTube ↗
(saves to browser)
Chapters (36)
Portfolio Website Design
2:27
Channel Intro
2:35
start create project in vs code
3:07
Navigation Menu (HTML )
5:03
Styling Navigation Bar (CSS)
8:29
Make Navigation Menu Responsive
10:19
Add Button on Navigation Menu
15:20
Home Section (HTML)
17:50
Styling Home Section (CSS)
24:04
Make Home Section Responsive
25:58
Make Responsive Sticky Navigation Bar
29:37
About Section (HTML )
34:44
Styling About Section (CSS)
43:07
Make Responsive About Section
46:34
My Skills Section (HTML)
49:15
Styling My Skills Section (CSS)
53:27
Make Responsive My Skills Section
55:38
My Services Section (HTML )
59:34
Styling My Services Section (CSS)
1:05:05
Make Responsive My Services Section
1:06:54
Projects Section (HTML )
1:10:05
Styling Projects Section (CSS)
1:13:23
Contact Me Section (HTML)
1:17:50
Styling Contact Me Section (CSS)
1:21:40
Make Responsive Contact Me Section
1:23:03
Footer Section (HTML)
1:24:09
Styling Footer Section (CSS)
1:26:15
Scroll To Top Button (HTML)
1:26:50
Styling Scroll To Top Button (CSS)
1:23:03
Footer Section (HTML)
1:24:09
Styling Footer Section (CSS)
1:31:48
Disable Scroll Bar while Side Navigation Menu or Sidebar is open
1:32:40
Side Navigation Menu or Side Bar Close When Navigation Links Clicked
1:34:42
Custom Scroll Bar (CSS)
1:36:07
Completion Of Website Project
1:39:30
ending
Playlist
Uploads from CydexCode · CydexCode · 52 of 60
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
▶
53
54
![[ASMR Programming]- Responsive Portfolio Website #portfolio #portfoliowebsite #personalwebsite](https://i.ytimg.com/vi/FRWhOoVkR7o/mqdefault.jpg)
55
![[ ASMR Programming ]- How to build a Calculator. #calculator #css #javascriptproject](https://i.ytimg.com/vi/jfk4hTpgSMo/mqdefault.jpg)
56
57
58
59
60
Delete table row data in Microsoft SQL Server Management Studio #sql #sqlserver #sqlqueries #code
CydexCode
Insert data into table in Microsoft SQL Server Management Studio #sql #sqlserver #sqlqueries #code
CydexCode
Create Database and table in Microsoft SQL Server Management Studio #sql #sqlserver #sqlqueries
CydexCode
Update table row data in Microsoft SQL Server Management Studio #sqlserver #sql #code
CydexCode
Create the table's FOREIGN KEY in Microsoft SQL Server Management Studio #sqlserver #sql #database
CydexCode
Create the table's PRIMARY KEY in Microsoft SQL Server Management Studio #sql #sqlserver #database
CydexCode
The best gift you can give for Valentine's day❤️💻 #shorts. #valentinesday #html #css
CydexCode
Swap the elements in Array using java#java #code #shorts #swap #array
CydexCode
Sorting an array using SORT FINCTION in java. #java #javaprogramming #sort #array #shorts
CydexCode
Bubble Sort in java #java #javaprogramming #array #sort #shorts
CydexCode
Insertion Sort in java. #java #javaprogramming #array #sort #shorts #code
CydexCode
Selection Sort in java. #java #javaprogramming #array #sort #code #shorts
CydexCode
Apple logo design 🍎 #apple #html #css #logodesign #shorts
CydexCode
BEN 10 logo design. #html #css #logo #shorts
CydexCode
Binary Search in Java #java #binarysearch #datastructure #programming
CydexCode
Merging two sorted arrays in java. #sort #java #programming #datastructure
CydexCode
Merge sort in Java. #merge #sort #java #programming #datastructure
CydexCode
This is how to decide what programming language to learn🛑
CydexCode
Make a Digital Clock 🕒 #html #css #javascript #digitalclock
CydexCode
Create a keyboard⌨️ #javascript #html #css #javascriptproject #keyboard
CydexCode
Create a Stopwatch🕒. #javascriptproject #html #css #stopwatch
CydexCode
bulb on/off using javascript 💡. #javascriptproject #html #css #bulb
CydexCode
Create weather app using javascript ☁️🌧️⛅🌞. #javascriptproject #html #css #weather
CydexCode
How to Create a Text Portrait using HTML & CSS | Text to Image
CydexCode
Youtube logo #css #html #youtubelogo #shorts
CydexCode
Create a Helicopter 🚁. #css #html #helicopter
CydexCode
Google Logo Design | CSS and Html | #css #html #googlelogo #cssproject
CydexCode
Spirograph Circles | CSS TRICKS #css #html #animation
CydexCode
CIGARETTE 🚬 | With Vapor Effect | CSS Tricks #css #html #cigarette
CydexCode
Facebook Logo | CSS Tricks #css #facebooklogo #logodesign
CydexCode
Instagram Logo | CSS Tricks #cssdesign #instagramlogo #shorts
CydexCode
CODE CAVE | Official Trailer | Give Your Comments For Us
CydexCode
TikTok Logo | CSS tricks #cssproject #tiktoklogo
CydexCode
Student Management System | JavaScript CRUD Application | Special for beginners .
CydexCode
Student Management System with LocalStorage | JavaScript CRUD Project
CydexCode
Create a Microsoft Logo | CSS Tricks | Pure CSS. #microsoftlogo #csslogodesign #css
CydexCode
CSS Square Animation Effects | CSS Tricks | Pure CSS
CydexCode
Olympic Logo Rings Animation | Pure CSS | CSS Tricks
CydexCode
CSS Button Hover Effects | Gradient Border using CSS and HTML
CydexCode
CSS Button Hover Effects | Gradient Border Effects | CSS Tricks #cssbutton #hovereffect #css
CydexCode
Animated Login Form using HTML and CSS | With Gradient Border |
CydexCode
Animated Login Form using CSS and HTML #loginform #signupform #csstutorial
CydexCode
Animated Toggle Switch with Gradient Border using CSS and HTML | Toggle Switch Button
CydexCode
Animated Toggle Switch using CSS and HTML | Gradient Border #toggleswitch #csstutorial #shorts
CydexCode
3D Rotating Cube Animation using CSS and HTML | CSS TRICK
CydexCode
Football player's 3D Cube Animation ⚽🎖️|CSS Tricks #cubeanimation #csstutorial #football
CydexCode
Responsive Navigation Bar using HTML & CSS | Search Bar, Drop-down list & Login option
CydexCode
Build Your Own ChatGPT AI Application using JavaScript
CydexCode
😮 Anyone can Build own ChatGPT | JavaScript Tutorial #chatgpt #aibot #chatbot
CydexCode
3D Parallax Scrolling Using HTML, CSS & JavaScript | 3D Webpages
CydexCode
Parallax Scrolling Website | HTML , CSS & JavaScript #website #parallaxeffect #webdesign #parallax
CydexCode
How to Build a Responsive Portfolio Website Using HTML , CSS and JavaScript | Step-by-Step Tutorial
CydexCode
Build a Calculator in HTML, CSS, and JavaScript with Easy
CydexCode
[ASMR Programming]- Responsive Portfolio Website #portfolio #portfoliowebsite #personalwebsite
CydexCode
[ ASMR Programming ]- How to build a Calculator. #calculator #css #javascriptproject
CydexCode
How to build Chess Game Using HTML , CSS & JavaScript
CydexCode
How to make a Breakout Game using HTML , CSS & JavaScript | Bouncing Ball Game | Step by Step
CydexCode
Sign-Up/Login Form 👨💻 #signupform #loginform #websitedesign #htmlcss
CydexCode
Frontend Developers vs Backend Developers #frontend #backenddeveloper #fullstackdevelopment
CydexCode
Login / SignUp Form using CSS | Gradient Border #loginform #signupform #css
CydexCode
DeepCamp AI