My First Website Development Journey

Introduction

This journey marks my first ever venture into website development tasked upon me. With the freedom to choose any technology, this project was not only a challenge but an expansive learning curve that introduced me to new tools, concepts, and the intricacies of responsive design.

Choosing the Technologies

React

Having spent my summer grappling with React, I found it natural to lean towards it for this project. Its component-based architecture and the vast ecosystem made React an obvious choice for the foundation of my first website.

Material-UI

The choice of Material-UI as the UI library was driven by its array of "cool" components. Material-UI's emphasis on responsiveness—especially with its container component—promised a seamless design experience across different device sizes, a feature I was keen to explore.

The Design Phase

Venturing into Figma

I've always heard that a design-first approach significantly eases the development process. True to the advice, I decided to create mockups on Figma. Despite my initial unfamiliarity with the tool, its capabilities—ranging from component creation, responsive frame adjustments, to simulating page navigation and animations—were impressive. However, given the plethora of features and my aim to keep the project manageable, I opted for simplicity, focusing on the essential elements of text, color, and images. Although the final design deviated from the initial mockups, they served as invaluable guides, preventing decision paralysis during the development. <a href="https://www.figma.com/file/ShLZRQ6ok2pUdYyS2hbc1k/Website-Wireframe?type=design&node-id=0%3A1&mode=design&t=jWd1qHsdko0slJzg-1" target="_blank">Link to Figma</a>

Development Insights

Tackling Responsiveness

Responsiveness was a concept I truly came to grasp through this project. Initially designed with a desktop-first mindset, the website's layout faltered on varying screen sizes. Material-UI's container and grid components, however, were lifesavers, enabling me to effortlessly adjust layouts for different devices. The ability to globally set typography sizes further streamlined the responsiveness across the website.

Deployment

Choosing Netlify

For deployment, I chose Netlify due to its simplicity in facilitating continuous updates through the Netlify CLI. An added bonus was Netlify's serverless form feature, which effortlessly integrated the website's form, enhancing functionality without additional coding complexity.

Conclusion

This project was a comprehensive learning journey, from picking the right tools to navigating design intricacies and addressing technical specifics. It underscored the importance of a design-first approach, introduced me to the challenges of creating responsive designs, and enlightened me on the nuances of web protocols and browser compatibilities. Deploying on Netlify rounded off the project with a lesson in seamless web application hosting and update management. Through this endeavor, I've gained invaluable insights and skills that will undoubtedly shape my future projects.

---