Create Portfolio Theme Website From Scratch Using HTML5, CSS3, #Bootstrap4 & JavaScript
Download starter files:
https://drive.google.com/open?id=18vRrf0JgHOLeHXXCoKEQWotP2J93c2rP
Complete Playlist:
1/15: Preview
2/15: Getting Started and Head Tags
3/15: Cover Image, Navigation Bar and Banner Text on Cover Image | HTML5 & Bootstrap4
4/15: About Section | HTML5 & Bootstrap4
5/15: Image-Grid (Thumbnails) | HTML5 & Bootstrap4
6/15: Modal (Full Screen Image Viewer) | HTML5, JavaScript & Bootstrap4
7/15: Hide Body Scroll Bar When Modal (Image Viewer) is Active | JavaScript
8/15: Hide Navigation Bar When Modal (Image Viewer) is Active | JavaScript
9/15: Testimonials Section and Carousel | HTML5 & Bootstrap4
10/15: Contact Section & Input Forms | HTML5 & Bootstrap4
11/15: Footer & Font Awesome Icons | HTML5 & Bootstrap4
12/15: Get Smooth Scroll Effect | JQuery Plugin
13/15: Make Navbar Transparent in Cover Page and Opaque Elsewhere | JQuery
14/15: Apply Animation to Webpage | CSS3 & JavaScript
15/15: Media Queries for Responsiveness of Webpage | Bootstrap4
—————————————————————————————————————–
In this video series, we will learn how to create a stunning Responsive Modern Portfolio Theme Website from scratch. This website is developed using HTML5, CSS3, JavaScript and Bootstrap4 with animation. It is going to be a long video series, but by the time you finish it, you’ll end up with a modern responsive website. It features:
1. Cover Image
2. Responsive Navigation Bar which remains transparent untill the cover image is scrolled down.
3. Banner Text on Cover Image
4. Bootstrap Responsive Classes
5. Stunning Responsive Image-Grid with Animation
6. Full Screen Image Viewer or Full Screen Slide Show using Bootstrap Modals
7. ScrollBar of Body and Navigation Bar are hidden when Full Screen Image Viewer is open
8. Carousel for Testimonials
9. Contact Section
10. Bootstrap Flexbox
11. Smooth Scroll Effect using JavaScript Plugin
12. ScrollSpy: Automatically update Bootstrap Navigation Bar based on scroll position to indicate which link is currently active in the broswer’s visible area (viewport)
13. Animation using Plugins
—————————————————————————————————————–
SCREENSHOTS:
Cover Image, Navigation and Banner Text:
https://drive.google.com/open?id=1ENgGJ3T0RH9ysNU68lh3nQrWpUsRhics
About section:
https://drive.google.com/open?id=1Q6McC-0Q5e8n6un9fD4h1jGQ49uc001C
Image-Grid (Thumbnails):
https://drive.google.com/open?id=1S_QU0d1Pp-V3od2iHNTjy8lOqj_x2jwH
https://drive.google.com/open?id=1yknejxWtTq9GLQlDSL1lSAHxbyF8JrPg
Full Screen Image Viewer (or Full Screen Slide Show):
https://drive.google.com/open?id=15PpRPOF2W9vxJhS5PlZ6KE8jPzaWEYmQ
https://drive.google.com/open?id=1UJj4uvkSDQm0JBtAAtPpy9TbFaPdS7ME
Testimonial Carousel:
https://drive.google.com/open?id=1vlSN67A48PHWjQ6vL3u4RysxpNc0TJ0X
Contact Section:
https://drive.google.com/open?id=12yS5UUKVnulTt8A-z4D0xpMW7LiGMEix
Footer:
https://drive.google.com/open?id=1gy6JpEm9CRh8qA-gBp8RFIwXIoZ-Jr6K
COMPLETE WEBSITE:
https://drive.google.com/open?id=1tD0zR2Na2PnNv3dk_eCyriMAyXTTb67r
ALL SCREENSHOTS:
https://drive.google.com/open?id=1GZHcqO4WEzopiTyqXlHtcDrSDg4CVl3T
—————————————————————————————————————–
If you are interested in learning about Web Design. Check out these playlist
CSS Tips and Tricks | CSS Animations and Effects:
Business Theme Responsive Animated Bootstrap Website:
Create Various Parts of Webpage using HTML5 and CSS3:
Website Creation Tutorials:
Host a website on your computer without any hosting server or buying domain:
Follow Me on Social Media
Twitter: https://www.twitter.com/#tanzTalkstech
Google: https://plus.google.com/+tanzTalkstech
Youtube: https://www.youtube.com/tanzTalkstech
Facebook: https://fb.me/tanzTalks.tech
#ImageGrid Bootstrap4 #PortfolioTheme #WebsiteCreationTutorial #WebsiteTutorial #WebsiteCreation
#WebsiteDesign #BootstrapWebsite #ImageGallery tanzTalkstech
source
Leave a Reply