Here is an overview of the steps taken to build this school website, from design to development.
The designed phase was done by an amazing designer, and she use Figma. Link [https://www.figma.com/file/BHROxIwf2TurF1LUCKzUD9/Majiwe-Vista-Academy?type=design&node-id=0%3A1&mode=dev&t=PO8yDyITcWjQfBVq-1]
Here is what she did:
Started with researching similar school websites for inspiration and understanding user needs.
Created wireframes using tool Figma to map out the layout and structure of the website.
Designed mockups based on wireframes to visualize the look and feel of the website.
I chose React.js for its component-based architecture, which facilitates reusability and makes managing complex UIs easier.
Initially utilized vanilla CSS for simplicity and control over styles. However, considering the scalability and rapid development, Tailwind CSS seems like a more preferable choice.
Developed individual components for different sections of the website such as header, footer, navigation, etc.
Integrated the designed mockups with React components, ensuring consistency in design and functionality.
Conducted testing across various devices and browsers to ensure compatibility and functionality. (😂😢😂This is why I regret using Vanilla CSS, should have used Tailwind CSS)
Deployed the website to netlify, ensuring it's accessible to the intended audience.
I acknowledge the need for improving responsiveness across different devices and screen sizes. This includes optimizing layouts, font sizes, and image scaling for better user experience.
Implementing more interactive features such as dynamic forms, real-time notifications, etc., to enhance user engagement.
Ensuring the website complies with accessibility standards to cater to users with disabilities.
Optimizing the website's performance by minimizing load times, reducing unnecessary requests, and optimizing assets.
Emphasize the importance of continuously iterating and improving the website based on user feedback and emerging technologies.
Building the school website involved a combination of design thinking, technical expertise, and continuous refinement. While React.js and vanilla CSS were initially chosen for their familiarity and flexibility, there's a clear recognition of the benefits of transitioning to Tailwind CSS for streamlined styling. The journey doesn't end with the initial development; it's an ongoing process of evolution and improvement to deliver the best possible experience to users. There is a lot I need to cover in development. Software Development is a learning journey and I am in for it!