Free Website Portfolio GitHub Pages Tutorial

Code a responsive one page portfolio website with mobile first CSS.

Link to example code on GitHub - https://github.com/mutonaothenton/mutonaothenton.github.io

First video showing how to setup GitHub and get free domain with the GitHub Student Developer Pack - https://youtu.be/PZTLD7LvbWw

0:00 Download Visual Studio Code
0:56 Check if Git is installed locally
1:33 Install Git
1:58 Clone Repository from GitHub
3:56 Make img folder locally
4:28 Make css and js folders in Visual Studio Code
5:35 Setup Git Username and Email
6:30 Commit first changes locally
6:55 Sync first changes with GitHub Repository
8:01 Create .gitignore file
8:50 Install Extensions to Visual Studio Code
9:28 Change Code Formatting Settings
10:05 Create HTML Boilerplate
12:21 Add CSS Stylesheet
13:06 Add stylesheet link in the Head
13:49 Confirm External stylesheet is working
14:30 Launch Live Server to check page locally
14:52 Commit CSS changes and sync to GitHub
15:58 Add images to local imp folder
17:25 Begin Coding Hero Image Header
19:25 Add basic CSS styles
24:05 Add hero image HTML code
28:00 Add hero image CSS styles
40:00 Replace hero image with video
44:43 Add CSS Media Queries
48:40 Commit Hero Header changes and push to GitHub
49:35 Begin Portfolio Section
50:00 Download Lightbox Javascript Code
51:12 Add Lightbox CSS link and Script tags
53:21 Add Portfolio HTML Code
58:57 Add Portfolio CSS styles
1:06:20 Add Image Captions to Lightbox
1:09:00 Add Portfolio Button to Header
1:16:00 Commit Portfolio and push to GitHub
1:16:33 Begin About Section
1:19:44 Add Font Awesome Icons
1:24:18 Add Font Awesome CSS link
1:25:05 Add Profile Image to About
1:26:10 Add About CSS styles
1:34:14 Commit About and push to GitHub
1:35:06 Begin Navigation Bar HTML
1:41:00 Navigation Bar CSS
1:59:45 Add position:sticky to .top-nav
2:01:17 Add Javascript Scroll styles to Navigation Bar
2:05:45 Add negative margin to Navigation Bar
2:08:30 Add anchor link scroll margin class
2:12:05 Add Footer

Web Coding Tutorial Video Links:

Set up Visual Studio Code - https://youtu.be/_WEyoLuuyYo
HTML Crash Course - https://youtu.be/dk3F9ONez7M
CSS Crash Course - https://youtu.be/KW25-M00YTw
Flexbox in 15 Minutes - https://youtu.be/km1AL9-Z4CM
Flexbox Responsive Navbar - https://youtu.be/yXhfUCXy2j4
Setup Git Username - https://youtu.be/ZeWx0XNUZWE ((this was a common problem but is now covered in the new intro video)
CSS Grid Layout - https://youtu.be/nfsI_B4Puyo
CSS Grid Gallery Layout - https://youtu.be/UDH--wrJ5eA
Hero Image Fullscreen Homepage - https://youtu.be/FTNAAGYGO7I
About Page - https://youtu.be/CZSUTs5UwCY
Optimize Images for the Web - https://youtu.be/zCtuRLbS0U8
Portfolio with Lightbox - https://youtu.be/pjHdhUPAQKI

Link to Web Coding Playlist - https://youtube.com/playlist?list=PL8G4GiXpgTvJSZCHRWUZK5o0U1c8CWqF2

#portfolio #portfoliowebsite #html