For the development process, I used HTML5 and CSS3 to build the structure and styling of the website, while JavaScript added interactivity to create a more engaging user experience. I implemented Flexbox and CSS Grid to ensure a fully responsive design that adapts smoothly to different screen sizes. Media assets, including images, were optimized to reduce loading times and improve performance.
For this project, I have decided to use ReactJS instead of plain HTML/CSS/JS because it’s component-based (so code is reusable), has state management (UI updates automatically when data changes), uses a Virtual DOM (faster updates), and makes big projects easier to maintain and scale. It also comes with a huge ecosystem and modern tools that speed up development.
This chart shows the proportion of programming languages used in my final project:
JavaScript (41.9%) – Powers the interactivity and dynamic features of the site. I used it mainly for React components, event handling, and rendering content.
HTML (37.7%) – Forms the structure of each page. In React, I write JSX (a mix of JavaScript and HTML-like syntax), which is compiled into HTML for the browser.
CSS (20.4%) – Handles the styling and visual design, such as colors, layout, fonts, and responsive adjustments for different devices.
GitHub automatically generates this breakdown by scanning all the files in my repository. It’s a quick snapshot of how much each language contributes to the entire codebase.
The workflow began with setting up a clean and organized folder structure to separate HTML, CSS, JavaScript, and asset files.
I then created the header and navigation system, incorporating sticky navigation so menus remained visible as users scrolled.
The hero section was designed to be the visual highlight of the homepage, featuring a bold headline and a clear call-to-action. I followed this by building the product and service sections in a grid layout for easy scanning, and then adding a footer with essential contact information, address details, and links to social media. Once the content was in place, I tested the site’s responsiveness across multiple devices and fixed CSS issues as they appeared. I also optimized the performance by compressing images, minimizing CSS, and verifying improvements using Lighthouse.
The project, however, came with its fair share of challenges. One of the first issues I encountered was a mobile navigation bug, where the menu failed to open correctly on smaller screens. I resolved this by adding targeted media queries and refining the JavaScript toggle function. Maintaining consistent colors and typography was also a hurdle, as there were minor inconsistencies across different pages. To address this, I established global CSS variables for both color and typography. Midway through the development process, I faced an unexpected personal challenge when I fell sick for several days, which disrupted my workflow. To adapt, I shifted to working in smaller sprints, focusing first on completing the most critical features and leaving minor refinements for later once I felt better. Another significant challenge was a responsive layout issue on tablets, where grid elements occasionally broke their intended arrangement. I fixed this by refining the CSS breakpoints and performing tests on actual devices to ensure consistent layouts across all screen sizes.
While working on this project, I also faced significant challenges in deploying the website. The process was far more complicated than I had anticipated, with numerous steps that needed to be completed in the correct order. I encountered issues setting up the hosting environment, configuring the build process, and ensuring that all assets loaded correctly in the live version. Each obstacle felt frustrating at first, as it delayed the launch and disrupted my momentum. However, these challenges became an opportunity to dive deeper into research and problem-solving. I carefully studied documentation, explored developer forums, and tested different approaches until I found the right deployment method. Through persistence and learning, I was finally able to publish the website successfully. This experience not only improved my technical skills but also reinforced the importance of patience and thorough research in overcoming complex development hurdles.
Comments
Post a Comment