Claude AI for Creative Web Design: Design Stunning Creative Websites Powered By Claude AI

1. Introduction: When you're trying to design your own website, typically, you start with a lot of these doodles, sketches, ideas, concepts to end up with a broken website that doesn't work. Well, not anymore. In this current class, I'm going to show you how to harness the power of artificial intelligence, specifically Claude to design your website, specifically front-end web development. Such that you don't have to think about coding, styling, graphics, animations, which are typically tedious to think about. They consume a lot of time, a lot of effort, and they break quite easily. I'm going to show you how to bypass the entire process. No code needed whatsoever, such that you simply focus on one thing only as a creative professional, the conceptualization, the ideation, your ideas. And I'm going to show you how to create and design the website, front-end web development specifically to bring your idea to life. Whether we're talking about navigation, styling, graphics, animation. Concepts. You're building your portfolio. You're building your own personal brand. The applications are quite endless. I'm going to show you the tactics, how to utilize them in the best way possible to integrate Claude as part of your front-end web development efforts, such that by the end of the class, you'll have a beautifully designed website to showcase your work, to showcase your creative journey, and to showcase your projects. 2. Your Project: Project revolves around applying the key lessons taught to create and build your own multi page website. After which you're going to be sharing your results with the community for feedback. 3. Setting the Foundation : Welcome back. Now, what we need to do is simply navigate to Cloud and you're going to be logging in, and you will land at the main interface window, the prompt window over here. Now, as you are going to be dealing with Cloud as part of the current application for web development, specifically front end web development, we need to establish some important foundations and tactics to ensure the success of our application. First of all, we are going to be utilizing the following basic model, Sonic five, which is available to any user utilizing cloud, whether the free version, the pro version, you're able to utilize it quite easily. If you are on a different tier or you would like to go for a different version, it's completely up to you. You can go for Opus five, Fable or Fab five. Keeping in mind, as you advance with the model, you are going to be utilizing more credits, which is very, very important to keep in mind, especially for complex tasks as we are designing a website, we're editing a website, we're going with codes with going through designs, customizations, editing of various elements. So it's a back and forth process, and it could be quite demanding from the AI model. So it will consume a lot of credits if you are on a very advanced model. For basic models or lower complexity models, you could get the job done without the overconsumption of the credits. So if you are on the free version and you go for the advanced models, you could run out of credits quite quickly. Then you have to wait for a reset time, and then you could continue. If you go for the current model or a lower model, we could go for, for example, Sonic five, which is what we're going to be using, which is the most efficient for everyday tasks. It gets the job done, yet it's not quite taxing on the actual credit consumption. That way, you're able to do more edits more feedback, more iterations with the customization of the website. That way you're saving time, saving effort, and still getting solid results. So keep that in mind. Then it's a very important concept that we need to understand. As we are dealing with the design for a website, specifically the front end web development, we are going to tweet it project, something that we do on a recurring basis, especially for professional context. You're not simply creating a design once, and that's it. You need to actually edit the website. You need to fine tune the output. You need to make sure that you have the ability to always revisit your previous work and to pick up where you have left off. And that's why we need to address it as a project. This is very critical and very important. What we're going to be doing right now, we're going to click O plus, which means add a new project, and we are going to create a new project for our practical application. Let's call it front and web development. Okay. So we are able to utilize this based on our preference. You can call it whatever the way would you like to call it, it's completely up to you, right? What are we trying to achieve? As part of the scope of the application, we are able to describe the project, goals, subject, et cetera. You could edit this or we revisit this later on. It's completely up to you. What we're going to do is just give a basic theme. We are going to design the front end of a website for either business project, creative application, et cetera. Simple as that. This is the main goal. This is the main theme. You could be specific. However, at this current state, it's not that necessary. So once you create the project, which is a core foundational step that we need to cover, because this will ensure that at a later stage, once you have your actual website and you would like to edit things, fine tune things, you are able to revisit this and pick up a certain segment of the website, edit it with a couple of clicks compared to having to go through the entire process all over again. So once you land at the product interface, you have the chat interface over here. You have the option to actually add files, take a screenshot, skills, connectors, plugins, and the list goes on. Take a look at the right side over here. We have instructions. We got memory, then we got the context and scheduled recurring tasks. These are very powerful if you are going to take your front end web development application to a whole new level. Let me show you First of all, we are going to add instructions. We are going to tell Claude what we are trying to do. This will provide Claude with relevant instructions and information for chats based on this specific project. So get specific over here. What are you trying to achieve, right? Are you trying to design a website for your company, for your business? Project that you're working on or simply trying to work on your front end web development skills. Feel free to add as much details as possible. However, to keep things quite simple, I'm going to show you the basic level of instructions that you could simply inject and you could get really powerful results. So what are the basic instructions? I'm going to tell Cloud, we are going to work on the web development. Or let's say a hypothetical business, we're going to be working on a cafe and a bakery, right? We're going to be working on a buildup for the website, the front end development for a specific hypothetical application, and you could inject and add your own unique application based on your preference. So we're going to work on the web development for a cafe slash Bakery. To create a professional looking website design, such that feel free to include any constraints, any preferences. The design is professional and editable, which is very important because we would like to edit it easily. Customizable. The relevant codes for the website once created, including HTML, CSS, or any other relevant codes are easily extracted and modified for future editing and use. So what I'm trying to do over here, I'm setting the foundation based on my preference. Like I mentioned, as part of the demonstration, we're going to be working on a hypothetical project, which is basically a business. It's a cafe and a bakery, and we're going to be working on the front end web development design for c. Feel free to utilize it for your own unique application, your own business, your own project, your own idea. Follow the same structure. So this prompt or the basic instructions or the prompt for the instructions, we're telling Cloud we need the design to be quite professional and editable. Something is not static, something that we're able to fix and work with. Easily customizable for future reference, if I would like to customize the website, I jump back on the project. I'm able to customize it easily. The relevant codes for the website, once created, including HTML, CSS, or any relevant codes are easily extracted and modified for future editing and use. This is very powerful because this will tell Cloud when you're designing something, make sure that the code that you are building is something that I could utilize, pick up, and customize. If you are moving this, for example, to your own hosting, for example, if you got more advanced usage, you're trying to pick a certain code from the code that you have created, such as a snippet for the HTML file or the CSS file, you are able to simply jump on your project, get that code and place it directly on your website if you have some sort of advanced coding or editing skills. So this gives you the future flexibility that you will need at a later stage. Then the memory for the actual project. Keeping in mind, the memory feature, you need to enable it once you go to the settings. So once you navigate to the settings, make sure that either you enable memory or disable memory based on your preference. However, if you enable memory, it will start to teach Cloud based on the chats over here. So if we have a chat, it will go on the list, but another chat on the list as well, this will be part of the project's memory. This is very critical for future development applications. And this is one of my favorite actual usage or use cases for the project context, the project application, which is the context. So we could add PDFs, documents, other text reference to this actual project. I'm plus over here. I have the option to either upload the files, add certain contexts or even connect it to external codes if you have the code setup as part of Github, for example. However, for our application, like I mentioned, we are not going to be coding anything. I'm showing you how to go through the front end web development completely from scratch through Cloud without writing a single line now that being said, we have established the required foundation to proceed with our web development application. We have our project setup, we got our instructions in place, memory is activated based on a preference. Now for the context, I'm going to show you what we are going to be utilizing to help us get up to speed and running. However, at this current stage, we are simply setting up a foundation for a successful front end web development application. As you progress through the project, keep it at the back of your mind, you have the option to create a schedule task where you are able to, for example, name it, give instructions, and if you would like, for example, Cloud to automatically scan through a specific code, for example, for your website that you are adding and then give you some sort of feedback where you either manually approve or Cloud automatically approves. This is something a bit more advanced for a later stage once you are done with the actual project. If you are adding certain codes or you are connecting Cloud to external codes through the context or through the connectors, for example, you add a connector, you add a plugin. Cloud has the ability to access external tools that you have connected to it. Then you could schedule tasks where Cloud can conduct specific actions, and it automatically approves it or passes it onto you for manual approval. This is an advanced tactic keep in mind that it is there. If you are someone who is a professional web developer, you would like to have Cloud go through a series of codes every now and then. This is more of an advanced tool that you could use to help you achieve those repetitive tasks on a scheduled basis. Now, that being said, we already at this stage. We have set up the foundation to start our front end web development application. 4. Adding Design Inspiration: And welcome back. So I've established our project, and we have set up the foundation for our application. This is the stage where we are going to add inspiration. You heard me right. As part of your front-end web development and no code application, we are going to get some inspiration. For example, have you ever looked at a certain website or your own website or a certain paper that you have written your design on or any certain schematic or screenshot that you have gotten for inspiration purposes as part of your design? This is the stage where we are going to start adding it to our contact. Now we are going to add a couple of files as part of our demonstration. We are going to be working on the front-end web development for website, for a cafe and bakery. For example, this is the stage where you add the branding elements. You're able to add a logo. You could add color palettes if you got one. You're able to add the brand messaging. You're able to add a screenshot of a certain design that you have seen somewhere for inspiration purposes, or even reference some websites that you found quite inspirational to help you come up with a unique design for your website or images or photos that you have captured through your camera or something that you have written on a piece of paper, literally. The context that you could add to help you with the buildup for your website are quite endless. Here are a couple of things that you could add to help you create the context for the website. You could add the logo. You could add an image that you have captured through your camera. You'll say you're walking down the street. You found a great plant, tree or flower. You get inspired to add that design to your website. You take an image, you could upload it to the context. Or you could take a screenshot, for example, for your own current website. And then add it if you are trying to edit an existing website, or even better. For example, let's say you are having a cup of coffee, and on a piece of paper, you sketch a website design. Take an image of that and add it over here, even on a napkin. Even a URL, for example, for your own website that you are currently utilizing that you would like to modify, you could add it as well as a part of a PDF file, add all of these details or images, screenshots. I'm giving you all of these inspirational ideas to help you see that you're able to add a lot of details to help you hit the ground running. So at this current stage, the goal from this current lecture is for you to bring your inspiration, get your logo, get your images, get your screenshots, for your website, get your screenshots, for the design that you're working on, get the actual Word document, PowerPoint, PDF, El file, whatever reference that you have, even the napkin that you're working on or the paper that you have doodled on Feel free to scan it and simply start adding all of these elements to the context of the project because this will help Claude analyze how to move forward qua easily and effectively. So at this current stage, start adding your branding elements, your logos, a screenshot of your current website if you would like to edit it, some inspirational elements that you have collected, and we are ready to dive into the front-end web development of our website. 5. Creating a Single Page Website: And welcome back. Now, we are going to be creating a one page website. This is very important for any business, any creative professional, any working professional, marketer, sales professional, and the list goes on. Typically, when you are trying to come up with, for example, a product launch a new business lunch or a certain product that you would like to showcase or a certain landing page for whatever event you are conducting, you would typically create a one page website, right? Let's say, as part of our current application, we have the launch of the business, which is a bakery and a cafe, which is hypothetically called mugs. This is a hypothetical business simply for demonstration purposes. All of these details are simply hypothetical for you to see how they can be easily mapped to your own unique situation. So we are going to create a single page website in a very creative fashion to announce the launch of the business. So how are we going to be creating a single page website? This can work for anything, by the way, for a product lunch, a business lunch, a certain details, a sales page, whatever it is, a details page on a specific event about your company, whatever it is. It's completely up so what we're going to be doing is I'm going to tell Claude act as a professional web developer specifically. Front and web development in which you are going to help me create a single page website, which includes the following. This is a very powerful prompt. It gives clear contexts and requirements. The logo from the project files. See how powerful it is when you add a lot of important files to context, Claude is able to pick all of these details and map them to our application, the logo from the project files, the color palette from the different images, added a professional sleek design. And then we are going to Tell Claude fully customizable. So I'm going to Tag Cloud over here, act as a professional web developer, specifically from a web development in which you are going to help me create a single page website. This is the stage where you're going to add your own unique application of a business, your company, your website, wherever it is, something that's related to your own application where you are applying these tactics for. Help me create a single page website for my new business called mugs, which is a cafe and a bakery, which includes the following. Then I'm going to tell Claude, ask me any relevant questions along the way. So this is a very powerful prompt structure because this will tell Cloud act as a professional web developer, specifically front-end web development in which you are going to help me create a single page website for my new business. I've added the theme, the contacts, right, including the logo from the project files, the color palette from the different images added, professional sleek design, a fully customizable site. And code. And I'm going to add, what am I trying to get from this actual website, or I could simply keep it as is. So if you would like to simply go for one page website, which is sufficient for your business, great. If you have a specific task for it, for example, announcing the lunch of the business, you could add the specific requirement. So I'm going to keep it specific. Single page website for my new business called UGS, which is a cafe and bakery. The single page site is to announce the upcoming opening day and date. Here we go. I'm going to keep the date and day blank because Claude will definitely ask me for them if I would like to change the date of the lunch or the opening or specific dates completely up to me. How about we go for day and time? To add more variation to it. So as you can see over here, I've started with a generic prompt. Then I have customized the prompt as part of proper prompt engineering practices to include some context, theme, some references, some specific applications for you to see exactly how would I go about it from having a generic single page website to a specific single page website. That way, you're able to get inspired and maneuver your way through your own unique app. Here we go. So Claude right now is going through the project. As we can see over here, as part of the project, we have started a new chat. This is very powerful because this will enable us to go through the process at multiple time frames without the need to keep resetting things over and over again. So what visual direction fields right for Mug? Why did Claude ask me this question? Because it's part of my strategic prompt. Ask me any relevant questions along the way, which is an advanced prompt engineering tactic which allows the AI model to help you elevate the output. So what is the visual direction? Warm and rustic bakery forward, cozy textures, elegant and minimal, bold and modern. Let me decide based on the logo. So if you have your own specific logo for your company, for your business, and you would like simply to take it from there, this will help you get the job done. However, for demonstration purposes, I'm showing you the extent of the flexibility and the alterations that you can go and you can do along the way as you go about the design process. Let's go for elegant and minimal. Then what sections does the coming Zoom page need? This is very, very powerful. This was intentionally not placed in the prompt because it will give Claude the leeway or the flexibility to suggest items for us to check. This is very critical if you are a complete beginner to web development or front-end web development, or you don't have sufficient inspiration to actually break down the actual sections of the page. You have already broken down the sections of the page as part of the context, then you can simply skip this completely by clicking on Skip. However, if these outputs are getting you inspired, feel free to customize the output because all of these results that you're seeing are based on the solid prompt engineering tactic I'm teaching you. So what sections does the coming Zoom page need? Just logo, opening data and countdown, plus address, that plus a short about us storyblurb, that plus email sign up for launch notifications, that plus social media links. How about we add all of them? I'm going to tell Claude. Here we go. All of the above or I can simply select all of them. It's completely up to me. Here we go. Then pass this onto Cloud. We'll build the full on page for me. Keeping in mind, we are simply focusing on front and web development at this current stage. For advanced users, this is something which is very powerful to streamline your web development process. However, as part of our application, we are focusing on front-end web development. Let's take a look at the feedback. Got it, elegant and minimal with everything logo, countdown address, a blurb, email sign up and social links. Before I start building, I need a few concrete details. I'll use tasteful placeholders for anything you'd rather fill in later. This is very powerful because this will allow me to take a look at the design, take the canvas and customize it later on based on my preferences. What is the opening date and time, address and location, social handles, a line or two about Mugs, contact email. This will pop up based on your own unique application. Feel free to add your own details if you would like. Feel free to answer what you have and skip the rest placeholder for anything missing clearly, so it's easy to spot and swap out later. So I'm going to tell Claude proceed with place holders for all of them. See how powerful this is? Now, I have a full on ready to utilize customizable canvas based on my project setup. So this is very powerful because if you recall, as part of the project foundation for the setup, we have requested everything to be quite customizable, diable, professional. So this is the basis for the foundation that you're seeing right now. If we did not go through the steps that I've taught you and we went through in sequence, the up from Cloud will be quite different. And that's why many students, many learners, many professionals, They are getting outputs from basic use of Cloud, compared to a completely different output from the professional use of Cloud. This is where the distinction takes place. If you're using Cloud casually with that solid knowledge in terms of how to use it as part of the sequence that I'm teaching you, you'll be getting results are quite different. However, if you follow the strategic fashion step by step that I'm showing you, you'll be getting professional grade results, which will help you see the difference, and you're able to stand out based on the output that you are generating, which is quite unique, professional to the level compared to a generic basic apot which is not fully something that you could utilize as part of your day to day activities. As we can see over here, here we go. Claude is running the engine to go through the entire process. Take a look at this. So as we can see over here, here's the coming soon site, single index dot HTML, everything, HML, CSS, JS, self contained, plus your logo saved in the assets. Excellent. What's in it tic? Look at the details where the placeholders are all are flagged with edit. Excellent. See how professional this is. It's building the actual code for me with referencing through the logo. So we got the logo. And take a look at the file and the actual website, single page website over here. So we got mugs, cafe and bakery. Something warm is brewing, a new neighborhood spot for slow mornings, ham pull, espresso, and bread baked from scratch every single day. Then we got the placeholder for the date. When I simply tell Claude, go ahead, update the day. We'll fix this automatically. Then take a look at the small snippet about the theme of the cafe. I can edit this as I prefer. Take a look at this for the details as well. Stay in the loop, be the first through the door. You could simply connect this at a later stage after you're done with the front-end web development, we got the social media over here. If we would like to connect them by the way, and once you click on any of them, by the way, it will simply tell you open the link externally because these are considered to be placeholders for the actual links. Keeping in mind at the stage, we are building a single page website, and our application is entirely code free and specifically for front-end web development. So as you can see over here, in case of any errors, Claude will spot them on the way. So I'm going to tell Claude fix any errors. This is basically something that you could do with Claude as it runs into errors, simply tell Claude go ahead, find any error and go ahead and fix the error. This is very professional and sleek looking single page website. As you can see over here, we got the placeholders for the actual logo as part of the single page website. Now, as Claude is fixing the edrors, I have the option to download this as an HTML file or could add it as part of my project. Simply telling Cloud, go ahead, add this to the front-end web development project, which is another application or another level to take your application further, where you are able to get the output you're generating to fine tune your project. So every single output that you're getting from Cloud could be added to the project to get your results better and better over time. And let's assume you're a professional web developer, you could simply navigate through the code over here. You could click on comments if you'd like to comment on something or edit something. Like I mentioned, our application is code free. However, for you to see exactly what is happening in case you have additional interest for additional applications or you're able to code, or you would like to further learn how to utilize these codes and apply them to your own unique practices, you're able to see basically all of these features and options in front of you for you to get inspired and to apply it to your own unique situation. So we're able to click on the Toggle icon over here. I have the option to take a look at the entire code. For the website design. I have the option to copy it. I have the option to download it for further editing or utilizing it as part of my current, for example, a website hosting. If you're using any website hosting or you're using any website builder, like Wordpress, for example, you're able to simply take the HML file and add it to your Wordpress page, for example, right, as part of a newly created page. So these are quite unique applications for you to get inspired. However, at this current stage, everything we are doing is still completely 100% within Claude and code free. So we have our website, single page website fully designed. As we can see over here, Claude added a hypothetical date simply to fix the edors which is quite obvious. We get a hypothetical date, a countdown timer, and I could simply edit any part of the process based on my preference. So this is simply the initial output that we are getting from Claude. It's a single page website based on the current context. 6. Design Customization: Welcome back. So we've gotten our initial output from Cloud, and typically any website requires some customization. And as part of the current lecture, I'm going to show you how you could customize the output from Cloud based on the preference. You could simply change the fonts, change the graphics, change colors, add certain elements. It's completely up to us. So as we can see over here, from the basic output, we got placeholders for the actual logo. And from my own preference, I don't want to have to deal with any segments from the placeholders, and I would like everything to be simply ready to go. So I'm going to Ta Claude. The logo image is broken in the site. Make sure the logo is fully visible and edit what is needed to make that happen. This will take Cloud. You got some flexibility. My end result is quite straightforward. I would like you to have my logo being presented directly over here as part of the design. As you can see, over here, it's a back and forth process, which is typical when you're dealing with any AI model, and it's part of strategic interaction with the AI model. You're able to get the results that you prefer in line with your preferences every single time. Claude is simply running through the process and taking a look at the actual files over here. And as you can see over here, it's running into the different format of the process, and it's still finding some sort of an error with the formatting, because the logo seems to match the actual color palette which is creating the error, which is something quite good to deal with right now. Why? Because if you were to do this manually, you would be dealing with the error yourself. So once we run into an error, simply feed it back into Claude, that way Claude is able to actually fix the error on our behalf. Now, as we can see over here, it's getting there almost. So I'm going to tell Claude, well, the logo should be exactly placed in the site with a circular frame. So far, the logo is not displayed. Here we go. So any eddor that we typically run into manually, bringing some sort of branding assets, your logo, different format, or different color palettes, and you're trying to display them, these are typical eddors that any developer, any front-end web developer will struggle with as part of the customization. Well, we don't have to do so. Simply by following the tactics I'm teaching you, we are able to simply tell Claude how to go about the customization process and let Claude do the heavy lifting for us in terms of editing the code, customizing the output until we reach the finalized design that we prefer. As we can see, Claude tried to incorporate a couple edits from the logo, and still ran into the issue in terms of bringing the logo to match exactly our preferences. So this is very important. As we can see over here, we are able to have various edits in order to get to the results that we are trying to get. So Claude is trying to fix it over and over, over and over again till it gets it done. See how powerful this is? Here we go. So we were able to see directly in front of us all of the iterations that Claude went through that you would typically go through manually to get this done, saving us time, saving us the whole hassle ourselves. And here we go. We're able to see the logo beautifully presented in front of us. 7. Adding Animations For The Single Page Site: Welcome back. So we have successfully added a lovely logo as part of our single page website. Now, let's add further customizations, right? We're going through the front end web development, and we could go through a series of customizations based on our preferences. How about I would like to edit this, for example, to add more of an animation to it. Something warm is brewing, for example, I could simply take a screenshot by the way of this, drag and drop it directly over here, or simply highlight the element, copy it and paste it into Cloud. I'm going to tell Cloud. I would like to add animation too. Here we go. Highlight this. Something warm is brewing, such that it turns to. Let's say something warm is cooking. Here we go in an animated style. Suggest multiple animations to select here we go. So this will tell Cloud. Go ahead. I would like to animate this. If you have a specific animation in mind, it's completely up to you. However, if you'd like to go through various options, as you're trying to find out the best design for you, the best animation, this prompt will tell Claude, go ahead, list some animations for me, and then I'm going to find the one that I like the most. So which animation style fits Brewing to cooking swap best? Soft cross fade, Vertical roll, type prior, Blue morph? Well, I could tell Claude. I would like to test all of them. So display them one by one interactively in the chat till I confirm. So what would this do? By adding the word interactively to the prompt over here, you are telling Claude, I would like to see the actual animations displayed one by one before actually confirming which one shall I go for, which is very important as part of your customizations. You would like to see what are the best options for your website, right? Especially if you're trying to get inspired for a certain design or you are trying to find out what are the options that you have. By adding this solid prompt, you're able to tell Claude in the chat. Show me exactly how does it look like. I confirm it, then you're able to map. Something warm is cooking. This is option one. It's called soft cross fade. Okay, which is good. Let's take a look at the next one. I'm going to click on next. Here we go. So we're able to see the direct animation and the interaction directly within the interface within Cloud before migrating it to our website. Something warm is cooking, which is the vertical role. I like this one more. Let's go for option three. I'm going to click on next as well over here. As part of the customization capabilities. So as you can see, over here, you're able to add animations to your design. Any part of the actual single page website is completely customizable based on your preference. You're able to change the font, change the color, add a certain section, for example, change the graphic. Let's change the graphic over here. If we'd like, it's completely up to us. So anything that you see as an app from Claude, you have the option to customize it simply follow the tactics that I'm teaching you. Something warm is brewing. I think this one is fine. I'm going to tell Claude proceed. With option three, I like both of them, three and two. They are quite professional, and they fit the theme of the current business at hand. So something warm is brwing we're going to shift it to something warm is cooking, right? So as we can see over here, Cloud is running through the coding for the files in order to swap the output over here. And every single line of code, like I mentioned, you're able to find it directly from the toggle menu if you would like to take this to your own direct website for further editing. Take a look at this. Something warm is brewing. Here we go. It's running the command, and we can see the edits starting to shape up over here. Now, let's validate the output. Something warm is brewing, and it's still running the edits. Here we go. It's validating it over here. So then once it's done, it shows us that it's done compiling the output. Then we have the option to see finally running as part of a single page website. Here we go. Something warm is cooking, something warm is brewing, and it will tell us everything is perfectly fine as part of adding the animations. And the same tactic works for any segment that you would like over here to help you edit that specific segment, you would like to add a certain animation to it, to add an extra professional look and vibe to your own single page website. And Cloud over here is simply verifying that everything is running smoothly and perfectly. So everything checks out. The HTML file is clean. Footer, everything is fine, screen readers, gets a stable, then flickering sentence. So all of the issues that you would typically run through front end web development manually yourself, Claude is helping you bypass them with ease. And the code is ready. I can simply click on Download. I could take it to my website for further editing. To create a U page on my website. If I actually have a full on website as part of my project for this current business, then I can add a U page and simply have an opening Zoom page. The applications are endless. So this is a very powerful customization tactic that you could add as part of your front end web development through Cloud. 8. Adding Graphics For The Single Page Site: Welcome back. Now, let's take it one level further. Let's say I would like to add some sort of vibrant appeal to the single side page. I would like to add some cards, for example, as part of a section which showcase our products as part of a cafe and a bakery. We got croissants, we got espressos, we got baguettes. We got bread, we got lattes, and the list goes on. So I would like to showcase these products over here as part of cards. Right? So I'm going to tell Claude, add a section. Right under the opening date and time, the section will include flippable cards which showcase the following products. For example, we're going to say croissants over here, we're going to say lattes or latte. We're going to say espresso. Let's keep a single item. Here we go. Then we go for bread, and the list goes on. So you get the idea. So this will tell Claude, here we go, create a new section between these two sections. And add flippable cards to reflect these products. Any front-end web developer would need to do this if they're showcasing their products. They're showcasing their services, their portfolio of projects. You're able to add these beautifully animated flipable cards, which typically will take you a whole lot of time trying to do this by yourself, or you're trying to find a ready made version through the website Builders, for example, I'm showing you the tactics, how you're able to do them with ease through Cloud directly as part of the interface. This is a very powerful application, very powerful tactic for you to get inspired from, right? So we have the option to animate. We got the option to add logos and certain features and images based on our preferences, customizing element by element based on our needs. Then we have the option to add sections. Anything that you could typically do as part of a website Builder, I'm teaching you how to do it through Cloud. Adding animations through cards, in addition to sections, you're able to get the codes exactly for further editing and customization. If you know how to use these codes, also, you got the flexibility to do so by following the lessons I'm teaching you. And Claude over here understood the actual context that we're trying to achieve, and it will start to build over here the section. It's running through the code. Let's expand it, by the way, if you'd like to see what's going on. Once you click on this, you're able to see what Cloud is trying to achieve through the files. Now, typically, once you click on this, it's going to expand it, but as it's running a whole lot of codes, it's not going to be expanding it directly at the moment we're clicking on it, and it just expanded directly over here. So yes, if it's running a series of codes back to back, it might simply have a small clickable delay when you click on it to show you exactly what's happening under the hood of Cloud. And just simply a couple seconds, you click on it again and you're able to see all of the under the hood coding which is taking place through Cloud till it gets the job done. Now, we're able to see the file. It should be ready. We expanded by moving the toggle to the left side. And here we go. Right under the date and time, a taste of what's coming made fresh every morning croissants, here we go, HovertyPek, butter laminated and folded. It even added some additional text based elements to supplement the idea that I have. See how powerful it is to build it up in the way that I have taught you up to this current stage where you're able to have a full on project, where Claude is giving you a push in the right direction. Got a latte, hand pull espresso and steamed milk, excellent bread, espresso. As you can see, our single page website is shaping up. Let's change the current graphic as part of our customization. I'm going to tell Claude. Here we go. Copy and paste this. Under, here we go. Something warm is brewing. There is a graphic that I need it changed. Turn it into a coffee mug. With animated steam coming out of the mug. You could add your own unique insight and inspiration if you got something in mind, yet you have no idea how to code it. Follow the tactic that I'm teaching you right now, and you're able to fuse it as part of your design. It simply extends beyond the basic front-end web development tactics, adding sections, fonts, adding images, adding animations. No, you're able to take it one level further through further customizations. By bringing your own vision and fuse it within the prompt to actually tell Claude, go ahead and build it for me. So I'm going to be changing this current graphic, which doesn't seem to align with the current theme that we have. So we have animated everything up to this current stage, fixed everything up to this current stage. All of the other elements are easily edible. They're quite simple to edit. If you have followed through up to this current point, now I'm going to simply elevate the design to make it as a professional front-end web development output. As we can see over here, Claude is running through the design. To finalize it based on my vision and based on my preferences. Here we go. It's running through the code, saving me time, saving me effort. So our finalized single page website is shaping up beautifully. We got the small logo, the main logo. We got something warm is cooking over here. Then we got a new neighborhood spot for slow mornings, and pull the spreads, so we got a countdown timer. We could change the date if we'd like. Then we have flippable cards, excellent statement, the location that we could edit. Then we could have a small form for the emails. If you are done with the buildup of the website, you're able to utilize it for further development later on if you do prefer. We got the placeholders for the actual social media links, keeping in mind everything that we are doing at this current stage, solely front-end web development, and the code is beautifully ready. So as we can see over here, we got the animated Mug, and the single page website is running perfectly. So at this current stage, we have created customized and built up a single page website for hypothetical business, which is mappable to any application that you have in mind completely from scratch. 9. Deploying Your Single Page Website: And welcome back. We have successfully created our single page website, which is for the grand opening for a hypothetical business, which is a cafe and a bakery. We have created the beautiful design. I've taught you the tactics for customization in terms of adding animations, graphics, every single item over here, if you'd like to change it, simply follow the tactics that we have covered, and you have the ability to change it. You can simply change the dates, the times. You can remove sections if you are not ready to utilize them yet, for example, you could eliminate sections. You could eliminate, for example, the social media icons. If you don't want to connect them to social media, it's completely up to you, right? But you get the idea. Let's say after following all the tactics that I've taught you and you have customized your one page website, you are ready to actually publish it and launch it. The best way to go about this for one page websites, typically that you're using it for announcements, events, landing pages, and the list goes on, you could launch it in a couple seconds simply through clot. Once you are done, navigate to the top over here, and once you click on publish artifact. Before we publish it, you could add it to a project, which is the project that we have already created. That way you have everything under one umbrella. For further future developments, you're able to simply jump into the project, customize anything, extract any code that you would like based on your preference. And then move forward easily rather than simply having to do everything that we have done from scratch every single time. So you have multiple options that you could utilize. You could download as an HTML file for further editing or if you'd like to add it to a certain page as part of your hosting, that's completely up to you as part of your website Builder. That's completely up to you. You could add it to the project for future development if you're doing this on a recurring basis for your business. And finally, if you are ready, you're good to go, go for publish Artifact. Click on Publish artifact and take a look at this. Publishing this artifact will make it accessible to anyone on the Internet and potentially visible in search engines. It's a full on website. Your chat will remain private. This is the name of the actual artifact. It's called index dot HTML based on the actual setup for the file. Then once you click on Publish and Copy Link, here you go. Publish and copy link. This is the actual link, and it's completely published. I can simply unpublish it based on my preference or I can simply get an embed code. If you are using a website builder, any website builder, once you get an embed code, you are able to embed this actual page directly as part of your current existing website. Or if it's a standalone page, copy the link, you could share it with your friends. You could share it with your customers. You could share it with your colleagues. It's completely up to you. And once you click on it and you simply navigate to the actual finalized page here this is the beautifully designed website in a couple clicks, right, in a couple of minutes without the need to go through everything from scratch. It's a very, very, very powerful application for you to get inspired, and it's part of the Cloud artifacts. So you are able to simply share a link or this or you're able to simply navigate back based on your preference. It's completely up to you. But at this current stage, you have successfully launched your actual single page website. You can simply navigate back to Cloud, and you're able to see exactly what we have covered up to this current point as part of the buildup. You go back to Claude after launching your website, it's already launched artifact. It's already published. I can simply edit this and publish it again, or simply the edits will be published again. I can share it directly or place it directly on the website or copy the code to my website. All of these are options that you're able to utilize with ease. 10. Building Your Multi Page Website: And welcome back. Now, kicking things off, we are going to be creating a multi page website. We are going to create a website W which consists of a series of actual pages, a full on website, front-end web development application. That way you are able to take your skill set in terms of front-end web development to a whole new level. We've already added the logo for our current demonstration, the hypothetical cafe and bakery, reference images as part of the context. We could add whatever additional piece of information that we'd like to add, an additional inspirational image, and an inspirational screenshot that we have an inspirational note that we have drafted somewhere. The ideas are quite endless. So you're able to add all of these additional elements if you would like to the context of the project. You're doing so, we are going to start building our multi page website, not a single page website, but a series of pages, a full on website, which is something that many businesses, many professionals, many individuals, they are either engaging with on a day to day basis or they're working with as part of their professional setting. So what we're going to do is we're going to tell Claude act as a professional web developer specifically, front and web development. Keeping in mind all of the applications that we're currently moving forward with are front-end based, front and web development. Front and web development in which you are going to help me create a full website for my new business, which is Mugs cafe and bakery. Using the attached files in the context for reference and inspiration. The website should include the following. This is the part or the stage where you are going to get creative. How would you imagine your website? For example, the website would consist of five unique pages clear about us section, contact us page, gallery for images, and suggest relevant pages based on the context and theme. All pages should fully edib and customizable to avoid any coding issues that you might come across for future edits. Any section or segment from the website can be easily retrieved as a code for future deployment as well if you are planning on taking your website, for example, to a certain hosting provider or you are trying to customize it in the future, these prompt tactics will make sure that you are setting the right foundations for your application to avoid any issues in terms of coding and lack of flexibility with the output. Then I'm going to tell Cloud, go ahead over here. Going to tell Cloud, go ahead. Add any relevant input that will make the website design better and more efficient. So this sets the stage for our multi page website. We are creating a full on website for the hypothetical business, a multi page website, right? It's basically for this current business context, which many of the learners and the students will resonate with using the attached files as part of the inspirational context for the project. Any constraint that you would like to add, feel free to add it. A requirement for your own unique website, feel free to add. The website, based on my preference, would consist of five unique pages, which is typical standard across many websites. Clear about a section, contact page, gallery for images, and suggest relevant pages based on the context and theme. If you would like to have Claude suggest based on best practices for the specific application at hand, what could be an additional good fit. All pages should be fully editable and customizable for your future edit. It's very critical if you are someone who's familiar with HTML, CSS, and you're trying to code by yourself, even though the current application is purely zero, no code, you're able to utilize the code, extract the code from the outputs for your own unique preferences and applications. Any section or segment from the website can be easily retrieved as code for future deployment. If I would like to extract a certain snippet from the website, or I would like to migrate the entire file for the website that I've built through Cloud, every single piece of content or code should be easily movable, and it doesn't break simply because I moved out of Cloud this is very critical because this will help you eliminate the whole hassle of trying to rework things from the get go. Now, Claude is actually building the website for us based on the current prompt and the current context. Now, as you can see over here, it's going through the details from the project that we have set up, any relevant images, any relevant designs. Keeping in mind, there's a very critical component for a multi page website, which is the navigation. How to navigate from one page to another. And typically, as a front-end web development stage, this could be quite hectic to manually follow through because you are the one responsible for the navigation. And I'm going to show you very powerful strategies how to eliminate the entire hassle such that by the end of our application, you have a full on front-end web development package completely ready for the website. And a Cloud is running the core design over here. It's utilizing JavaScript, CSS, HTML, simply to build up everything that I have asked it to do. And once you click on any of them, by the way, you do have the option to see at which stage of the coding process code is at. Even though you might have a couple seconds of delay to see what's going on because code simply running through the series of the codes. Over here, for example, we got the JS, the JSON files, then we got over here the CSS files, and then we got over here the HTML files as well, running. So it's running multiple codes at the same time to come up with the design. Now, imagine if you were to do this by yourself. Manually, coding every single line to make it work. It's que and it will take you a lot of time, a lot of effort to do so. And simply by phoning the tactics I'm teaching you right now, you're able to simply breeze through the entire process. Now, as we're able to see over here, Claude is almost done, and the screen will simply keep on shifting from one display to another to reflect the stage cloud is at as part of the compilation process. It's building the entire website over here. It might show you there's an error. I might show it's still loading. It might show you. It's compiling because it's still going through the buildup phase, the same way that you would do it manually. You will do it at stages. And as you click on every single stage, you're able to see what is going on and which stage which stage Cloud is at basically to help you set the pace for your own unique flow. Where are you right now at the stage of the website development, keeping in mind, everything that we have based the analysis on is based on a hypothetical business. It could work for your own unique business, for your own unique project. All of the characters, all of the elements are completely hypothetical. For demonstration purposes for you to see that it's easily transferable and mappable to your own career, to your own creative business, to your own project, to your own corporate setting, whatever domain that you're at, you're able to understand something from it that will help you elevate your front web development skills and take it to a whole new level. So as we can see over here, Claude is simply building all of these pages 1 at a time. It's running the full on codes for five unique pages with all of these requirements based on our preference. We can see the home about us, menu, gallery contact. It added also reserve a table based on the current prompt that I've passed on to Claude, suggest something that aligns with our theme. And since it's going to be a cafe and a bakery, Claude suggested, You know what? How about reserve a table? Page, which makes perfect sense. So this is very powerful because always leave room for the AI model to share with you some output that you might find helpful. And as we can see over here, we got an MD file. Everything is built up from scratch. We are simply monitoring the output rather than simply building everything from complete zero. This is very, very powerful. Your site's buildup is built. Five pages HTML, CSS, JS, using logos, photos, what's in home about us, menu, gallery, contact us, design direction, why it's easy to edit and extract. One style CSS. Every section, every page has clear breaks. Excellent. No built step, no framework, excellent. The read me files covers customizing colors. Couple of things worth doing before you launch, connect the contact form to servers and swap the placeholder tiles for your real address and photos. Both are flagged, excellent. So since we are fixating on front-end web development, obviously, for further web development stages, any form or any external, let's say, pages that require some sort of filling a form to collect data, for example, as part of the signing in for a newsletter. This is considered something related to the back end front development. And like I've mentioned, we are not covering that. We're focusing only on front-end web development. As part of our application. Now, let's take a look at this. We got a full on zip file that we could simply download that includes everything, all of these pages. And this is very critical, by the way, as part of our design. Why? Because we have created every single page by itself as a single code rather than simply having everything compiled and lumped up together. Every single page could be customized by itself. So we got the basic HTML code for our website, right? This is some sort of the backbone to. However, we would like to add some sort of customization graphics to it because obviously we're not going to be utilizing just a plain HTML canvas for our website. No. Now I'm going to be showing you after we have collected the backbone of the website, which is the full on HTML files, and we got the actual zip folder for the website, including all of the codes. Now we're going to elevate this and actually turn the website into something presentable, including graphics and customizations. 11. Presenting the Website For Design Applications: Welcome back. So Cloud has built up the full package for our website. It includes all of the HTML codes. And once you download the zip file for the website, you got all of the codes which you could utilize if you are trying to load this as part of your website builder. However, that's not the goal that we're trying to achieve. Like I mentioned, we are utilizing Claude for full front-end web development. Even though this is a full on ready website, I'm going to show you the tactics how to do everything as part of Cloud from A to Z. So we have successfully created the website, correct? We got the HTML codes. Now, let's tell Claude we need the website, not to be built to be taken externally. No, I want everything to be displayed, customized, edited, fully visible within Cloud. So at the Fong prompt, I want the created website to be fully displayed here in the interface, including the colors, logo, designs, et cetera. So this will tell Claude, great. We got the output for the website. However, I don't want to take it externally by downloading everything to work on externally. No, I would like to see everything internally as part of the interface because as part of the analysis for Claude, it will try to get us the job done as the fastest way possible by simply downloading all of these separate HTML files. I could take them to a website builder, and I could download the zip file, which includes all of the required customizations, the CSS files, which is something more of an advanced front-end web developer would be using as part of building a website. However, like I mentioned, that's not what we're trying to achieve. We're trying to minimize the manual interaction, and we are trying to increase the automation through Cloud for front-end web development. So by adding the following prompt, Cloud is going to build the solution again, straight in the interface over here by showing me all of these pages, all of these various designs, all of these various elements based on the analysis and the project context and the theme and the prompt that we have provided Claude with. So as we can see over here, extract each page's main content. It's running through the code it has provided us previously, assembling the page, assembling all of the HTML files and the CSS files. So as you can see, it's doing the job of the web developer who would typically be taking all of these files and building the website using these files. So this gives you more of an intermediate more of an intermediate flavor for how powerful your application can be, right? As we can see, the website has been launched successfully without the need for me to actually go ahead and start downloading all of the components of the file and then take them to a website builder and simply launch the website or build the website. No, by following the tactic, I'm able to achieve two goals. Have every single file ready for me. I could download all of them. If you got yourself, for example, a web developer, you could pass on the files to the web developer to work on those for future edits or if you're able to conduct the application by yourself as part of your website hosting and website builder, you can utilize them. Or not if you don't want to dive into any application that involves externally moving a file which has a code in it, that's perfectly okay. I'm showing you all of the tactics that you could follow. By simply telling Claude to do this right now, you got yourself a full on ready website. Let's take a look at this. See how professional this is. We got ourselves actually a full on website which is broken down into different segments and components. Keeping in mind, as part of the initial output from Claude, you might run into errors, which is basic, which is typically perfectly fine, nothing to be concerned about. What I'm trying to achieve right now is to confirm that Cloud is actually building the website based on my preferences. So we got the header over here, then we got the navigation. If you click on the navigation, nothing will pop up, right, which is something quite obvious because Cloud is assembling the website. However, have any eddors, these are uncaught eddors that you would manually run across. No, I'm going to tell Claude, go ahead, fix all of these errors. But before we do so, let's take a look at all of these items over here. If I click on stuff, what do we get? Here we go. So if I click on, for example, coffee and drinks and menu, we got some menu headers, but we don't have Toggle features. We can fix that. Then we could go back to the actual homepage. And by the way, once you click on this because it has a placeholder for a link, if you click Open Link, you will not reach anywhere because the page has not been launched yet. The website is not active. I can click on Reserve table. Okay? It takes me to this page over here. Then I could navigate to the homepage. So we have a solid setup over here, which requires fine tuning, correct? Let's click on the C the full menu. Then we navigate to the menu, coffee and drinks, pastries and bread, breakfast and lunch, seasonal, which is something that we could edit based on our preference. So we have the actual setup in place. And if you notice, by the way, the background home image, this is the image that we have added as part of the context, which is basically the part of the project setup. We got a clear headline, which is very professional. So everything seems in order, however, it requires a couple more edits, as we can see from the case today, a few favorites. This is for the gallery, as we can see, yet because we don't have images, here we go. We don't have images placed as part of the gallery. That's why we're not able to see any images because we are building the actual website for integration with any additional images. Now, let's take it one level further. I'm going to Ta Claude, fix any errors in the website and make sure to include images provided from the project context and the places where images can be added, label them with a place holder. So this is the first output that we're getting for the multi page website, which is great, by the way, because we have the full on files, as well as having Claude display the files for the website directly. And as part of the process, once you run into any integration errors, we don't have to do this menu ourselves. Simply tell Claude Go ahead, fix all of these errors and make sure the site is fully functional. As part of the design phase, obviously, we're not simply going to have a ready to go output from the first run, especially if this is your first interaction with Claude. No, we're going to have the base output as we can see over here. Now we are fixing the errors, which is very critical to make sure everything is quite functional. So as we can see Claude found a bug over here, it's trying to go through the entire errors in the code, which is something that you need to do. Manually to make sure that the website is fully functional. Keeping in mind the tactics I'm teaching you give you the ability to further customize the website. Let's say you have a certain image that you would like to add or a certain icon that you would like to place or a certain menu item that you would like to replace, everything you can do directly within Claude based on the tactics that I am teaching you right now. So we are going through this as part of stages. Now we are removing any errors within the current stage to confirm that everything is running perfectly fine. And I'm telling Claude to use whatever resources I have provided with. For your own unique application, if you would like to minimize the time of the back and forth interaction with Claude, you can simply tell Claude or add more images, more files, more contextual details to the context segment of the project. And then Claude will simply be able to fill all of these details quite quickly and effectively. Now let's take a look at this. Now we're going to take a look at the website over here. Again, the zip file. We got the page by itself. The live reflects all of the details, same navigation, same colors. Everything is perfectly in place. Okay, let's scroll through this from the case today, favorites full menu. Good. This is the basic backbone for the actual website. However, it's not complete because we need to add the navigation to it. This is one. Then we have the option to edit the other items over here, such as the reserve table, view our menu, which require further customization. Now, at this current stage, we are good to go to dive into the further enhancement and the customization of our website. 12. Website Navigation and Editing: And welcome back. So we have successfully launched the foundation for the website. However, we need to conduct some edits. We need to integrate navigation to make sure it's fully on functional, right? So we have gotten the codes. We have told Claude, go ahead, run the codes within Claude to see the website. Now let's take in one level further. We're going to tell Claude, make sure the navigation is fully working. That's one. The menu displays all the pages properly and the menu links to the concerned page properly. That's the first thing that we need to do. Here we go, just to make sure that we got the proper navigation in place before conducting any further edits to make sure that the website is fully on functional. So what would this do? This will tell Claude, go ahead. Sure that based on the current website, we have seen that whenever I click on something, for example, I'm not seeing the full on navigation. I would like things to be fully presentable that way, when I click on a certain menu item over here, I'm able to navigate from one page to the other quite easily. So this is very important. And by the way, once we are done with this, I'm going to show you that when you are displaying the output from Cloud, there is a very important area that you need to be very, very aware of, which is the expansion over here because when Cloud is building the actual website, it's showing you sometimes different versions based on mobile or desktop. So when I need to see the full on site being functional, I'm going to be expanding this fully to confirm that everything has been built up. And once I zoom in, and I notice, for example, let's say, the menu, it's not working based on mobile size, I'm going to tell Claude, make sure that the website works for mobile as well, just to make sure that you're able to adapt the website based on any device that you are dealing with. This is a pro advanced tip. Keep that in that way, when you are building Cloud, always, once you are done with the design, try to expand it to see fully the layout completely because as you change the dimensions and the size, as you can see over here, the actual layout starts to change, right? The menu start to change, the arrangement for the text starts to change. So always keep in mind because some features might be dependent on certain devices. So that's part of your development process. I is very simple. Simply by a line of code, you tell Cloud by a prompt, actually, tell Claude, go ahead and make sure that the device works on mobile and desktop. That's mainly it. So there's nothing complex about it, but something to keep at the back of your mind as you go about the process of building your actual website. So as we can see over here, we're telling Claude confirm the navigation. It's taking a look at the navigation to make sure everything is quiet in line with the requirements that we have. So it's taking a look at the steps to make sure that all of the previous pages that we have created, about five pages, they are properly linked, and I'm going to show you how we can confirm that everything is fine. So it's going through the process. It might run through errors. And if you can see over here, real mobile toggle issues. It has identified the mobile issue by itself. Simply by telling it, go ahead, make sure that the navigation is working properly. It's running through the codes. It has found out that, you know what? Based on mobile, this might not be working properly. Based on desktop, it might be working properly. So this is something that I'm quite aware of and through the process, Claude managed to identify by itself. So I gave you the tip, I gave you the pro advice, but at the same time, keep it at the back of your mind, as well as Claude is simply helping you avoid that obstacle by default. But as someone who is using Cloud in professional fashion, once you are done building your website, always extend it to the full dimensions of the website to see the full features, and then you tell Cloud, make it compatible with mobile. So as we can see over here, by default, Cloud is trying to make it mobile friendly as well. It's running through the navigation, instead of having to do this manually. We are confirming the stages for the buildup one level at of time. So we got the initial backbone code. We have told Cloud to run it within Cloud without any external reference to a website builder or usage of website builder or hosting in any shape or form, then we are taking navigation into consideration, making sure navigation is working properly as a full on site buildup. So we're advancing one level at a time to have a full on finalized website that we're able to utilize, and at the same time, you're able to get inspired for your own unique application. Now, Claude is finalizing the app over here. We're able to expand it to see exactly the setup for the navigation, which is part of the process, the same way you're designing a website, the front-end of website, you do it through stages, right? You go through the buildup, you're going through sections, through graphics, navigation, and it takes it takes time. It takes a couple of weeks to actually build up to build a fully on functional website. And through the integration of Cloud, you're able to minimize it 2 minutes to an hour tops as you get the hang of the tactics that I'm teaching you. So now Cloud is finalizing the Appo over here. And we are almost ready with the navigation in place for our website. Always keep in mind, make sure that Claude finalizes the task first before advancing to the result. Now, it's writing the actual functions. It's architecting the navigation to validate it. You're able to see all of the different stages for the buildup. Obviously, as part of the development for the website, the front-end web development, sometimes you need to add texts. You need to add some references for the design, for the project you're working on the tactics I'm teaching you give you the skill set to navigate your way through any project that you're dealing with that requires front-end web development. So once we are done with the navigation, we are advancing to another level, which confirms that we have the backbone, the functionality of the website. The navigation is working. However, we need to customize it more. We need to add some features to it, some animations, which is part of any front-end web development. So Claude is now compiling the final result and final result and load the actual preview for us to confirm exactly that the navigation is working. And like I mentioned, always keep in mind, once you get the result, always expanded to full form. Through the toggle option over here to see the finalized result. And then once you adjust the size, and if you notice that something is not working, for example, then you could tell Claude Confirm. Is it working on mobile or not? Is it working on desktop or not? And if Claude gives you the confirmation, then yes, it might be that you're limited with the interface that you are having, but it's a precautionary step to make sure that your website works across multiple devices. Now, cloud over here is confirming the navigation logic. Everything works perfectly fine. Then I needed to weigh properly, but I did find one genuine hardening issue can throw inside a sandbox frame. So it's going through the iteration process that it typically does as part of finding errors, fixing errors where needed. In case an eddor is something that impacts the output, will fix it. If it doesn't have a negative impact, it will simply bypass it, which is something again that you would manually do as well. So we're expecting the finalized result over here. And as we can see, there's a flip in the result, and I'm expecting that cloud will confirm it right now that it's good to go. Confirmed navigation is working. My test just needed to weigh properly. Okay, we have already addressed that issue. Let's take a look at the current command running in the preview. Now all navigation is now verified. I always prefer to expand to see what's under the hood, what's happening at the various stages of the analysis. It's a pro tip. I advise you to go through it because this will tell you which stage Claude is at, and in case you find or spot something which you don't prefer, you're able to address it directly. Take a look at the feedback from Claude. Everything seems quite align. It has found a bug in the process and it has fixed it. Also, I got the zip file ready, including all of the codes, good to go. It will keep on providing this. The more we update the file, the more we iterate the file, like I've mentioned, because you're dealing with this as part of a project. So any future editing or addition or updating or alteration to your actual project, then you're able to symplte Claude, go ahead, update the full on website zip and send it to me. I'll take it. And then you can move it to a website builder. You can move it to your own hosting instead of having to do this from scratch every single time. Now let's take a look at the finalized output. Here we go over here. Now I'm going to toggle the top menu, expand the features, and here we go. Beautiful, right? We got the Abo page. Excellent. Take a look at the image, which is part of the project's context. Added a story. Here we go, how it's made. Meet the team, random individuals, hypothetical names, hypothetical situation, hypothetical project. Yet it's beautifully designed. Take a look at the gallery, for example, take a look at this. These are the images, by the way that we have added as part of the context. If you take a look at this, add a photo over here, add a photo over here. It's giving us placeholders to indicate exactly what are some good suggestions. The titles marked as photo are placeholders, drop down your images and you could swap them. Powerful. Contact us page. Here we go. We got a form. That we could utilize later on the content, for example, basically, if you got an additional form or placeholder for this, we could rectify this. That's perfectly fine. Then take a look at the gallery, as well. We have seen that. This is the coffee, bakery, cafe life. If you have certain footage from the cafe about us. This is one of my favorite pages mix, proof, shape, core, bake. These are additions suggested by Claude based on the prompt added, which fit the theme, right? So all of these are important details. As we can see, it has simply provided some hypothetical names for hypothetical staff that we could simply alter and change based on our preference, our values, come and say hello, get in touch, which is part of the contactless page, I believe. Let's check this out. Here we go. Excellent. Navigation is working perfectly fine. Home, we go back, reserve a table. Before we reserve a table, let's take a look at this. A few favorite things, sour dough country, butter croissont, mugs house latte, excellent Ca full menu. Beautiful, right? We got the coffee. We got the pastries. If I scroll this down a bit to the side, if I click over here, if you notice, we got our menu, right? We got our menu present as part of a mobile view compared to just simply a desktop view, which is a great plus. It's a great addition to make sure everything is quie aligned and in order. The About us page clears everything. We can see the logo of the actual place, hypothetical team members from oven to us. This is simply a fictitious hypothetical case that's easily mappable to your own unique situation. These images that have been provided as part of the context for the project, they have been used to build up the website. The homepage looks amazing. We got the actual favorites cases, the prices extracted from the menu, our story using the images provided, the directions as well if you would like to add some sort of a map feature, take a look at the footer. Everything is great. Let's experiment with the navigation if I click on Contact. And yes, here we go. We go to the contact page. And then if I take a look at the About us page, yes, it's working as well. We land at the About us page. If I take a look at the menu, pastries and bread, yes, here we go. Claude in the background, like I mentioned, fix this up. Seasonal. Here we go. Planning Group visit, Reserve a table. Click on Reserve. Yes. Go back to menu. Here we go. 13. Adding Animations For The Multi Page Website: And welcome back. And we have successfully set up at this current stage, the navigation for our website, and we have tested that everything is working perfectly fine. And navigation setup, by the way, is a very time consuming process. If you have tried to do this manually like myself, when you are developing the front-end of a website, you could easily break different links, different segments, not to mention switching between mobile view, desktop view, and the list goes on. And through the integration of Cloud, the same way I'm sharing with you, we were able to bypass the entire hassle and land at this beautiful design, fully functional, navigation intact. Everything is perfectly aligned. Now, in this current lecture, I'm going to be teaching you how to apply one of my favorite parts for the front-end web development of any website, which is the customization. Often we are limited by themes. We have no idea how to code, or we have no idea how to go about the CSS or the HTML, not to mention breaking things. Now I'm going to be showing you how we can simply bypass the entire process by integrating Cloud. So if we take a look at the website we have built up to this current stage, the lessons I'm going to be sharing with you and the tactics will help you draw some inspiration in which you are going to see that you have the ability to integrate various customizations based on your preference. Kicking things off. Let's say, for example, as part of the home page over here, I would like to add some sort of an animation. Animations are considered to be a very powerful addition to any website, right? How about I would like to have the main heading over here. Something's always simmering at mugs. We are going to add some sort of a dynamic animation in which we are going to have the word simmering. Let's say flip to cooking and simmering and brewing. That way, it's something more interactive. So I'm going to tell Claude, I want to add a dynamic animation to the heading. And then I have two options, by the way. Either I copy it and paste it as is and put it under quotation marks, Claude will understand or one of my favorite alternative options is simply where you are able to take a screenshot from this website or your own website. If you are editing your own website, simply take a screenshot, drag and drop it directly as part of the interface, and add the command. This is very powerful. And an additional pro tip, you have the option when you drag the screenshot to tell Cloud, get me the code, the HTML file, which is running behind the screenshot. That way, if you'd like to take a snippet, put it on your website, for example, you have the option to do so. It's a very powerful tip to keep in mind. So I want to add a dynamic animation to the heading. Something's always simmering at mugs, such that simmering flips, too. Cooking flips to brewing, for example. And let's take it one level further. I'm going to tell Claude. Show me the different animation options interactively. Add this word always when you are dealing with Claude. If you would like to see the following result, which is the output straight in the chat over here compared to having the result simply being reflected on the output. Once you add the word interactively, Claude will understand I need to show the results here. And in case the interactivity option is not working for you, it means you need to go to the settings and then enable interactivity. This is a very powerful protip that many have no idea it exists, and I'm teaching it to you to help you take your integration of Claude to a whole new level. Show me the different animation options interactively, such that I can confirm the one I want in case you have no idea what kind of animation you would like to have. This is a very powerful pro tactic for your front-end web development. You can use it, first of all, to customize certain elements, add animations to certain elements. And most importantly, if you have a certain animation in mind, feel free to inject it as part of the prom. However, if you have no idea what kind of animation that you need or what are the different options that you have? Maybe you would like to get inspired for your design, or you would like to see what are the best options that you have as part of the options for animations. In general, if you're not familiar with this, the whole goal is for you as someone who has no idea how to code, how to utilize any sort of code, you are able to conduct the front-end web development without the need to any of. So it simply this tactic will help you get inspired, see all of the options without actually breaking the website. If you have done front-end web development to your own project, for example, you might have noticed if you try to edit something, for example, over here, you might break the navigation. You might break the setup, you might break the theme, and then good luck taking hours trying to fix whatever edit that you have made. So this tactic, the following prompt will help you keep everything under the cloud chat environment, interactivity over here. You're good with it, you confirm it, and then you're able to migrate it directly through the interface. And most importantly, Cloud by default, as it's running the command, take a look at the steps it's doing. It's building the animations. It's building the options. However, once you make a selection, it will go ahead and rectify everything as part of your website to make sure nothing breaks. And this is one of the powerful integrations of Claude because Cloud is very powerful for coding. So it has the ability to run through codes quite quickly, debug the codes, make sure everything is quite functional. Now let's take a look at the output. See how powerful this is. This is a very powerful pro tactic which will save you a lot of time. Let's take a look at the outputs. Something's always brewing. Here we go. Simmering mugs, excellent odometer slide. Okay. Then something's always simmering mugs or cooking, three D flip. Then we got crossfade plus scale, then blur focus, something's always a mugs, steam rise on brand. Excellent. Each card previews right in the actual hero styling. Excellent. Dark background. So it's taking the elements exactly as is. How would it look like, and you're able to see the animations over here. So let's pick one for simply demonstration purposes. How about we go for steam rise over here? I'm going to click on use this and take a look at the output. Simply Cloud will confirm the design requirement, the animation requirement, and then it will go ahead and run the code to update that specific segment. So the whole goal from this lecture, first of all, is to learn this new tactic, new tip, but at the same time, to understand that you are not limited to such edit only. No. You can use it for animating the text over here. We can use it for animating certain buttons, for example, animating certain elements. So you are able to get inspired to learn this tactic and apply to your own unique situation, helping you open a lot of doors as part of your front-end web development. And the tactic that I'm teaching you right now, the interactivity, it's often missed even by pro cloud users. It's a very powerful, specific tactic keep in mind, you need to go to settings, enable that. And then in the prompt over here, mention the word interactively. It's very critical because this will tell Cloud, before you migrate anything over here, I would like you to show me the results properly in front of me as part of the interface. And once I make a selection, you're going to migrate it, and by default Cloud is going to implement the design output and then make sure that it's creating the file, running tests that nothing is breaking. Everything is perfectly functional. So feel free, by the way. Simply, if you're working on your own website or your own design, to take a moment and try to get inspired to build up or customize your own website. Or if you're building a website from scratch. If you're trying to customize your own website, you could actually take This is more of a pro advanced step. You are able to take your current design. You can take a screenshot, for example, of your website and add it to Claude and have Claude build it for you and customize it for you, and then ask Claude to get your HTML file, and then you're able to copy this HTML file and paste it back on your website editor, for example. This is something for the front-end web developers who are comfortable with coding. Like I mentioned, the current practice, the current lecture, the current lessons, they are tailored for you for someone who has no idea how to code, but at the same time, if you would like to experiment with coding, you're able to do it in a very streamlined and systematic fashion. So this is very critical to anyone who would like to either work on their website, build a new website, whether for your own personal project, for your own business, for your own client. These tactics that I'm teaching you will help you save up a lot of time and effort. Take a look at the Apu Bado as you can see, Claude, make sure everything is running. And the more edits we do, what would you notice based on the setup that we have made, Claude is actually packaging the website again, including the HTML file and the full on website package, including all of the latest results. This is very critical because as part of the setup, like I mentioned, you would like to always revert back to whatever you are doing, right? You don't need to build everything from scratch. And by following these tactics, let's say, a month down the road, you're able to simply hop back to your project and take a look at the latest edition, conduct some edits, fine tune the output, and export it and use it again. Take a look at the app over here. And here we go. We got ourselves a beautifully looking animation added specifically based on our preference without breaking anything from the actual website, which is very critical. And let's say I would like to shift to a different design, right? So I would simply go up, take a look at the feedback over here. Then let's say I've changed my mind. I'm going to go with this design over here. Click on Use This design. Here we go. Use caution before running this prompt. Malicious conversation content could be trick cloud into attempting harmful action. Well, this is an automatic upput that simply pops by default if you're trying to fix something that you have already generated. It happens at time. That's perfectly okay. Not an issue. So we're going to mention use the odometer slide, animation for the hero headline word instead. Simply add the word instead, and we are going to run the code again. So this will show you that I have the option to make a selection, update the file. And then as I take a look at the output over here, I noticed, well, it looks good, based on the brand. However, I would like to see whether the different animation fits better based on my preference. And if I were to do this manually by myself, I might break the file. I might have to spend a lot of time trying to see that before and after comparison, and I don't have any reference to refer to in case something breaks, for example. Many of us who tried to do this manually faced such problems. So if you'll notice over here, Claude is going to run the basic prompt again. It will fix the animation, update the entire file without the need for any intervention. Simply, keep in mind you have the option and the ability to keep running in the background. If you are doing another task, simply you add the prompt, let Claude do decoding and the editing. And once it's done, you're able to revert back to it to take a look at the output. And here we go. Take a look at this. It took a couple seconds for Claude to simply fix everything up. And as you can see, this is the latest version. Here we go. So we were able to simply switch to this current animation, which is the odometer slide. So within a couple of clicks, we're able to shift the entire coding structure for the website to incorporate the animation without the need for any coding whatsoever. And this tactic applies to any segment of your website that you're trying to build if you'd like to animate anything. Let's say, I would like to animate this card over here. I would like to animate this text over here. Feel free to get inspired to help you take your application to a whole new level. 14. Adding Graphics For The Multi Page Website: And welcome back. So we have successfully created the animations as part of our requirements, and this is something that we could map across different parts of the website. Now in this current lecture, I'm going to show you how we could add some graphics. Like, let's say you would like to add some graphics here or a different part of the website, here, for example, or a different section, sky's the limit. You can get inspired to apply to your own unique situation. Now, let me show you a couple tricks in terms of adding graphics to your website. I'm going to tell Claude, I would like to add a couple graphics which are animated to the main hero section. And the hero section, this is basically what we call as the hero section over here, right? Next to the button to reserve a table. And by the way, you don't need to go through the full on description. Like I mentioned again, take a screenshot of the exact location over here, for example, and then label it on a piece of paper, on a napkin, on whatever software that you would like. You can actually write the edits that you would like to do and simply take that screenshot, take that piece of paper, take that napkin, whatever it is that you're doing the edits on, and then map it to Claude. Dit, drag and drop it over here, but I'm showing you the basic simplest approach through a text based interaction. So I'm telling Claude, I would like to add a graphic over here next to reserve a table. And I would like to have a couple options. So I'm going to tell Claude to add a couple interactive graphics. Here we go. Just to make sure that Claude understands, I would like to see them first before we migrate them. Here in the interface, here we go. This is how you elevate your prompt, which are animated to the main hero section next to the button to reserve a table. Also, we could make it more specific to be added. Here we go. So both prompts will give you results. However, if I would like it to be quite specific, where I confirm the interactivity over here, I can see the graphics. I would like to take a look at a couple options before I migrate them. So Claude will analyze the theme, the context, the buildup that we have made up to this current stage, and it will suggest couple important or useful graphics which align with the hypothetical case that we are dealing with, right? We've added a project. It's a context based approach. We've got files, we got elements to be added. So Claude has been trained well enough right now to be able to tell exactly what we needed to do and to suggest some important elements. Take a look at this, brainstormed bakery themed animated graphics, which is very powerful because this tells us that Claude is on the same page as us what we are trying to do. Here we go. Take a look at these. Table open now. We got a live indicator. This is very nice. We got a cup, a mug. We got a fresh daily. We got reserve a table. Take a look at these powerful, powerful additions as part of the graphics. So based on my preference, let's say, if we're going to reserve a table, I would like to add this feature over here. So I'm going to tell Claude, go ahead, add this feature. At the pulsing open now status badge next to the reserve table button. So it's a very nice animation, and in case I would like to it's a very nice graphic, which is animated. If I would like to test something else without breaking the actual site, which is something that normally happens manually, I would simply go back click on this, use this and tell Claude use this instead. Or I could simply tell Claude, well, show me more options if I would like to have additional options to find the best fit for my application. But these are very nice graphics that you need to typically do by yourself if you're writing the code to actually integrate them as part of your website. So Cloud right now is actually fixing up the code, HTML, the CSS, everything should be in place in order to integrate this graphic to elevate our front-end web development skillset and take it to a whole new level. As you can see over here, Claude is simply running through the commands, saving us time, saving us effort, and you're able to see which stage of the coding is going through. Like I mentioned, the applications that we're following, they don't need you to know how to code anything. Simply follow the tactics that I'm teaching you and you're able to get the job done as a professional front-end web developer with a lot of tactics and skill sets up your sleeve to allow you to stand out when it comes to front-end web development. Now, let's take a look at the output, and here we go. Tables open now. See how powerful this is. It complements the design in a gray way. About let's add another graphic to elevate the design even more. I'm going to tell Claude. For reserve table, I'm going to place it next to, for example, or within the button view our menu. So I'm going to tell Claude. Let's use this. Here we go. However, I'm going to be specific with my prompt. Add the steaming mug icon animation, not next to the reserve table button. No, but I'm going to fix it inside the view our menu button. This is part of your creative journey, right? As you are doing the front-end web development, you're expected to get creative in the process. And I'm showing you the tactics, the same way I would do them normally, how I'm going to be maneuvering through the interaction with Claude. I found this to be quite helpful. Then I've realized, well, I liked this graphic. I don't want to simply skip it, and it fits perfectly fine not next to the reserve table, but part of view our menu, right? This is something that you would do normally manually. Or if you're working as part of a company, for example, you have a meeting to discuss the layout, the presentation, and we're able to integrate all of these in the fastest and the most effective way possible through the tactics that I'm teaching you. Now, based on my expectations, we are going to have Claude place this the mug within the button which is view our menu, and here we go. See how powerful the design is. Fully dynamic, fully professional, and it's top notch in line with our requirements. So at this current stage, you have learned how to add graphics as part of your design, and this works at any level or any page or any stage of your actual website, right? Simply you could navigate to the contact us page, about us page. Gallery, whatever it is, and you're able to apply these tactics to help you integrate graphics as part of your design. And like I've mentioned, we've gotten the confirmation from Claude that the website is ready, and the design has been finalized, where we have added the graphics for tables open by now, and we've added an animated mug to further enhance the visual presence of our website. 15. Sitewide Fonts Sweep: Welcome back. Now, let's say I would like to change and alter the fonts for the entire website. Let's say I'm going through the design process and I've realized, well, I would like to have different fonts based on my requirements. Now, even though the font looks perfectly aligned with the brand, however, I would like to test different fonts to see which one best reflects the essence of the current project, whether for marketing purposes, for your own content creation, and the list goes on. So I'm going to Claude. I would like to test different fonts for the entire website. Display interactive samples in the chat here such that I can confirm the full site font sweep. So what would this prompt do? First of all, we tell Claude what my goal is as part of solid prompt engineering tactics. And then once you add the word interactivity, always keep in mind you put the word interactive, this will tell Claude, You know what? Display the results here first. It's a very powerful pro advanced tactic. To help you get the juice out of Claude. In the chat here is such that I can confirm the full font sweep. And I mentioned the full site font sweep because this will tell Claude what is the end goal. Once I confirm everything, you will update everything as part of the website. The full on site will be completely edited and updated rather than simply having me to do this manually. Take a look at this. Take a look at the output. Here we go. We got the font labels, the current this is the current font. Then we have the different options. Here we go. You can see the name of the font, by the way. If you are marketing professional, you are branding specialist, you're able to make sense out of the actual font names, the font pairing, and by the way, Claude will understand what are the fonts that best go together for the current team that we're working with. Each card applies the pairing to real content from your website. See how powerful this is. I'm able to see the exact fonts that I could use, and Claude understands that these fonts they go together, and what do they indicate? So you're able to browse through any of these right. And then you're able to make a selection. Then we're going to be tapping use this or keep this to stay put and I'll apply it sidewise. So I'm going to pick whatever font that aligns with my preference. Let's pick one of them to make sure everything is quite aligned. Based on the current brand, I think this one is quite nice. So I'm going to be using the one over here. Here we go. This one. Going to click on US Does, switch the site fonts to Lib and then Nunito. So I'm going to have this combination together Liber and Nonito as a combination. And this is exactly the single control panel design paying off. I only need to change. Here we go. One element and Cloud is able to make the entire site sweep. So if you apply the tactics up to this current stage, any edit, whether at this current point in time or future wise, whenever you revert back to your ongoing side project, you are able to simply hop on the project and conduct an edit in a couple minutes, if not seconds, compared to going through the entire process from scratch. So at the beginning, it might take you some time to get up to this current stage. However, once your project is up and running, any further edits, it's simply a couple seconds away from a finalized output. Now Cloud is simply running through the entire fonts for the website and it's swapping all of the required codes under the hood of Claude in order to change the design and the font display for the website. And you could utilize whatever font you have in mind, by the way, you don't need to simply depend on the suggestions from Claude. Now, if you got your own fonts or you are using specific fonts as part of your own current website, you're able to simply add it to the prompt and Claude will be able to map it directly to the output. Claude is running the command over here, and we're able to see that it has successfully updated everything quite systematically. We wait for the confirmation, and here we go. We got the latest edition of our website, and as you can see, the fonts have been updated. This is very professional. This is very sleek, and Claude was able to simply map all of these results quite easily, right? And we're able to see the clear distinction between the before and after. Through the main hero section over here where we're able to spot directly that the font has been shifted completely. And simply, I could ask Claude confirm that the entire site has changed it's font. Simply put. It's a very basic prompt. The site has changed its complete font. So this will confirm that Claude did not miss anything as part of a confirmation check. So confirm that the entire site has changed its font. It's a very basic prompt, very direct. That way, Claude Claude will tell what we're looking for exactly. However, if you notice over here, as part of the check, always do this, by the way. When you are running something as part of any AI tool, including Claude, always confirm the end result because at the end of the day, guess what. A AI tool make mistakes along the way. So once you add this extra precautionary prompt, confirm that the entire site has changed its fonts, take a look at this. Found one small loose end for the actual file, based on the old fonts, I found a comment somewhere. It's purely descriptive. Let me check the preview to then verify the computed style. So it will take an additional precautionary step in case there's something missing here or there as part of the so if we take a look at this, confirmed, the entire site now is on the same font that I have selected. Here's how the AI model checked, not just eyeball. Great. I showed you the steps for the confirmation. This gives you another layer of output confidence instead of having to simply, take a look at every single font line by itself, you're able to apply the tactic and then have the AI model confirm exactly the output in case of any errors, and your task would be simply to verify and to confirm in a very systematic fashion. 16. Adding Images: And welcome back. Now, let's take our web development skills, front-end web development skills to a whole new height through the use of cloth. Typically, when you are dealing with any website, especially from a business point of view, creative point of view, we need to add some sort of files to it, right? Every now and then. For example, if you recall, as part of our buildup, we have created a gallery. So this is something typical for any creative individual. You're working on your portfolio, you're showcasing your business, or you're working as part of a company. You would like to showcase your products. This current lecture will help you get inspired to show you how easily it is to add your own unique input and update the website within a couple of clicks. As part of the buildup for the project, we have added initially some contextual inputs as part of the initial buildup. However, if you notice, for example, we got certain placeholders over here for future additions as part of the website buildup. I could add a photo, for example, a dining table or dining room, add another photo suggested by Claude, fresh croissants, add a photo pour over bar, sour dough scoring. At the counter at the opening, regulars at the community. This is very powerful, and all of them, they align perfectly with a bakery and a cafe, right? So you're able to see all of these elements typically in any cafe or any bakery, where you have fresh croissants, you have a sour dough. You have a coffee pour over bar. You got yourself a counter at the opening. So it's very, very realistic in the sense that we're getting the output. However, if I would like to add some input from my side, right, as part of the addition I'm adding to Claude, I'm going to, for example, let's say, I would like to add a couple images based on this hypothetical bakery. So at this current stage, I'm going to tell Claude add the following images to the gallery. Simply put, and feel free to apply this to your own unique situation. I'm going to add, for example, an image of a coffee cup, image of bread, additional or another image of bread, and you could add whatever contextual element that you would like to update your site with. This could be your own unique artwork, your company's projects, the inspiration and the ideas are quite endless when it comes to this. So I'm going to Claude, add the following images to the gallery and make sure they are organized in a professional fashion and remove any empty placeholders. Let's say I'm satisfied with these images. I don't need to have additional placeholders. Simply, I will tell Claude, go ahead, load these images as part of my gallery and any blank placeholders at this current point in time, I don't see there's a need for them. By the way, if you have noticed, Claude changed the layout and the customization based on the actual image, the sizes, the fonts, the structure to add the front-end web development appeal to the actual result or the actual output that you are getting. You can see over here, check the uploaded images, verify which uploaded file corresponds to the actual slots that we have or the placeholders, and Claude will start to compile the images as part of the gallery, and it will need to remove any additional elements. Keep in mind, since we are building the website, you might see some remarks from Claude. However, once the design is finalized, you can simply Claude, remove all of these remarks. So the tiles are marked at Photo are placeholders. So I'm telling Claude, You know what? I don't want to have these placeholders anymore. I'm almost done with my gallery, so there's no need for me to have these instructions or to have these placeholders in place. Very important if you're working as part of a team, right? If you have a team of designers, front-end web developers, you can leave these remarks to them, add a photo for as part of the placeholders, drop your own images, and then swap them as part over here, see the Read Me for exact instructions. This is very powerful as part of design agencies or larger teams where someone is picking up where you have left off. So always keep that so as we can see over here, Claude is actually going through the buildup of the finalized gallery, and the same tactic could work for any industry that you're at, whether you are working in a certain art industry, construction industry, development, whatever it is, you can make use of this gallery tactic to add and showcase your work in a very systematic fashion, and always you can revert back to it and then update. The actual gallery by adding inputs, the same way I'm sharing with you right now, you're able to have Claude, take these inputs and arrange them in a systematic fashion. And you have the option as well to add animations to it. Instead of simply hovering over the images, I can tell Claude, when I click on an image, you can turn it into a flip card and you can write a note on it based on the tactics that we have covered up to this current stage, which will help you get inspired at the same time, equip you with the skills for you to maneuver your way through your own front-end web development. Like I mentioned, I'm teaching you these tactics, the skills, and you are able to get inspired to apply them to your own unique situation, whether at a specific individual level or a combination of them. You could add graphics over here. You could add animations. You could add images, and then you could combine everything together. So Claude over here, as you can see, it's flickering the output, which indicates that it's almost done with the results. As you can see, by the way, if we were to do this manually, take a look at the amount of effort that we need to invest in order to get this done, resizing, adjusting, wrapping, frames, list goes on. So if you have done this manual, this is not an easy task. Even though it looks easy, it's not. I will take you a lot of time to do so. So Claude is reaching the finalized stage, which is validating the preview like I mentioned, you can keep this running in the background if you are working on something else. However, we are almost done with the output, and Claude is simply verifying that every single item is perfectly aligned, which is a great output and a great step as part of the front-end web development because typically, when you add sort of images or external elements, you tend to break your theme or you tend to break your layout. And many of us experience this. Me frankly, experienced this when manually building a website. That if you'd like to add an image, all of a sudden you break the layout, and then you try to figure out what happened or the dimensions, they look quite solid on desktop. However, they break on mobile. So all of these or behind the scenes, under the hood, error checks, confirmations, Claude is going through them to eliminate the entire hassle of trying to fix things back and forth. Now, let's examine the output over here. As we can see, Claude is doing a really good job adding the images that I have added to be integrated as part of my gallery. However, like I mentioned, we do not take the result directly before we get the confirmation that everything is set, then we jump into actually checking the output from Claude, which is very important and very necessary to avoid dealing with incomplete results. However, from a first look, we can see we've added the images over here, and Claude has arranged them and structured them to make sure everything looks quite sleek and professional. And guess what? All of the placeholders have been removed. The instructions how to use the placeholders have been removed. This is an advanced step as you go about finalizing your design. You are shaping up the entire website. A remarks are being removed. And as you can see over here, we have a very nice gallery, including some images related to the context and the hypothetical case that we're dealing with, which is a cafe and a bakery. And then we are able to navigate to the home screen. Everything's quite in line. We've added some graphics. We've added some integration for the navigation. We have some sort of hypothetical menu items. Everything looks quite organized and systematic. And any element, by the way, based on the tactics that I'm teaching you, you're able to update it based on your own preference. And this is a very powerful sleek website, by the way, you're able to get inspired from. We've created a multi page website. Typically, this will take you a couple weeks work if you are building this from scratch, making sure that you are coding, and you are trying to get everything up to speed and running, right? Not to mention the errors, the breaks that might happen as you try to update things here and there, no, by following the tactics right now, we're able to keep everything compiled as a single project that we could always refer back to. This is one of the most important lessons that you need to understand as part of the current course. It's not simply a one chat interaction that you're dealing with Claude right now. No, you are actually going through a full on project built with Cloud. This is very critical to keep in mind, because if you are doing this professionally, you might need to refer back to your previous design, conduct some sort of edits. You need to make some sort of changes, or you spot an error somewhere, or if you're doing this professionally as part of your company or as part of a design studio, for example, your client mentions that we need an update. You don't need to go through this from scratch every single time. No, you have the option to simply hop on the project and customize everything that you would like to customize based on the tactics that you have learned up to this current stage, which is very powerful and it gives you great supplementation to your front-end web development skills. We can see over here, Claude is simply finalizing the entire output. However, from a first glance, you're able to see that Claude understood the end goal that we are trying to achieve. We've gotten the images in place, and it's simply a matter of a couple seconds before Claude actually finalizes the results and confirms that everything is perfectly aligned. So we're able to see exactly where Claude is heading. So this completes the actual outcome from the current lesson, and you are completely able to simply apply these tactics. We got the images in place, and the placeholders have been gone, and my gallery is quite intact, and simply I have the option for future wise to keep on adding images, removing images based on my preference. So you're able to use the tactics, these tactics to help you integrate external elements as part of your website, whether you're adding a certain project or a certain image or a certain Yo or a certain artwork that you're working with. You don't need to simply jump on the actual website builder and keep on loading them one at a time. No, you're able to do it with a couple of clicks. And here we go. This is the final rebuild, and Claude is simply confirming that the website is ready. Even though it took a couple seconds extra to finalize the result, compared to, by the way, a couple days worth of work, because what's happening under the hood of Claude, if you'll notice, it's doing a lot of edits to confirm, based on the structure that we have followed that the design is ready because at the end of every iteration, part of solid prompt engineing tactics, you're getting the updated website code and the full on website package, which is very critical. So all of these behind the scenes additions for the HTML code, the CSS, the layout, the structure, the sizing, and much more Cloud is handling. So at this current stage, we are able to integrate additional external images and elements to be incorporated into our website through Cloud. 17. Changing Website Design Themes: And welcome back. Do you think we're done? Of course not. We're going to elevate your front-end web development, AI skills and take it to a whole new level. Now, in this current lecture, I'm going to show you a very powerful yet it's often considered to be a problematic step within the front-end web development, which is changing the theme. When you are dealing with front-end web development, typically, if I were to change the theme of the current website, often, this is something that many front-end web developers will fringe when they're dealing with because this is a recipe to break the entire website. However, I'm going to be showing you the tactics right now. How we are going to have Claude, go ahead and alter the theme for the entire website in a very strategic fashion. I'm going to tell Claude, I would like to change the entire theme for the website. Suggest different theme options, including colors and layouts in an interactive fashion for me to pick the suitable one before migration and make sure it's very critical to keep a copy of the current website, build to revert back to. So what would this do? First of all, I'm creating a backup through Claude for my current website in case I would like to extract it back. This is a very advanced tactic that many are not familiar with. I'm utilizing Claude, more of a backup engine for me. And I'm telling Claude, You know what? I'm going to explore multiple themes from the website. Go ahead, show me these options, but at the same time, make sure that we preserve the work that we have done. Take a look at the output so Claude is going through the process, thinking about presenting interactive different website options for comparison. It's building this interactive feature over here. Then it will save the entire, first of all, it will save up the entire file as a backup and then show me those themes. So let's start by backing up the current built so you can always revert back. Then I'll put together interactive theme options for you to compare. Now, typically, this is quite a complex task. If you think about it from a manual point of view, it's quite demanding. So once we're dealing with an AI model, it's okay if it takes longer than usual because the task is demanding more compared to usual. So basically, Claude, based on the task, it might vary in terms of the duration of the output. It might take you a couple seconds, sometimes it might take a couple minutes, which is perfectly fine, depending on the build and the task. Let's take a look at this. First of all, backup, confirmed and saved. So we're good to go to try to experiment with different themes. Let's build interactive theme comparison. This is the current one over here. Okay. Then we got a different one. Modern minimal. I like this one. How about this one over here? Moody upscale, soft pastel, bold contemporary. Each card previews the same structure. However, we got different themes. So your backup is saved already. The current warm bakery build all five pages. Everything is quite in line and zipped up, ready to go. So let's say, first of all, I can tell Claude, well, I don't like any of them. Go ahead, suggest other options. However, I like this current theme over here. So I'm going to tell Claude, go ahead, use this. Here we go. So this is very important because this will tell Claude, You know what? I like this theme. Go ahead and refurbish the entire website completely. If you were to do this, by the way, manually, you run into the risk of breaking the website. Like I've done this manually on multiple occasions, going from one theme to another is sufficient to destroy the entire work that you're having and good luck trying to find the eddors here and there. So we're bypassing the entire option. We picked a very nice theme, and simply I'm telling Claude, go ahead. Change the entire arrangement for the current website based on the theme I have in mind, and feel free to incorporate by the way you branding elements, based on the theme that you have, if you're working on a certain website, your current website, you are able to add your own color palettes, your own theme preferences. That way, you're able to have edits, which mimic your current website completely. Let's take a look at the feedback from Claude. Let's do this properly. First, a full audit of every color reference style sheets, exactly what you need to do manually. Claude is doing automatically. So it's going through all of these edits to make sure that it misses nothing. Everything is going to be updated to reflect your own unique, customized theme, by the way. And once you change the theme, you're able to go through the tactics that we have covered by adding graphics, animation, images. It's completely up to you. So this is a very powerful addition to keep in mind to help you elevate your front web front-end web development skills because everything that you would typically need to do manually, I'm teaching you a way how to utilize AI to do it on your behalf. So if you have no idea how to code, that's perfectly fine. You're new to front-end web development. That's perfectly okay. You are working as part of a company. You're working on a project, you're working on a business, Wever it is, the tactics that I'm teaching you will help you elevate your website building skills, especially the front-end web development skills, because this is the core of what we are doing as part of the lesson. So as you can see over here, Claude has identified all of the color palettes and it's fixing them or replacing them with the alternative color palettes based on my preference, keeping in mind. This is simply for demonstration purposes. I prefer the current theme, the colors align perfectly with the current hypothetical business. However, for you to understand the different options in terms of the output that you're getting because you're not simply confined to the output that you're getting from Claude as not really. You have the option to add your own preferences, alter it, tweak it till you end up with the result that you do prefer and you are quite comfortable with having. The whole purpose is for you to get the output, which reflects your true vision in the most systematic way possible. Now, as Claude is finalizing the output, let's take a look at the actual homepage because this is typically where you see the biggest sweep in terms of the changes. And if I would like to change an image, let's say the background hero image, I could simply tell Cloud, You know what? Change this image. I could upload something if I want. Or if I have a graphic in mind, I can sketch it on a piece of paper. Take a screenshot from my current website, and then I have the option to upload it and tell Cloud, You know what, add it to the current build, as well. So these are very powerful tactics that you're able to integrate as part of your activities. Now, let's examine the stage where Cloud is at. As you can see, it's a big build, definitely, because we're updating an entire theme, an entire theme. And that's why at the beginning of the current class, I told you, this is something that many front-end web developers they fringe when they are trying to do because you have no idea if the theme might break your website. However, we're bypassing all of these issues in a strategic fashion. As we can see, we are at the final validation stage, and frankly speaking, I like the new theme even more compared to the previous theme. This is very sleek, very professional. We can see that everything is quite aligned, and we got the finalized package over here, which is the zip folder ready to go. And feel free to pause at any point. Let's say if you are professional front-end web developer, to see exactly what Claude is doing, to derive the output, which is something that you need to do every now and then to make sure that you're giving it sufficient human oversight. This is very critical because at the end of the day, you are the one responsible for the output you are getting from any AI tool. Now, as you can see over here, take a look at the design, very modern, very sleek. Everything has been updated quite beautifully. Let me examine the menus. Navigation is working. And typically, when you're dealing with the theme, that's the first thing that might break as part of the process. Everything looks quite systematic. Let me take a look at the gallery, for example. How about that? Here we go. Excellent. Everything is quite aligned. We have nice features integrated. And at this current stage, we have a very powerful build for our website, and we are able to simply get inspired to update the colors, the themes, adding graphics, adding images when it comes to your own front-end web development skills. If you have followed through up to this current stage, based on what I have taught you, you're able to take your whole skill sets and take it to a whole new level. 18. Deploying The Website Design Through Claude: And welcome back. So once we go about finalizing our website, it's time to deploy and launch the website. This is very handy if you are trying to showcase your work, if you're working as part of a team, or you're trying to show this to your client, it's very handy to launch it directly within Cloud. Yes, you heard me right. You're able to deploy your site website, your website directly live on the Internet straight from Cloud. Like I mentioned, we're currently dealing with front-end web development. So if you're doing this as part of your creative work, you're trying to finalize the front-end design before actually working further on your website. Always keep in mind that you do have the option to launch it directly within Claude to see how it works as well. So how do you go about this? Simply navigate to the top corner over here. Click on the drop down menu. You have the option to download this as an HTML file. Also, you could add it to project. This is one of my favorite preferences and tactics. Once you are done with this build, add it to your project which you have been working on. Why? Because this will train Claude for future edits. That way, you don't have to start from scratch. No, Claude has a full on project it build with you to refer to for future addits. This is a very powerful tactic which will elevate your time savings, saving you effort, elevate your skill sets, and the output every single time you use the project over and over again. And then you got the feature, which I'm telling you about, which is publishing the website as an artifact. Once you click on this you're going to be having the actual URL for the website. And once you click on publish and Copyink by default, your website will be live on the Internet. You can share it with your colleagues, share it if you're displaying your own portfolio on your website, for example, if you're adding it as an extra page on your website, or if you are trying to showcase this activity as part of your client, the applications are endless. Let's click on this, publish and Copy Link. Now it will take a couple seconds to load. I have the option to embed this entire website somewhere. Is very handy if you are creating, for example, a small display within the website, or you have a dedicated page on your own current website and you would like to add this as an addition to it. Like I mentioned, the applications are quite endless. I have the option to unpublish this if I would like to do some sort of additional work on it. Now let's take a look at the end result, and here we go. This website is now live on the Internet. See how powerful this is. We got the About us page. Here we go. We got the menu. Excellent. Everything is here. We got the gallery. Everything is working perfectly fine. As you can see, it's a full on functional website that we were able to build directly. And Mi have noticed, once you click on any of these navigation icons over here, you have this message. Why? Because we are launching this on the Internet within Claude. So it will keep on reminding us, You know what? You are about to leave Claude in order to access this. So this is something to keep in mind, because like I mentioned, we're building it as part of Claude, right? So once you're doing so and you navigate to different parts of the website, since it's live on the Internet, what is it doing is it's telling us, You know what? It's external now. It's no longer in Claude. So keep that in mind if you would like to navigate to this website. Well, it doesn't change anything. Frankly, speaking, you are still getting a full on functional website fully deployed on the Internet. You have the option to share the link, you have the option to copy this code and embed it on your website, and the applications like I've mentioned, are quite endless. 19. Other Options For Website Deployment: Welcome back. Now, I'm going to be showing you another very powerful option for deploying and launching your website. If you recall, we have simply launched our website as an artifact within Claude. It's fully live on the Internet, and then we're able to share the link, embed the code. The applications, like I mentioned, are quite endless. Let's say, if you are, for example, trying to get this website and take it to your own current hosting or you're trying to take it to your own current website builder to deploy it over there. So how would you go about this? This is the core outcome from the current lecture. I'm going to show you how you simply tell Claude to get you a ready to call complete package that way you're simply downloading and deploying in the quickest way possible without the need for further intervention. So I'm going to tell Claude. I would like the website to be available as a complete ready to go package, including images and graphics and features that we have built. Why? Because you don't want Claude, which is something that could happen to, for example, the images in the gallery or the actual background images to leave them behind. It might give you a placeholder to it if you are, let's say, a professional front-end web developer, you know how to code, you're okay with that. You're able to simply take the code, go ahead and deploy it on your website and your web hosting. Or your website builder, and then you manually add the images. That's an option. However, I don't prefer that option. I would like to have a full on build in Cloud. I simply take the output fully, and then I deploy it fully without any intermediate action in between. So I would like the website to be available as a complete, ready to go package, including all images and graphics and features that we have built such that the file is complete and nothing that needs further action. And make sure the file is compatible with external website builders and hosting. So this will tag Cloud. You know what? Compile everything as a full on package and confirm that everything that we have created and added, including images, graphics on the list goes on, is part of the ready to go file. And most importantly, you need to make sure that the file we're going to be getting from Cloud is compatible with external website builders and hosting, because if you're using it, part of your current website hosting or your current website builder. There are many builders. There are many hosting providers. However, this could vary from learner to learner, from professional to professional, from student to student. We need to make sure that Claude is able to give us the result, which is easily mappable to any situation that you're dealing with. So by adding this current prompt, any build that you're having over here, you are simply telling Claude as part of the front-end web development application. Get me the full result as is, because I would like to take the current website that we have built and take it and deploy it as part of my hosting provider, my website builder, or any additional some sort of service that could take your current code and deploy it as a live website. There are many of them out there. The list is extensive. Feel free to do your own research, by the way. You're able to spot many of these options which are completely accessible, where you take the full on HTML file that you have created. Literally, you drag it and drop it and you got your own website URL, and you're able to add your own unique domain. So this is some sort of an activity that you can do by yourself, but I'm showing you how to get to that point by simply having the ready to go file completely downloadable, you're able to utilize it based on your circumstances. Whether you're going to apply this to your own web hosting, that's one option to your own website Builder partially. That's another option. You're going to find one of these services where you simply drag and drop your HTML file, for example, the file that we have gotten over here, which is more than enough. Let me show you the file that you could use. Let's say this current file, the HTML code, or you can simply unzip the file, take the HTML code as well, and you can simply deploy the site literally by dragging and dropping the code. You take the code, drag and drop it to any of those direct lunch services, and you got yourself your own URL, and your website is completely accessible online. However, like I mentioned, we are dealing with the front-end web development of the website. And there are other components that go with full on web development, obviously. Front-end is one segment, however, you have the back end for another segment. And as part of the current course, we are dealing only with the front-end web development. So it's very important to keep this in mind because the tactics I'm teaching you can help you enhance your current website, front-end design a full on website from scratch, export all of the results for further editing, but always keep in mind, that when you're dealing with these outputs and the outcomes from the AI model, you need to make sure that the output is in line with your own unique situation through the application of the tactics that I'm teaching you. So let's make this genuinely production ready. I'll work through several real gaps, front loading compatibility with website Builders, working contact form with a zero setup required. As you can see over here, for example, a typical contacts form, you're able to design it from the front-end, but obviously, you need to connect it for a database from the back end. So this is some which is not as part of the scope that we are talking about or we are dealing with. Like I mentioned, we are only focusing on front-end web development only. So keep that in mind as you go about your own unique application. However, Claude is quite aware of this, and it's trying to minimize any compatibility issues, any issues that might come across as you go through that step or through that integration, which is a very powerful thing to keep in mind through the current prompt. We need the package for our front-end web design to be compatible, to be easily customizable and transferable. And then it's completely up to you how you would take it from there, your own hosting, your own direct lunch service, your own back end connection, whatever it is. You're able to take the output and then alter the output based on your own unique situation. And as we can see over here, Claude is verifying everything. The HTML code, the CSS file, the headers, the images, the navigation, the graphics, the fonts, everything as basically a ready to go, ready to export, ready to deploy front-end design for the website. Now, this is very important as part of your options when it comes to deploying your website. And obviously, it varies based on the nature of the website. So if you have a website, which doesn't have any requirement for forms or back end integration. You can simply launch this on the go. However, like I mentioned, I'm sharing with you the different options that you have, including further advanced additions. You're able to utilize the output to facilitate that process. However, based on your situation, if you don't need any of these additional features, you're able to launch your website directly, either like I mentioned through Cloud as an artifact, or you're able to take it as a ready to ship output file, you can deploy it directly as part of your website builder, your web hosting or any of these direct code HTML code to live website services out there. It takes you a couple minutes of simply research to be able to identify the ones that best fit your application. However, as part of the outcome from the current lesson, we're giving you the end product, the end result, the end outcome, which is a full on designed website. And the outcome and the lessons that you have learned from it to customize the output based on your own unique situation, based on your own unique circumstances. That way you got the skill set, you got the expertise, not simply to get stuck. Based on your own outcome. No, you got the tools and you got the know how, and you have the demonstrations to show you exactly step by step how to go about the process. Now, that being said, Claude is finalizing everything. It's running through all of the pages, as we can see. It's customizing everything, and it might reach a limit because it's quite demanding to Claude. Simply hit on Continue. And if you run into credits, you will simply wait for the reset time and you can continue your application. However, there's no need for that at this current stage, and here we go. Our website is fully ready. I have the HTML code I could download and I can deploy it as part of the HTML to live website services. Feel free to explore different options. Feel free to research different options if that aligns with the requirements. Or I can simply click on Download full on zip file. It includes everything that I'm seeing and everything that we have built from ATZ. I can take this as part of my web hosting as my current website for further editing, or I can simply take it to a website builder and load it directly. The applications are endless, and you're able to simply have these outcomes ready to go based on your own preferences. 20. Wrapping Up: So what do you think? Impressive? I truly hope that you found the class quite helpful, helped you get inspired, even level up your knowledge by at least 1%. It's a job well done. I look forward to receiving your feedback on the card class and make sure that you follow my profile for the latest releases and updates, and I'll see you in the next class.