Create a Responsive Portfolio Website with HTML CSS JS AI from scratch
In this video, Im going to help you build your own portfolio website from scratch. You can use basic HTML CSS and JavaScript to use and create this!Assets Updateshttps://github.com/adriantwarog/portfolio-getting-started-assets The first part of the video will allow anyone to create this web design using basic HTML, CSS and JavaScript. This will be beginner friendly. It will be a portfolio you can host yourself, and it will have a single page design that has some animation, with responsive design that will look good on a mobile device, and will teach some fundamentals for coding. In the second part, Ill show how to migrate this code into a React Project that is on top of Next JS. This can be automatically deployed in the cloud with ease, with some additional transition effects and features. The final part of this video will feature some really interesting implementations of AI technology on top of Microsoft Azure, and some interactive elements. So whatever level youre at youll learn something new and interesting. 00:00:00 - Create a Responsive Portfolio Website00:00:42 - Website Portfolio Design Overview00:02:57 - Setup Files and Folders00:04:07 - Portfolio - Coding the HTML CSS JS00:04:53 - Portfolio - Selecting a Font00:00:05:55 - VS Code - Live Server Extension00:06:34 - Portfolio - Adding a Favicon00:07:14 - Portfolio - Header and Navigation00:24:23 - Portfolio - Hero Section with Hero Image and Call to Action00:36:49 - Portfolio - Logo Section00:40:34 - Portfolio - About Section with Skills 00:46:56 - Portfolio - Articles Section with Work Experience 00:54:17 - Portfolio - Bento Grid with Recent Projects01:04:00 - Portfolio - Azure AI Chatbot01:12:55 - Portfolio - Resume and Contact Us01:15:15 - Convert the Portfolio into NextJS and React JS01:21:39 - Integrate AI Chatbot - Microsoft Azure AI OpenAI Studio01:23:32 - Integrate AI Chatbot - Setup GPT3.5 API on Azure OpenAI01:28:42 - Integrate AI Chatbot - Create Portfolio AI Chatbot01:33:48 - Integrate AI Chatbot - Add Portfolio Resume to AI Assistant01:35:30 - Completed and Summary of Portfolio WebsiteAll the assets can be found here:https://aka.ms/AdrianTwarogAI A big thanks to Microsoft for sponsoring todays video, you can learn more about Microsoft Azure OpenAI and their tools at the link about!!!You can learn more about Microsoft Azure here: https://aka.ms/AdrianTwarogAI #portfolio #website #azureWant to learn more? Check out my courses! Teach Me Design - Course: https://www.enhanceui.com/ OpenAI + GPT - Course & Templates: https://enhanceui.gumroad.com/ Software & Discounts: Admin Templates and UI Kits: https://bit.ly/themeselection15 Screen Recorder: https://screenstudio.lemonsqueezy.com ?aff=po745 Editor X: https://www.editorx.com/adrian-twarog Webflow: https://webflow.grsm.io/adrian Envato: https://1.envato.market/yRZjz2 Envato Elements: https://1.envato.market/LP0OJZ Elementor: https://elementor.com/adrian/?ref=23140 Computer Gear: Monitor: https://amzn.to/3f9DOQI Keyboard: https://amzn.to/3eA5UFD Mouse: https://amzn.to/3xVJO8l Mic: https://amzn.to/3hgCfms Tablet: https://amzn.to/3ewt7sa Lighting: https://amzn.to/3vOZeZY Key Lighting: https://amzn.to/3f6qP2f Camera Equipment: Camera: https://amzn.to/3uCv4J9 Primary Lens: https://amzn.to/3vT6wMm Secondary Lens: https://amzn.to/3tyqWIX Secondary Camera: https://amzn.to/3o2zCGi Camera Mic: https://amzn.to/33tCz9l USB to HDMI: https://amzn.to/33yW9RE