how i made my website

Summary

In this video, Char takes viewers through the process of creating her personal website, emphasizing the joy of web development and the creative freedom it provides. Drawing inspiration from the early internet's quirky, Y2K-style websites, Char combines fun design with modern tools like Figma, React, and Tailwind CSS. She shares insights on both front-end and back-end development, challenges faced during programming, and the satisfaction of completing the project. Alongside tips for beginners, Char encourages others to create their own websites, highlighting the importance of fun and personality on the web.

Takeaways

• 😀 The rise of standardized website templates has led to personal websites becoming less creative and more generic.
• 😀 Char's childhood memories of fun, personalized websites inspired the creation of her own website in 2023.
• 😀 Personal websites, once considered digital scrapbooks, used to showcase creativity, like pixel art and flash games.
• 😀 Char's website project was both a fun personal endeavor and a professional practice opportunity in web development.
• 😀 Char used Millanote to plan her website, creating mood boards and organizing ideas in a visual format for a more intuitive approach.
• 😀 Figma was used to design wireframes for the website, allowing Char to visualize layout ideas before coding.
• 😀 Char designed her website with a Y2K-inspired aesthetic but adapted it with modern web tools and frameworks like React and Next.js.
• 😀 Char emphasizes the importance of accessibility and checks, using resources like Checklist Design and WebAIM for final design reviews.
• 😀 The process of building the website was a mix of fun and frustration, especially when working with drag-and-drop windows and troubleshooting library compatibility.
• 😀 Char's website featured interactive elements, such as draggable windows, with a focus on fun rather than complex backend functionalities.
• 😀 Despite struggles with backend tasks, Char was able to deploy her website using platforms like Vercel and optimize it with tools like webp for faster loading speeds.

Q & A

Why does Char mention that personal websites today often lack personality?

Char reflects on how modern websites have become more generic and less fun, as they are often seen as digital business cards or lists of links to social media, unlike older personal websites that were more creative and expressive.

What was the inspiration behind Char's website design?

Char was inspired by the fun and expressive personal websites of the early internet, particularly those from the Y2K era, and wanted to incorporate interactive elements that reflect her personality and artistic style.

What tool did Char use to plan her website before starting the design and development process?

Char used Millanote to plan her website, as it allowed her to visually organize her thoughts, ideas, and design concepts with sticky notes and images, making the brainstorming process more intuitive.

How did Char approach the wireframing of her website?

Char created wireframes for her website using Figma, focusing on the structure of the site without getting into details like colors. She mentioned that this step helped her visualize the layout before jumping into the actual coding.

What challenges did Char face with the drag-and-drop functionality for her website?

Char faced difficulty with the drag-and-drop functionality because the library she was using to make the windows draggable became incompatible with the updated version of React she switched to. This required her to rewrite the system with a different library.

What development framework did Char use for her website, and why did she switch to it?

Char initially used Gatsby.js with React to build a static website but later switched to Next.js because she found the development experience more streamlined, and a friend recommended it for its ease of use.

Why did Char opt for Tailwind CSS over Bulma for styling her website?

Char chose Tailwind CSS because it offered more customization options for styling her website components, whereas Bulma, which she had used before, had more predefined elements that were less flexible.

How did Char ensure the accessibility and design quality of her website?

Char conducted design and accessibility checks using tools like Checklist Design, WebAIM, and WCAG guidelines to ensure her website was usable by a wider audience and met accessibility standards.

What tool did Char use to deploy her website, and why did she switch hosting services?

Char used Vercel to deploy her website, switching from Google Firebase because Next.js, the framework she was using, is developed by Vercel, which made the deployment process smoother.

What future plans does Char have for her website?

Char plans to add a Tamagotchi journal to her website, where she will log her experiences with Tamagotchi pets, an idea inspired by an old public Tamagotchi obituary she came across.