How to create a portfolio website with Claude
Valentina Adami
Freelance Generative AI Trainer | Conversation Designer & Prompt Engineer | Empowering professionals and teams to master Generative AI
As I wrote in a previous article, one of the most interesting features the Claude’s family LLMs provide is the capabilities to create standalone content in a separate window.
Today’s project will show you how you can easily setup a personal web site -or a portfolio website- using standard web technologies such as HTML5, CSS, Javascript and Bootstrap.?
This is a ‘pet project’ aimed at empowering users unfamiliar with web-related tasks and helping them overcome their fear of coding.
In my opinion, the most significant benefit of using Claude in this context is the ability to learn or upskill more quickly than with traditional approaches. Typically, one might read books or articles, watch countless videos, and postpone practice until they feel they've mastered all the concepts. As a result, they never actually start.
Let's move on to the main topic. Here’s the plan:
Let’s go!
1. Setting the stage and the initial prompt
As a prerequisite, create a folder on your computer, for instance, my-first-website following this structure:
+ index.html
+ about.html
+ servizi.html
+ contatti.html
+ css
??└── style.css
+ js
??└── script.js
Start your journey by giving Claude clear instructions. Focus on the use case: avoid excessive details as the prompt will be rewritten.
You might start with a prompt like this:
Create a personal website consisting of 4 pages:
-index.html
-about.html
-services.html
-contacts.html
Use HTML5, CSS, Bootstrap, and vanilla JavaScript as technologies. Create common elements on the pages, such as the navigation bar and the footer. Create one document at a time. For the look and feel, take inspiration from Google.
Feel free to adjust or edit the promt according to your need.
2. Have Claude rewrite the initial prompt
Now, move on the Anthopic console,? choose the option "Generate a prompt".
Copy and paste the above prompt and press Continue. Chances are you will receive a prompt like the following:
You are tasked with creating a dynamic website portfolio using HTML5, CSS, Bootstrap, and vanilla JavaScript. The website consists of four pages: index.html, aboutme.html, servizi.html, and contatti.html. All pages share the same header and footer.
Follow these steps to create the website structure:
1. HTML Structure:
???- Create four HTML files: index.html, aboutme.html, servizi.html, and contatti.html
???- Use the HTML5 doctype and include appropriate meta tags
???- Create a common header with the text "Valentina Adami" followed by her profession
???- Create a common footer with email, social media icons (LinkedIn, YouTube, Facebook) linked to respective profiles, and copyright information
???- Use semantic HTML elements where appropriate (e.g., <header>, <nav>, <main>, <footer>)
2. CSS and Bootstrap:
???- Include the Bootstrap CSS file in the <head> of each HTML file
???- Create a custom CSS file (styles.css) and link it after the Bootstrap CSS
???- Use Bootstrap classes for responsive layout and components
???- Style the header, footer, and main content areas consistently across all pages
???- Ensure the design is mobile-responsive
3. JavaScript:
???- Create a script.js file and link it at the end of the <body> in each HTML file
???- Implement any necessary interactive features or dynamic content loading
4. Output Format:
???Provide the complete code for each file in the following format:
<file name="index.html">
<!-- HTML content for index.html -->
</file>
<file name="aboutme.html">
<!-- HTML content for aboutme.html -->
</file>
<file name="servizi.html">
<!-- HTML content for servizi.html -->
</file>
<file name="contatti.html">
<!-- HTML content for contatti.html -->
</file>
<file name="css/styles.css">
/* CSS content */
领英推荐
</file>
<file name="js/script.js">
// JavaScript content
</file>
Ensure that all files are properly structured, indented, and include necessary comments for clarity. The website should be functional, responsive, and adhere to modern web development best practices.
The advantage is to obtain an optimized prompt that will guide the model to create each web site component.
Pay attention to point #4: it is good practice to separate the HTML files from the presentation layer (the CSS, or stylesheet) and the interaction layers (the JS file).
Again, feel free to adjust your own content and preferences according to your needs.
3. Generating the code
Now, you can copy and paste the optimized prompt back to Claude public webchat and start 'dancing' Your conversation history should look like figure 1:
When the generation is complete, click on the chips to see the code generated.?
Tip: download all the files and paste them in the correct folder. You might need to check the correctness of the css and js files.
Your project folder should look like figure 2:
Now let's open the browser to view the result. Navigate to the project folder and double click on the index.html file. You will see the homepage appearing as in figure 3.
4. Customize and make adjustments
Now comes the fun part! For instance, you can ask Claude to modify a specific section in your index.html by uploading a txt file with a professional writer's description of yourself.?
?If you're not confident in your writing, don't worry. You can ask Claude to translate your content or even make it more engaging. This step transforms your site from a generic template to a true reflection of your personal brand.
Additionally, you can ask to create a new page: portfolio.html? to showcase your projects:
Please add the portfolio file following the structure outlined above and attach the files containing the corresponding content.
The model? can create attractive card layouts and populate them with your content.
5. Going live
When you are ready, you might ask Claude for instructions on how to upload your files on a hosting provider:
please provide correct information on how to host this website online. Consider diverse options, starting with free hosting first.
With just a few clicks, your portfolio can go from your local machine to a live website, ready to impress visitors from around the globe.
For a brief overview of the preceding steps, check out this 3-minute video.
Check out my github repo for the complete prompt and a working example.
It doesn't end here! You can go creative with any HTML-related widgets.
HTML widgets
As an alternative to web site design, you can create your own widgets like a Pomodoro timer or Color harmony explorer. I have published them so they available on Claude platform. Check out my github repo to view the prompt and the istructions.
Some final thoughts
As a conclusion, creating a professional portfolio website has never been easier or more accessible. With Claude's guidance, you can design, build, and launch your site in no time, even if you have little to no coding experience.?
That makes me think:
So, is this to say that we don’t need web developers anymore?
Nope, the domain experts are still needed!?
Those are the ones that can spot a correct code generation. Sometimes LLMs don’t get it right. Have a try yourself: if you run the generic prompt, it is highly probable you will get a single html file with css and javascript all packed together. Though the goal is reached, this is far from the well-known best practices in software development.
This goes to a broader topic, how can you rate an LLM output if you are not the expert in what you are asking about?
That’s why Generative AI should be an ally in our work, not a substitute.
Have you used AI to help with web development before? Share your experiences or questions in the comments below – I'd love to hear your thoughts?
Thank you for taking the time to read this.?
Share your thoughts and questions in the comment, I look forward to reading them ??
Happy exploring, and feel free to get in touch with me. See you soon! ??
che spettacolo !
genAssess - AI Skills Assessments | Conversational AI & Automation Specialist | Founder, Speaker, Educator & Problem Solver in Recruitment and Talent Tech
7 个月Really cool use case .