I am thrilled to share my recent experience with @HerTechTrail, where I had the incredible opportunity to receive a scholarship to advance my web development skills. My coaches Edozie Magdalene Princess and Broma Gift, they have been a great help, with making this journey so far so easy and worth doing. This journey has been both challenging and rewarding, as I delved deep into learning JavaScript, HTML, Bootstrap, and CSS. HerTechTrail's comprehensive program has significantly improved my ability to create dynamic and responsive web pages, culminating in the creation of my personal portfolio page.
The Final Project: My Personal Portfolio
For my final project, I was tasked with creating a personal portfolio page that showcased my newfound skills. This was an exciting opportunity to demonstrate what I had learned and to create a platform that highlighted my projects, skills, and experiences. I aimed to design a sleek and modern portfolio that not only looked good but also provided a seamless user experience
https://sommysproject.netlify.app/
The Process
Planning and Design:
I started by sketching the layout and structure of my portfolio. This helped me visualize the final product and identify the sections I needed to create.
Using wireframes, I planned the placement of each element, ensuring a logical flow and user-friendly design.
HTML and Bootstrap:
I structured the content using HTML5, ensuring semantic markup for better accessibility and SEO.
Bootstrap's grid system was instrumental in creating a responsive layout. I utilized various Bootstrap components to enhance the design, such as navigation bars, cards, and buttons.
CSS Styling:
Customizing the appearance with CSS was crucial to give the portfolio a unique look. I focused on typography, color schemes, and spacing to ensure visual consistency.
Media queries played a significant role in making the portfolio responsive. I adjusted the layout for different screen sizes to ensure optimal viewing on all devices.
JavaScript for Interactivity:
To enhance user experience, I added interactive elements using JavaScript. This included form validation, dynamic content updates, and smooth scrolling effects.
I also used JavaScript to create a responsive navigation menu that adapts to different screen sizes.
Pushing Code to GitHub and Hosting:
After completing the development, I pushed my code to GitHub to maintain version control and share my work publicly. This involved creating a repository and using Git commands to manage my codebase.
For hosting, I used GitHub Pages and Netlify. GitHub Pages provided a simple way to host my static website directly from my repository. Alternatively, I used Netlify for its robust features like continuous deployment and custom domain support.
Challenges Encountered
Reshaping the Logo Size to Fit in the Banner Section:
One of the initial hurdles was resizing my logo to fit perfectly within the banner section of my portfolio.
The logo needed to be clearly visible and proportionate to the other elements in the banner. After numerous adjustments and a lot of trial and error, I finally managed to resize it effectively. This process taught me a lot about image scaling and the importance of maintaining aspect ratios.
Adjusting the Display Picture on the About Page:
Similar to the logo resizing issue, I faced difficulties with adjusting my display picture on the About page.
Ensuring that the image was neither too large nor too small, and that it fit well with the overall design, required several iterations. I experimented with various CSS properties and Bootstrap classes to achieve the desired look.
CSS Design for Perfect Mobile Viewing:
Another significant challenge was ensuring that my portfolio was perfectly viewable on all mobile devices. Creating a responsive design that looked great on desktops, tablets, and smartphones involved extensive testing and tweaking.
I had to delve deep into media queries and responsive design principles. While Bootstrap provided a good foundation, fine-tuning the CSS to achieve a perfect balance was a learning curve.
Results
The result of my hard work and persistence is a sleek, modern portfolio that showcases my projects, skills, and experiences effectively. The portfolio not only demonstrates my technical proficiency but also my eye for design and user experience. It marks a significant milestone in my journey as a web developer, showcasing my ability to combine creativity with technical expertise.
Learning Outcomes
Throughout this project, I gained invaluable experience and deepened my understanding of several key web development concepts:
HTML and Bootstrap:
- I learned to create well-structured, semantic HTML5 documents and leverage Bootstrap's powerful grid system and components for responsive design.
CSS:
- Customizing styles with CSS taught me the importance of consistent design and how to use media queries to ensure a responsive layout. I also improved my skills in using Flexbox and Grid for layout management.
JavaScript:
- Adding interactivity with JavaScript allowed me to enhance user experience. I learned to manipulate the DOM, handle events, and create responsive elements that adapt to different screen sizes.
Version Control and Hosting:
Pushing my code to GitHub helped me understand the importance of version control in collaborative projects. Using Git commands to manage my codebase and maintaining a public repository improved my workflow.
Hosting my portfolio on GitHub Pages and Netlify provided practical experience with deploying web applications. I learned to configure deployment settings and handle potential issues that arise during the hosting process.
Problem-Solving:
- Overcoming the challenges of resizing images and ensuring responsive design taught me problem-solving skills and the importance of persistence and patience in web development.
Here is a workthrough of my Portfolio project
https://youtu.be/mG1ipDr5JX8?si=s2lTvcow4iwdLemC
Conclusion
My experience with HerTechTrail has been transformative. The challenges I encountered and overcame have made me a more skilled and resilient developer. I am proud of the portfolio I created and excited about the future opportunities it may bring. This project has solidified my passion for web development, and I am eager to continue learning and growing in this field.
Thank you for following my journey, and I look forward to sharing more of my experiences and projects with you in the future.