I've actually played with ChatGPT's front end development capabilities quite a bit. It's astonishingly capable for simpler things. It's particularly eerie when you ask it to insert text along with the code. A testimonial or about section for instance.
As an example, here's my request for a simple website for a photographer named "Renee":
I'd like you to create a single page website for a photographer. The business is called "Renee's Photography". The website should use the Bootstrap framework with HTML5 and CSS. It should have a menu bar with the site title on the left and navigation buttons on the right that link to "Gallery", "About", "Prices" and "Contact". Below the menu bar is a hero image with an inspirational quote about photography. Below that is the "Gallery" section of six images in a grid. Below that is the "About" section that describes Renee's love of photography and her qualifications, plus a testimonial from a client. Below that is a "Pricing" table featuring standard industry prices for a photographer. Below that is the "Contact" section with a form for people's name, email and message. The website uses placeholders for all images. The website has light blue elements with sans script fonts.
ChatGPT spat out about 200 lines of code that I simply pasted into JSFiddle. Here's the end result: https://jsfiddle.net/zd3sruL8/
Not a bad little website for one paragraph on my part!
Damn, that's a really cool example! I love that we can basically treat ChatGPT or other LLMs as another person we're giving a detailed brief to. Having that conversational back-and-forth is so much more natural and intuitive. Thanks for sharing!
I've actually played with ChatGPT's front end development capabilities quite a bit. It's astonishingly capable for simpler things. It's particularly eerie when you ask it to insert text along with the code. A testimonial or about section for instance.
As an example, here's my request for a simple website for a photographer named "Renee":
I'd like you to create a single page website for a photographer. The business is called "Renee's Photography". The website should use the Bootstrap framework with HTML5 and CSS. It should have a menu bar with the site title on the left and navigation buttons on the right that link to "Gallery", "About", "Prices" and "Contact". Below the menu bar is a hero image with an inspirational quote about photography. Below that is the "Gallery" section of six images in a grid. Below that is the "About" section that describes Renee's love of photography and her qualifications, plus a testimonial from a client. Below that is a "Pricing" table featuring standard industry prices for a photographer. Below that is the "Contact" section with a form for people's name, email and message. The website uses placeholders for all images. The website has light blue elements with sans script fonts.
ChatGPT spat out about 200 lines of code that I simply pasted into JSFiddle. Here's the end result: https://jsfiddle.net/zd3sruL8/
Not a bad little website for one paragraph on my part!
Damn, that's a really cool example! I love that we can basically treat ChatGPT or other LLMs as another person we're giving a detailed brief to. Having that conversational back-and-forth is so much more natural and intuitive. Thanks for sharing!