Welcome and setup

0:00 learn how to get AI to do the coding for you in this course you will use chat GPT to build interactive database powered projects you'll learn how to write effective prompts and debug and refine your code with the help of Ai No coding experience needed Gil Hernandez teaches this course imagine waking up tomorrow as a web developer what would you want to build it turns out that with AI tools like CPT you're already a developer regardless of your experience if you know how to work with them welcome to a different kind of coding course that's less about the intricacies of coding and more about building experimenting and realizing your ideas even without coding knowhow it's your fast lane towards getting the coding superpower in this course you'll use HTML CSS and JavaScript the building blocks of the web along with chat gbt an AI model developed by open Ai and you'll even get to work with a tool powered by Google called Firebase to add a database to projects but we won't Deep dive into the technicalities of these languages and tools or cover the basic concepts this course is your shortcut to prototyping and building cool projects

1:09 with ai's assistance without worrying about all the tedious foundational stuff the focus is helping turn you from a encoder into a capable Problem Solver Ai and tools like chat gbt aren't just here to provide coding answers they can be a part of your creative process helping you brainstorm ideas reinforce your newly learned skills and even enhance existing code by the of this course you'll have a collection of fun interactive and database powered mini projects that you've built with the help of chat gbt let's have a look at all the cool stuff you'll build in the first section of the course you'll start to unlock the potential of AI by building and deploying your first projects using chubbt you'll start by building what's called a hero section for a fictitious product it's an essential part of any website or landing page then you'll create a subscription form for a service called Barker box after that you'll take things up a notch by building an interactive invitation that allows guests to RSVP to an event then you'll build a fun raffle app where users enter their names into a cake raffle then it picks a random winner and you'll turn up the volume on your building skills literally by creating an interactive drum kit app that plays real drum sounds in section two you'll build Next Level

2:17 projects from your own version of the classic wacka game to an interactive project slideshow and a personal homepage to Showcase all your projects you'll even get to build a mobile friendly smart home interface and a Chrome browser extension that saves and stores shopping wish list items and section three is a big one it's all about building database powered apps with Firebase first you'll connect the event invite project from section one to a Firebase database then you'll work on a compliment generator app to spread Delight as well as an app called lunch vote to help you and colleagues decide on lunch spots and an app called Road wallet to manage group expenses while traveling by the end you'll have gained the confidence to keep building and turning your ideas into more functional prototypes and full-fledged applications regardless of your coding knowledge plus you'll learn how to deploy your projects with a service called netlify and share your awesome work and even transform projects into Mobile friendly apps that users can install on their devices and conveniently launch from their home screen and your teacher for this course is me gil Hernandez I'm a teacher at scrimba and I can't wait to start this journey and help you unlock your inner Builder before we start I encourage you to head over to Discord and let the

3:27 scrimba community know that you're starting the course in the today I will Channel you can click on this image to jump right into the Channel all right so join me in the next lesson where you'll begin coding and building in a whole new light with AI and chat gbt see you there imagine waking up tomorrow as a web developer what would you want to build it turns out that with AI tools like chat gbt you're already a developer regardless of your experience if you know how to work with them welcome to a different kind of coding course that's less about the intricacies of coding and more about creating experimenting and realizing your ideas even without coding knowhow and this course will use HTML CSS and JavaScript the building blocks of the web along with chat GPT an AI model developed by open AI but we won't Deep dive into the technicalities of these languages or cover every basic concept instead we'll focus on helping you prototype and build projects with ai's assistance turning you from a non-coders into a capable Problem Solver Ai and tools like chat GPT aren't just here to provide coding answers they can be a part of your creative process

4:37 helping you brainstorm ideas and reinforce your newly learned skills by the end of this course you'll have a collection of many projects you've built with the help of chat gbt and more importantly you'll have gained the confidence to keep creating and turning your ideas into actual functional prototypes regardless of your coding knowledge plus you'll learn how to deploy your projects with a service called net Y and share your awesome work your teacher for this course is me gil Hernandez I'm a teacher at scrimba and I can't wait to start this journey and help you unlock your inner Builder before we begin I encourage you to head over to Discord and let the scrimba community know that you're starting the course in the today I will Channel click on this image here to jump right into the Channel all right so join me in the next lesson where you will begin coding and building in a whole new light with

5:24 AI and chat TBT I'll see you there let's explore how AI specifically chat GPT can help you yes even non-coders to build amazing products you see in recent years artificial intelligence has transformed from science fiction to a real world tool that people from all walks of life can use but AI isn't just about robots and self-driving cars it's about augmenting our capabilities and making tasks easier which opens up a world of possibilities chubbt is what's called a a generative AI program which means that it can create new and original content based on the data it's been trained on as a result chat GPT can assist with everything from writing jokes recipes songs and poems and serve as your intelligent coding assistant now let's get more specific how exactly can an AI tool like chat gbt help us with coding projects well here's the thing coding at its core is about problem solving and chat TBT is designed to be a stellar problem solver for instance it can help you break down large intimidating projects into manageable tasks you simply describe your project

6:37 to chat GPT and it can generate basic steps for getting started and even lay out a road map for you to follow then it can suggest potential Solutions and provide code Snippets that you can use directly or modify to suit your needs now if you're a non- coder this might seem like a daunting Prospect but don't worry chat GPT can guide you through the basics of HTML CSS and JavaScript using simple and understandable language and remember if you need help understanding something chat GPT is right there to help explain tricky Concepts or offer hints and AI or chat PT in particular is not here to replace developers rather it's here to empower Builders like you and augment your creativity and problem solving abilities so I hope that you're excited about the potential of AI and chat GPT in building your projects let's keep it going by accessing and using chat GPT to explore some code if you're already set up with chat TBT feel free to skip this if not let me take a moment to walk you through signing up and accessing chat gbt chat gbt was developed by the open AI research lab so to use chat GPT you'll need to create an open AI account on open.com it's free and quick to do you

7:51 can click right on this image to go to the site once you're on the open AI website click the sign up button and enter your email and a a desired password to begin setting up your account you'll then need to quickly verify your email address name and phone number for security reasons after that you should be all signed up and set up with an open AI account to access chat GPT click on your user Avatar in the top right corner and select visit chat GPT from the drop down menu or click right on this image to visit chat.

8:15 open.com once there you can see some onscreen instructions and examples of how to interact with chat upbt and learn more about its capabilities and limitations after you've accessed chat GPT I want you to explore it type a sentence or a question in the chat interface and see how chat GPT responds you'll be surprised at how conversational and informative the AI model can be now while we are going to be using it for coding assistance chat GPT is not exclusively designed for coding it's a general purpose language model that's been trained on a large variety of content from the internet including many examples of code although it doesn't understand code in the same way a human developer does it can generate code based on the patterns and structures it has learned during its training all right now that you're all set up with chat TBT we'll take a highlevel tour of the basics of HTML and CSS and get you ready to start building let's spend some time talking

9:25 about the first two essential tools you'll need in your Web building toolbox HTML and CSS HTML or hypertext markup language and CSS which is short for cascading stylesheets are like the bread and butter of web development they both work together to help create the websites and apps we visit every day and understanding the basics of both will help you get the most out of this course one of my favorite analogies for these that we use at scrimba is to imagine building a car think of HTML as the blueprint for a car laying out all the key structural components like the frame steering wheel seats tires and so on it defines the car's essential parts and how they fit together to make the car we still want the car to look good and be comfortable so that's where CSS comes in think of CSS as like the exterior design and interior Furnishings of the car like the paint job the style and comfort of the seats the layout of the dashboard and any of the presentational or styling aspects that make the car not just functional but visually appealing and Driver friendly too in a web development

10:34 context HTML gives structure to our web content determining where paragraphs headings images and links go and CSS adds the style choosing colors fonts and layout options together HTML and CSS help create a well structured and aesthetically pleasing site or app so now let's see how chat GPT can help us in this process first let's ask it to generate the a basic HTML structure for a web page to do that I've written a prompt here for the AI in the file prompts MD as you'll learn prompts are essentially the instructions we feed into the AI and it's our way of communicating what we want the AI to do in this case I want it to generate the basic HTML structure for a web page so I'll copy this prompt and paste it into chat gbt's message input field submit it and chat GPT returns HTML code that you can copy and paste into your text editor you include your Project's HTML code in a file with the HTML extension like index.html so I'll click copy code to copy all of this HTML code and replace everything that's currently in index.html with this new code so these

11:48 are some of the basic HTML tags which are used to define the structure and elements of a web page an opening tag like this marks the beginning of an element and the closing cling tag marks the end now don't worry about what these meta tags it gave us mean right now they're just there to help with character encoding and how the web page gets displayed and this body element is where we place the main content of the web page such as text images links paragraphs and other elements in this case we have an H1 heading and a paragraph So any content placed inside this body element is what we see in the web browser here in the scrim you can click the Run button to view the web page in the mini browser so cool there we see welcome to my web page and then some content below it all right now let's make this HTML and Page look good

12:37 we'll use this second promp here to ask jbt to add some basic CSS to this page so I'll copy this promp and feed it into chat gbt and now I get back the HTML with a style block added that includes the CSS styles for the web page so I'll copy this new HTML code and replace B everything inside index.html with this code and good notice how the CSS sort of transforms our barebones HTML page into something more visually engaging and there are a few ways to apply CSS styles to your HTML you can include the CSS Styles directly within your HTML file like this however this can make your HTML excessively large and messy so it's better to include the HTML and CSS in separate files that's what you'll do in most of your projects so what I'll do is ask the AI to place the HTML and CSS in separate files using this prompt which I'll paste into chat GPT and there we go we get the code for index.html and styles.css so first I'll once again copy this HTML code and

13:48 replace everything that's in index.html with this new code and you include your CSS Styles in a file with a CSS extension like styles . CSS so I'll copy the new code for styles.css then replace what's currently in styles.css with this new code and as you can see the page still looks the same the difference is that now the HTML and CSS are placed in separate files and that's being done here via the link tag which is what connects the HTML file to the CSS file it's a whole lot easier to manage and organize your HTML and CSS this way all right so if you have a look at the CSS you'll see what are called selectors that Target or select specific HTML elements and apply styles to them for example this selects the body element this here selects the H1 element using the H1 tag and then the P tag or paragraph element is selected here okay so now it's your turn I want you to play around with the HTML and CSS code here in this scrim change the text or add more text in the HTML for example

14:59 welcome to Gill's web page or alter the colors in the CSS for example I can make this heading Red by simply typing red here as the color value and we see this main heading change to red or try changing any of the other CSS properties to see how they affect the page and if the cart analogy from earlier didn't really make things stick for you or you want to make HTML and CSS more relatable to you think of a scenario or a hobby you enjoy for instance if you like to cook imagine how an analogy relating to cooking would help you understand HTML and CSS better using a prompt like this I'm interested in learning HTML and CSS with an analogy related to cooking I'll submit that to chat GPT and the output suggests thinking of HTML as the list of ingredients in the step-by-step instructions in a recipe and that CSS is like the seasoning and presentation of a dish and then it expands upon this analogy to paint a more Vivid picture and one of the objectives of this course is for you to be able to ask the AI for explanations on specific parts of the code you don't understand so throughout

16:11 this course I want you to ask chat GPT questions or to provide you with more details about any of the code or concepts you're curious about or don't quite understand yet you'll find that as you progress you'll start understanding how different HTML tags and CSS Styles come together to form a web page and how they fit in with JavaScript which is another essential building block of web development and chat gbt will be there every step of the way assisting you and guiding you in building your projects so congrats you've just written your first lines of HTML and CSS code and now I'll leave you with a challenge to have you spend some time tinkering with HTML and CSS I'll paste the challenge here as a comment in index.html first I'd like you to add a second level heading to the page using an H2 element and then add a paragraph below the new heading and I'd also like you to increase the text size of both headings I've also included a stretch goal which is to display a picture on the page this could be a photo of you or any image you'd like you can add an image to the scrim by simply dragging

17:20 your image right into the Explorer sidebar here and don't hesitate to ask chat GPT for help or ask it any questions about HTML and CF s I'll see you in the next Grim where you will build your first project all right you've gotten an overview of HTML and CSS so how can we start using AI tools to simplify the process of building projects with HTML