A fully responsive website demonstrating a step-by-step guide to building a personal computer from scratch. This website provides step-by-step instructions, images, and a clean, easy-to-navigate layout to help users choose components, assemble their PC, and get everything set up. Built with HTML and CSS, it reflects my skills in web development and UX/UI design, while also showing my ability to create clear, user-friendly tutorials.
- HTML/CSS: Gained experience building responsive, user-friendly websites with HTML and CSS.
- UI/UX Design: Focused on clean, easy-to-follow navigation, creating a smooth user experience throughout the website.
- Responsive Design: Learned how to design a website that is mobile-friendly and adapts to different screen sizes.
- Component Selection: Designed a clear flow for selecting the right PC components for various needs (gaming, content creation, etc.).
- Assembly Instructions: Created detailed steps and accompanying images to help users assemble their PCs with ease.
- Helpful Resources: Incorporated links to tools like PCPartPicker to help users make informed decisions when selecting parts. This tool shows what components are compatible and what is the current lowest price you can buy the product for.
- Modular Design: Organized the content into easily navigable steps, ensuring the tutorial is straightforward and approachable.
- Image Integration: Used images of PC components to enhance the tutorial’s clarity and make the learning process more visual and engaging.
To explore the code of the website, you can browse the repository. Key files include:
- index.html: The homepage of the website that introduces the tutorial and directs users to the first step.
- step1.html – step12.html: The full 12-step build tutorial, from component selection through final setup.
- about.html / contact.html / sent.html: An About page and a working contact form (
contact.htmlposts tosent.html). - style.css: Contains the website's styling, ensuring a clean and modern design.
- Resources/: Reference photos for each PC component (CPU, GPU, motherboard, RAM, PSU, storage, etc.) used throughout the tutorial.
Here is a video walkthrough of the entire website, which demonstrates how the guide works from start to finish:
WebsiteHowToBuildaPC.mp4
In the future, I plan to enhance the website with new features:
- Integration of tools such as PCPartPicker: Allow users to access the tool directly from the website instead of accessing another one.
- More Detailed Steps: Expand the tutorial with short videos demonstrating the process.