[0:00] I'm going to show you how I created a
[0:02] website for a company using four popular
[0:04] AI coding tools and at the end and
[0:06] according to my experience I will tell
[0:08] you my opinion about the best AI coding
[0:10] tools to create a website. These tools
[0:13] are free to use and you can have the
[0:15] source codes and you can sell it or host
[0:17] them in any server or whatever. Here we
[0:20] have chatgpt claude gemini and deepseek.
[0:25] I've opened them in separate spaces so
[0:27] you can get clear idea about user
[0:29] experience of each tool. Before we start
[0:31] building our website, we need to figure
[0:33] out what content we want to include.
[0:35] Company information has been provided by
[0:37] the client and I am going to use it to
[0:39] generate SEO friendly content needed to
[0:42] build the website using chat GPT. Here I
[0:45] have defined the role and given all the
[0:48] information about the company and about
[0:49] what should be included
[0:51] at the end. And I've asked for a SEO
[0:53] friendly well ststructured professional
[0:55] content. I am not going to create
[0:58] content using each model because of my
[1:00] goal is to find out best model for web
[1:03] development not for content writing. If
[1:06] we generate content using all of those
[1:08] definitely they're going to be
[1:09] difference between each other. Then we
[1:12] cannot compare websites fairly. Okay.
[1:15] Now we have the content. Let's get into
[1:17] writing the prompt.
[1:20] I want you to act like a professional
[1:21] web developer. Create a both
[1:24] professionallook and modernl looking
[1:25] website for a company using the
[1:27] following content. Use a decent color
[1:30] theme, hover effects, ear effects, and
[1:34] animations to keep the visitors engaged.
[1:37] You can use HTML, CSS,JS,
[1:40] libraries, frameworks as you wish, but
[1:43] you're not supposed to change the given
[1:44] content below. Better the prompt, the
[1:47] better results. That is my strategy.
[1:51] Okay. Now we have both the prompt and
[1:53] the content. Let's give this prompt and
[1:56] content for each AI model. First let's
[1:59] try with chat GPT.
[2:04] Okay. Next, let's give the prompt and
[2:06] the content to Claude. It looks like
[2:08] Claude accepted content a bit different.
[2:10] Cool way.
[2:12] Interesting.
[2:14] Next, we have Gemini. Mostly the same
[2:16] generating animation like Claude, but I
[2:19] think this is a little bit better.
[2:23] At last, Deep Seek Basic Generating
[2:27] Experience.
[2:31] Let's check on other models until these
[2:33] are finished. It looks like the first
[2:35] model we used, Claude and Chat GPT, are
[2:38] finished with the generation.
[2:42] I've opened separate VS Code and file
[2:44] manager windows for each model so we can
[2:46] compare them easily. First, let's review
[2:49] the code chat GPT generated. Unlike some
[2:53] other models, chat GPT haven't provided
[2:55] a built-in canvas to preview the code
[2:58] right here on the page. So, let me just
[3:01] create a new HTML file and open it in VS
[3:04] Code and paste the code chat GPT gave
[3:07] me. All right, let's open this HTML file
[3:11] using a browser and see the results. On
[3:13] the first look, we can see good loading
[3:15] effects, appear effects, hover effects,
[3:18] and scrolling effects on the page as
[3:21] instructed.
[3:23] Now, let's see what Claude had
[3:25] generated. Claude had provided with a
[3:27] built-in canvas for previewing codes.
[3:30] Let's have a look at this. Just like
[3:32] instructed Claude 2 have added hover,
[3:35] scroll, appear, and other effects to
[3:37] enhance user experience. Even though
[3:40] this page looks mobile responsive on the
[3:42] surface, some functions like this menu
[3:44] button does not seems to be working.
[3:47] Let's download this and open edited in a
[3:50] separate browser window for a maximum
[3:52] experience.
[3:56] Claude indeed have followed the
[3:58] instructions and created something
[3:59] beautiful for sure. Look at these
[4:01] navigation button functions. Claude have
[4:04] added scroll effects to navigation
[4:06] between sections.
[4:11] Let's again have a look at the design
[4:13] chat GPT created. Chat GPT also have
[4:17] added a likewise effect for navigating
[4:19] between sections but it is not as smooth
[4:22] as the one Claudia designed. Let's check
[4:25] the mobile responsibility of the design
[4:27] chat GPT gave. It looks like chat GPD
[4:30] have not gave much thought about mobile
[4:32] devices. Let's see how Claude had done.
[4:35] It seems even though the menu button is
[4:37] not working properly, design itself is
[4:40] not breaking on mobile devices. That's
[4:42] another point compared to chat GPT.
[4:47] Let's move on to the next model, Gemini.
[4:51] The design Gemini provided feels much
[4:54] lighter and smooth, and the effects are
[4:56] also much like the previous two design.
[4:59] which chat GPT and Claude provided
[5:03] the menu button in this design works
[5:05] without any further modifications but it
[5:07] does not feels any smooth Gemini have
[5:10] offered this add Gemini features button
[5:12] let's see what it will do to the design
[5:15] until then let's check on deepseek oops
[5:19] looks like the session expired for
[5:21] deepseek no worries we can just continue
[5:24] from there until it is finished let's go
[5:27] back to chat GPT and ask it to improve
[5:30] the design.
[5:33] Website should be mobile responsive.
[5:36] Please update the code.
[5:41] While we are at it, let's also mention
[5:43] to Claude that the menu button on the
[5:46] design is not working properly.
[5:51] In the mobile devices, your menu is not
[5:54] working even if user clicked.
[5:59] Look at that. Unlike other models, Cluid
[6:02] can just fix or add the part that is
[6:04] needed to add or missing to the existing
[6:07] code without rewriting the whole code
[6:09] again, which saves us a lot of time.
[6:15] Now, the menu button works just fine and
[6:19] smoothly, just how I like it.
[6:24] Since Gemini is also finished with the
[6:26] design, let me copy this code into a
[6:28] HTML file and open it in a new window.
[6:34] New design and effects are not much
[6:36] different from the previous designs, but
[6:39] Gemini features thing have definitely
[6:41] has done something.
[6:45] A major different we can see in this
[6:47] design is that Gemini feature has added
[6:50] this AI advisor section. I don't think
[6:53] this will work without proper API
[6:55] integration, but let's check it out just
[6:57] for the review.
[7:02] As I said, it won't work without API
[7:04] configuration. If you want, you can get
[7:06] an API and ask follow-ups from Gemini on
[7:09] how to integrate it to your web page.
[7:12] Since I'm not planning to integrate an
[7:14] API for this project, I'm turning back
[7:16] to the previous design Gemini provided.
[7:21] By now, Deepseek must have done with the
[7:23] project. Let's check it out. Of course,
[7:26] it is finished. We can easily get a
[7:29] preview of the design by clicking run.
[7:31] Anyway, let's download this and open it
[7:33] in a browser.
[7:36] I can see the Deep Seek 2 have followed
[7:38] my instructions and added user
[7:40] experience enhancement like appear
[7:42] effects, navigation effects, hover
[7:44] effects, and even scroll effects. And
[7:46] look here, a form in the contact us
[7:48] section which no other model had thought
[7:51] to add.
[7:54] So far so good. Let's see what DeepS
[7:56] have done for mobile devices. Well,
[7:58] well, menu button working smoothly and
[8:02] the content is intact throughout the
[8:04] design.
[8:07] Deepseek is the only model which got
[8:09] mobile responsibility right on the first
[8:11] try. Let's have a quick look at the
[8:13] designs each model built. First model,
[8:16] chat GPT. Very basic color combinations
[8:19] and themes. No navigation effects or
[8:22] mobile responsibility.
[8:24] Honestly, I expected a more impressive
[8:26] design from Chat GPT.
[8:30] Then we have the design clawed built.
[8:33] Better scroll effects than chat GPT.
[8:37] Color combinations are also better.
[8:39] Smooth navigation effects are also
[8:42] present.
[8:43] Even though failed on the first try,
[8:45] Claude designed one of the best mobile
[8:47] responsive designs, too.
[8:52] The design Gemini generated have also
[8:54] used good color combinations and a
[8:56] modern theme. Smooth effects are also
[8:59] present on the desktop version, but the
[9:02] menu button animations did not improve
[9:04] even in the second design and the
[9:07] content looks bit empty and less vivid
[9:09] throughout the design. But that AI
[9:12] advisor section which Gemini feature
[9:14] added was impressive. Overall, I think
[9:17] this design is still better than the one
[9:19] which chat GPT gave. What do you think?
[9:23] Finally, we have the last design we
[9:25] generated using Deepseek. Deepseek also
[9:28] have used a light theme that aligned
[9:30] with the instruction I gave and the
[9:33] content is rich with vivid colors and
[9:35] images along the design. Effects are
[9:38] smooth and deepseek have given a lot of
[9:41] thought about mobile devices. This model
[9:44] was the only one that delivered the
[9:45] final content without any flaws or
[9:47] revisions. And also this was the longest
[9:50] generation with 1,287
[9:54] total lines. I will also show the total
[9:57] content length of other models in a bit.
[10:00] In fairness, I would say that the pages
[10:02] which Claude and Deepseek generated are
[10:04] a lot better than the ones Chat GPT and
[10:06] Gemini gave. Anyway, the final decision
[10:09] is yours to make.
[10:12] So, what do you think? Which design do
[10:14] you think is the best? Look at this and
[10:17] you can get a general idea about which
[10:19] model can handle a bigger task on single
[10:21] session and which model gives the best
[10:23] output in a single session. I have
[10:26] hosted these pages on pixelark.com
[10:28] website and put the links in the
[10:30] description below for you to check. I
[10:33] also have put the source codes on GitHub
[10:35] and the links for the directory is also
[10:37] linked to the description below. Go have
[10:40] a look. You're free to use these source
[10:42] codes for your projects. Comment down
[10:44] the model that you think is the best for
[10:46] web design. See you next time.