SuperChallenge: Complete Website in 2 Hours

um, okay, okay, what's up? Everyone, we are live and welcome to the best stream, the best design challenge that has ever been on YouTube or at least on Flux Academy. Today we will have a lot of fun and it is already incredible to see so many people. Tuning in from all over the world I'm going to shout out randomly from the comments Valentina from Paris kg from Germany uh what's up Leon from Germany uh Deborah from California Los Angeles Rodrigo from Portugal what's up Maria from Greece what's up uh India Macedonia, Austria, it's wonderful to have you everyone here today, listen today.

I hope you've set aside two

hours

for this because it's going to be fun, it's going to be intense. I have something very important planned for us, so let's get started. Let's get to the point. In fact, I'm going to share my screen so we can get off to a good start. This is our

website

in a two hour super challenge the first time we do this at Flex Academy and I hope this works. To make it very, very fun and useful for all of you, let me share what I have in mind for us today, so here's the plan, here's the game plan and it's calculated to the minute.

Alright, we'll start by using Chad GPT to generate. a random summary for us and some copy for a landing page, then we'll spend two minutes creating wireframes from that, basically just transferring it into your design software and arranging it on the page, then we'll spend 15 minutes now. Keep in mind that you're not just going to see me do it when we get to this part. I'm going to play music. I will do it, but you will go and do it on your own. I'm going to create some mood boards. and collect some inspiration for us. I'll do this for 15 minutes and then you'll paste the links to whatever you created in the chat here.

I'm going to spend the next seven minutes reviewing it and giving you some feedback and then we're going to create some images, some image assets for our landing page. We're going to spend 15 minutes on that. I'm going to try to do this halfway through the trip. You can try to do it with any tool you want or look for stock. photos or do whatever you want to create images, but I will try to do this mid-journey and then I will review the images that you have created and then we will spend 25 minutes designing the page again, I will review it and then we will spend 20 minutes developing it in whatever tool I you want.

I'm going to use webflow, you can use whatever you want, you can use framer, you can use Elementor, you can use the editor I want to see your designs I'm going to put it up for your vote and you're going to vote for the best design now please please don't leave me hanging and I'm the only one who's going to make the design please do it too because we have something big for the winner uh the winner goes to get the flux Academy full access package, which is basically our five flagship courses, a year to get support from our coaches and mentors and in our community, it includes a one-on-one call with me and it's basically more than 2 seventeen hundred dollars worth and we will give this to the winner so there is something worth fighting for today and by the way create something amazing so you know where to hold this challenge.

We're also doing some kind of big promotion this weekend at flux Academy, so basically all of our courses are on a big discount, you know, a big promotion until Monday, so definitely go and check it out later if you want to improve your skills. Now look at what we are going to do here today in general. I'm not encouraging you to try to create a

website

in two

hours

, but let's practice the process and you'll see every step that I actually do when I work on real client websites, and of course in that case I don't.

I don't spend 15 minutes on it, I spend days and weeks on it, but it will give you an idea of ​​how we think and what the professional web design process really looks like. Okay, what do you need? So open the fire. your software so it's ready because as you saw, time is pretty limited in today's challenge, so open up your designs software. I already have an empty figma file, open it, open it if you have an account for a free AI imaging tool. uh, whether you're halfway there or something like that or you want to use stock sites and have a developer tool ready at your disposal, I would open a free web flow, a new blank web flow, uh, again, you can use whatever you want, I think. my air conditioning stops I have to have air to start well wait a second okay so I want to remind you something, let's have fun right nobody designs a nobody is going to win a prize here like you are going to win our prize right, but nobody is going to win design a award winning website in two hours this is just a challenge this is just a practice and I know you know I've seen some of the comments here before the stream starts saying hey I'm a newbie I'm here to learn and things like that are great and we have many tutorials and many similar workshops for you to learn, but today I encourage you to try to learn by practicing and really spend. the time I'm working to work too and just try to do something right and please don't leave me hanging, no one posts their work in the comments when I ask for a review, I really want to see your work. and give them feedback and hopefully we'll see some really creative work being done here today so remember there's no pressure to do the most amazing thing in the world but let's try to do something fun so let me share my screen and I'm jumping right into the GPT chat and let's see what's going to happen here.

I've practiced this before and it's actually creating some crazy things and I have no idea what's going to happen, so here's the message I'm going to use. generate a random summary for a landing page, it should include the company name, category, target audience, landing page goals, let's see what happens, are you ready, let's do this? Alright, Company Name, Spark, Technology Solutions Category, Technology, Consulting Solutions, Target Audience, Small and Medium Enterprises SME across various industries including IT, Finance, Healthcare and E-Commerce. Homepage objectives establish credibility. The home page is intended to highlight the home. Experience in technology solutions to provide an innovative technology solution that showcases previous successful projects.

What does that really mean? What does an innovative technological solution really mean? Generate leads primarily. The goal is to capture the attention of potential leads, encourage them to submit their contact information through a lead generation form. Show the services they are doing. Clouds. They are software development. Cloud solution. Cyber ​​security. Alright. Highlight the benefits. The home page will focus on benefits. It would be very clear and prominent, yes, and it will be optimized for mobile devices. Overall, the homepage aims to present Spark Tech Solutions as a reliable and results-oriented technology partner for SMEs, okay, that's great, now look what we are going to do with it.

I'm going to add another post that builds on this quick creation of copy for a landing page that includes three navigation sections and a footer. We're not going to be able to build something huge in two hours, so let's just focus on three. sections and a footer and try to design something interesting out of that, let me press Enter on that and now it's actually creating the copy for us, so the main image of the main navigation section oh actually, he is giving ideas for designing a diverse team. collaborating on a project, I'm not necessarily going to use that, but the title Power your business with a cutting-edge technology solution is good, so keep in mind that here we have the subtitle call to action, then the second section is the services and then he gives us the services number one service IT consulting service software development Cloud solutions well, actually five very good services and then testimonials from the sector number three he's actually giving us the testimonial, this is great, so now we have all the content even with the footer so that's great.

Great, I'm going to share this with you so you can copy all of this and start working with this too. Let me share this with you. I'm going to copy the link to this. Alright, copy and then you'll be. everything is going to be able to be okay, I really hope this works, so I'm pasting this, oh wait, I'm pasting this right here in the chats and, um, yeah, okay, now you have it okay, now that you have it. let me let me look I need to see the schedule to remember what we're doing now we've generated a random summary and now we have 10 minutes to create the outlines so this is what I'm going to do what to do I'm going to jump here to my screen not to the review screen, to the design screen for 10 minutes and this is what I'm going to do.

I'm going to press play, I'm going to put on some music and then I'm going to take this into Figma and start creating my own wireframe. You do the same and we'll talk again in 10 minutes. Let me also set the timer here so this plays here, okay, let's do this, let's start, let's start, we're on it. We're in, let's put on some music, dance, dance. I just want to have fun, clap your hands, let's do this dance, dance, I just want to have fun, clap your hands, turn around now and dance, dance. I just want to have fun, clap your hands, turn around now and dance. dance I just want I just want to run I just want to show up and do business okay I don't know foreigner sunshine thank you foreigner I'm waiting for Sunshine waiting for Sunshine foreigner foreigner foreigner let's try to finish this I know it's uh It's a bit of a boring copy and paste job here just to set things up here, but you have to do it right, okay, let me try to do something like, take me home, you want to know, honey, you drive me crazy, more minutes, let's see what we do. you can tell me the only thing you can do is get me home very on time with the music let's pause and see what we have okay actually there are five five more seconds left okay so this is very ugly what we have here, but basically we have the structure instead, so I took all of this copy and structured it into three sections, we have the navigation, we have the hero, we have what I didn't paste all the different Services here, but We'll do this later, we have the testimonials and then we have the footer of page.

By the way, there are a lot of UI kits that pretty much already have templates for all of these things, I don't know if you're familiar with them. relum or there are tons of figma ui kit that you can basically have the structure and you can paste the text now the reason I'm not using them is just because I feel like they are a little limiting and if I want to change things later right now I like it to be free form and I don't really have it, you know, it's not easy for me to change, so later when I get to the design, yeah, it's more free form, so that's my favorite way. to do it and uh, yeah, we have something we can work with right now, okay, so I'm not going to go through your wireframes because at this point I'm assuming it's not too different from what I have now. now, but now basically the fun begins, so let's see where we are now, so we've created the wireframes, now it's time to move on to the inspiration and the mood board.

By the way, below this video I've put a bunch of resources that I'm going to use one of them is this PDF inspiration manual that we've created with a bunch of websites and stuff like that to inspire you, so feel free to check out below this video, there will be some of the resources. that I'm going to use throughout the project, so I've prepared it ahead of time and I'll share it with you, otherwise it's not fair that you don't have it on hand, so we're ready for the next 15 minutes. I set the timer, um, let's get together, let me go ahead and change that to 15 minutes, okay, and we're ready for round number two.

This is inspiration and mood analysis, so the idea in this step is just for context. I know there are people here who might think what am I supposed to do now the idea right now is that we have a brief right. Chad GPT gave us a rundown on what we need to communicate who this is for and what the goal is here. So now we are trying to get inspiration to build a visual language. What color should we use? What type of layout should we use? What fonts should we use? So let's create a bunch of selected images that will inspire.

Let's communicate in that direction so we can make better decisions and how I'm going to do this. I'll look at the report. I'm going to write down some keywords that those are the key things that I want. communicate and then I'll look for images that I think communicate these ideas well, so I'll just paste a bunch of images into my figma. I'm going to start with a lot and then I'm going to curate them into something that I feel is coherent, so that will guide me later in the design. Well, I hope you're ready. Let's go ahead and do 15 minutes starting right now.

Let's get back to the music and do it.green, okay, so we've seen, we've seen them all right. I'm going to go ahead and create the poll now, this is my first time doing this live on YouTube, oh my. God, my computer is destroyed, okay, let me close all this, my computer is not able to handle all this pressure, okay, wait, wait, wait, let's do a survey, let's do a survey. God, it's not working, oh no. my youtube poll is not working well it starts a poll q wait wait wait wait wait we need to make a proper poll I can see you screaming in the comments but we need to make a proper call why can't I make a poll can I don't make a poll omg , I can't do a survey.

I don't know why, but I can't do a survey. Okay, so I'm just looking at the comments. I'm looking at the comments. look at a lot of illustrations, let me remind you that we had the web flow direction, we had the fabric and then we had the green illustrations, um, what am I doing here? It's changing everything, so I see a lot of illustration, illustration fabric, web flow, uh, illustration, illustration fabric. webstream webstream webstream stream oh my god oh my god I see oh this is not fair I really can't count them now I see tons of webstream why can't I do the survey so annoying?

Okay, so I have to say that I'm seeing I'm seeing a lot of web flow and a lot of illustrations, so you know what we're going to do. What we're going to do is let us give you both the prize. Let me let me try to bring my camera What's my camera? Okay, so that's what we're going to do. We will have two winners. It was too difficult. It was too tight and we didn't have an official poll to count. send them all, so both the green artwork and the web flow, send an email to our support team, which is the Flux Academy team, exactly how you sent it and let them know that you were the one who did it.

You already have an email. thread with us and uh Kaya will help you set the price. This has been truly incredible. The first time I did it, it was very, very fun. I hope you enjoyed it too. I hope you remember what I said. You'll see Flux Academy and you'll see all of our courses that delve into everything we've done today so you can do it professionally for clients and be able to charge a lot of money. for doing it and that's it, let's finish for today. This has been the longest livestream I've ever done and I'm like dead, but well done for the work you all have been doing.

It's been a lot of fun, peace for today, see you next time, bye.