let'' s construct a totally useful and amazing looking web site using expert system in this video clip we'' re going to cover the begin to finish process of building that AI created web site using a tool like mid-journey to produce all of our artwork and all of our Concepts where to pull out all the possessions we require and then start building our internet site in a no code tool like webflow and after that we'' ll top it off by making use of a little Chad GPT to create all the content for our site all right let'' s start in mid-journey which is primarily a large Dissonance web server that permits us to do text-based triggers here within any type of one of your areas I'' m inside of a'newbie space I ' m going to boil down to the conversation punctual area I ' m going to type in reduce think of which ' s mosting likely to allow me to put my message base motivate now I have to start thinking regarding what sort of web site I wish to create and I currently have a concept I wish to develop a women'' s deluxe skin treatment website'so I ' ve added that component of the prompt and I'' ve simply divided with a comma I'' m going to highlight a couple of keywords for my punctual like website design UI ux deluxe natural and I even included a couple shades like modern and Peach when I'' m all set to do that making use of that slash envision timely I just press enter and you can view as mid journey is creating other individuals'' s triggers it does this in phases symphonious so we'' ll be able to see ours in fact come with in steps and stages too as an example you can see it'' s presently at about no percent and this is the handling of my image now when we get finished with our image we'' re we ' re going to get a couple options like everybody else is obtaining right here and this is to really upscale top two 3 or 4 or provide me more variations of top two three or 4 good mid Trip has actually completed creating our Principles and our format and artwork and let'' s simply zoom in and see what it'' s provided us it ' s actually offered us some rather trendy stuff to deal with different sorts of layouts it ' s generated items for us like on the Fly which is rather amazing it made use of some of those shades that I motivated it um however it is sort of like all blended up right different kinds of designs so if we want to we could version off of among these that we truly like possibly or we could try our punctual once again I'' m going to go back down and state reduce envision and I'' m mosting likely to place every one of this in except at the end I'' m going to type uh female design something like that and then let'' s attempt creating that once again all ideal mid journey is completed round 2 of our Concepts and this time around we resembled heavily featuring like some type of like model or some kind of Skill on screen and this is this is actually pretty amazing looking you can see just how it may have like a navigating up top it has like some type of huge heading and a phone call to activity and it has 3 kind of points down below currently at this moment you can continue to develop your timely include certain key phrases take particular points away till you get a direction that you truly really enjoy and you wish to use that as the structure of your website actually continue to develop my prompt until I obtained something that I really actually enjoyed which was this format I suched as the model there I like the typography and the navigation up top it likewise gave me some really trendy area down below that have some of those products so I'' ve proceeded and I'' ve downloaded that and I'' m mosting likely to see to it that I open up that with Photoshop so I can draw certain assets from it I'' m going to open my layer and I ' m mosting likely to most likely to work because what I truly wish to do is just make certain that I obtain specific points out of this right so I'' m going to go in advance and duplicate the layer and this is where you would in fact require a layout device simply to pull out some of those things you could require and that'' s what we ' re mosting likely to do now so primarily just eliminating all typography by masking or getting rid of out components and after that I'' m using the slice device to order those pictures all right with our layout open up the initial thing I observe is that my header image is not broadening completely to the left and right-hand man edges that'' s actually simple'to do we ' re simply mosting likely to go inside the area since that section has some'cushioning on it we'' ll grab that intro header we ' re simply mosting likely to relocate up and out of the section and boom currently suddenly it is complete size next I ' m going to submit all of my possessions so let'' s click on the media type of properties container and we'' ll grab all of our properties and simply drag those inside we'' re mosting likely to use all of those below in a 2nd I'' m on the introduction header the first thing I want to do is just sort of scroll down and find the backgrounds below I'' m mosting likely to head back over to photoshop and simply notice that I have this sort of light peach color I'' m going to get the hex worth for that light peach shade and I'' m simply going to insert it in the history I'' m mosting likely to remove the photo you can see now we have that light peach shade right in there allow'' s proceed and include our featured image inside will we we have actually an image chosen and I'' m mosting likely to pick which photo we'' ll choice our model and let'' s just ensure that we'do not tile we ' re mosting likely to shoot it over to the far best and after that we ' re going to consist of the photo there so currently it ' s surviving on the right-hand man Edge and as we sort of like ups and downs our internet browser in a responsive nature our design is mosting likely to stream and lessen with it which is truly really great good successive we have the typography that was in our layout so we have like some type of significant headline and some type of body copy and a wonderful spherical kind of tablet design switch that'' s in this shade so I ' m going to order that hex I'' m mosting likely to return into our website and we have those components below but everything is Facility straightened so why put on'' t we simply click the whole container that it ' s in in and you can see whatever is Facility aligned I'' m simply going to left align everything and my button as well I'' m going to make sure I get whatever and simply left line up every little thing our text box is actually just 80 percent and so that'' s why things were getting type of shaken off below a bit I'' m going to take this entire container this introduction material and I'' m mosting likely to diminish the size of it a bit and I'' m in fact going to determine where this point lives by making it position outright and afterwards we just wish to make sure that our introduction header is of a position relative currently anything that'' s absolute remains in relationship to its moms and dad container so with that being stated I'' m going to return to my positioning below and I ' m simply mosting likely to relocate like so we can actually put no on the left hand side and it'' ll push right over there to the left hand Side and why put on'' t we attempt providing it like 20 40 perhaps 100 pixels let'' s go back to something like 60 or 40 that feels like it'' s virtually lined up with our headline above which feels quite good in the meantime I'' m likewise going to come into my headline here I ' m mosting likely to make certain that my headlines are dark and that my body duplicate likewise is dark and I'' m mosting likely to grab my switch also and make certain the history for my switch is not white yet instead we have that darker shade simply like so and we'' re going to round the corners to those buttons so why don'' t we grab the Border radius of it and round the corners we'' ll even go above that so it'' s a wonderful tablet shaped button and it resembled this was also like a not actually like actually black inside yet had more of that darker kind of like peach-ish shade inside and we'' re even getting some built-in sort of like hovers from it they'' re currently sort of like baked in which is rather good from below I'' m simply readjusting the size and positioning of everything inside of my hero location and afterwards I'' m mosting likely to go right into the primary navigating and adjust that switch as well so it matches the rest of my site I fall to the reduced area that second area and I'' m getting rid of the web content and readjusting the margin of cushioning adding that darker flush history to make sure that I can develop a three column layout that'' s flexbox and with that said 3 column layout I'' ll then be able to insert all of my typography and my images and choose my image and why put on'' t we choose our initial product that ' s gorgeous I'' m going to copy that click column three and so I have that exact same photo however this moment I'' m going to change it with my next photo and they simply pop right in there they'' re looking respectable and we can sneak peek our internet site and it'' s it'' s looking quite incredible it ' s looking pretty remarkable we could definitely do a bit more to this layout however why don'' t we just take a 2nd and load it in with some web content from at GPT I'' m over on conversation gbt I'' ve began a new'chat I ' m simply gon na state I require you to compose me headline and body duplicate choices for a deluxe skin treatment brand web site web page uh please show me three variations of each in table type and obviously I did every one of that in caps lock however that'' s all right because it is it understands what I need so below GPT is spitting out some headline variations and body copy variations it'' s placing everything in that table type for me so I can see it and this is actually simple currently for me to type of comparison and compare which ones I like far better I like this one that says Unleash Your Inner Glow so I'' m mosting likely to go on and order that jump back over and simply paste that in really I really like the matching body copy for that a person so I'' m simply mosting likely to grab that and bring that over and what I might do to just drop it down a bit is get rid of this I ' ll placed that excess body duplicate that we had and after that I'' m going to grab one of these other headings and just pop it inside present moment we have that looking respectable and allow'' s do another thing give me 3 alternatives for brand for this business I enjoy it talk CPT is giving me options for my real business name for this website the very first option they have is Lumiere Lux which is it includes the French word for light evoking a feeling of Luster and deluxe I such as that why wear'' t we just take that one for currently we'' re gon na eliminate the image in there and rather just put a heading we'' ll decline it down to something like a headline three and we'' ll placed in the brand name there we'' ll eliminate this logo and simply keep it uh in a similar style so this set was making use of volcorn for the text actually I what this set now is making use of something that I actually like below which is Montserrat so why wear'' t we really come back down below and we ' re just mosting likely to make a selection on the Fly which is to use monster on go a little much more on that Sans serif side of things I'' ll bring this message down simply so whatever fits in there truly truly nicely and the last little thing I need to do is simply round the corners on this switch to ensure that it matches the remainder of them and I assume that looks rather excellent we have an internet site with custom art work in imagery it'' s receptive it is ready to launch it has great material and a new brand name written by conversation GPT and whatever works on all tool sizes that'' s it that ' s the beginning to complete process of making use of AI tools like mid-journey and conversation GPT and no code tools like webflow to in fact introduce Real Deal websites they'' re receptive they function well they look good and all of it started by utilizing the talent and the power of AI if you enjoyed this video clip make certain you leave a thumbs up register for the channel I do great deals of video clips concerning style no code tools and AI tools much like this set so possibly stay by striking that Bell notification icon so you understand when extra video clips similar to this one come out check the summary down below for links to all the devices that I made use of in this video clip so you can begin using them today and if you have inquiries leave those down in the comments I'' ll return to them as soon as I can I wish you'' re having an incredible week I hope you'' re making incredible things making remarkable things and using the power of AI to extend your innovative abilities see in the next one
