How I Built a Personal Portfolio Website Using Online Resources and Determination?
Here I’m sharing My Journey of Creating First Ever Website without Coding Knowledge. The Best part of this article is I have document all my progress, errors, mistakes, and everything in Raw Format without any changes, I on the other hand was writing my progress in a word file as soon as the coding part was done. Sorry if I have made mistakes while writing.Without wasting any time lets get started.
I have divided whole journey in following points:
1. Started by watching a YouTube video on the importance of having a personal portfolio website.
2. Watched courses and videos, but didn’t grasp the content fully due to my preference for shorter content.
3. After researching, I stumbled upon a quote or internet advice suggesting direct observation of project or concept implementation.
4. Intrigued by the suggestion, I decided to follow the author’s instructions.
5. Utilized resources like YouTube, Google, Github, W3Schools, and online templates to gain a basic understanding of website structure.
6. Implemented the acquired knowledge and began building the website.
7. Initially, I wanted to use WordPress for the website (as I wasn’t fond of programming), but due to the availability of free add-ons, I ended up coding the website myself with the limited knowledge I had at the time.
8. It turned out to be a good decision as I felt that coding or creating something from scratch provided more freedom and flexibility.
9. Searched for tutorials on YouTube and watched numerous videos, although not all of them in their entirety. Liked some of them and started coding based on the instructions provided by the tutors.
10. Realized that the task was more challenging than anticipated as I began encountering difficulties.
11. I had a clear blueprint or design in mind for the website.
12. The first part involved creating a navigation bar, a home section, and setting a background image, which was relatively easy to accomplish since I didn’t add much content to the home section.
13. Challenges arose when designing the “About Me” section, where I needed to write about myself and mention my skills (although my coding skills weren’t exceptional to mention).
14. The text started overlapping, and attempts to solve one problem led to others, such as image resizing, disruption in the navigation bar code, and issues with the home section. I made several efforts to resolve them, but nothing seemed to work properly.
15. Frustrated, I gave up for a few days until the YouTube algorithm recommended more portfolio-related videos, which motivated me to restart the project.
16. I must admit, I resorted to using ChatGPT to help solve errors (previously, I had even asked it to design the entire website, but the code provided wasn’t sufficient for my desired outcome).
17. I didn’t just copy and paste the suggested solutions; instead, I studied and tried to understand them.
18. Despite seeking help from ChatGPT, YouTube, Google, and Stack Overflow, it still took me around 5–6 hours per day to solve errors and complete half of a section. In total, it took me 10–12 hours per day to complete the entire website and address the errors. I was slow due to my skepticism of ChatGPT’s accuracy, which led me to consult additional resources.
19. At this point, I realized that web development, like penetration testing, involves a significant amount of trial and error. It resonated with me as I struggled with solving errors and tweaking values.
20. However, even ChatGPT was prone to making mistakes, despite my efforts to ask specific and correct questions. I began questioning the effectiveness of “Prompt Engineering” skills I had mentioned earlier.
21. Simple tasks also took me 5–6 hours to solve.
22. I encountered a situation where a minor correction, involving a line below the main tag, took me 5–6 hours to figure out. I felt foolish.
23. I reached the final section, “Projects,” which wasn’t as challenging and didn’t require extensive external resources for troubleshooting since it was similar to the “About Me” section.
24. Moving on to the last section, “Contact Me,” it was relatively easier than the previous sections,but I still had to invest time in fixing issues like the footer problem, overlapping elements, and their impact on other sections. Eventually, I resolved them.
25. Adding a download resume button caused me a lot of headaches because I had used some makeshift solutions in previous sections. While I wasn’t satisfied with the result, I didn’t have the option to change the entire code, so I decided to keep it as it was.
26. Finally, I uploaded the project to my GitHub profile and plan to make further changes and improvements as my journey continues.
I won’t be able to host the website on hosting sites as of 2023 since I’m a student and don’t have the funds, but I possess the knowledge of how to host it. I’d like to express my gratitude to ChatGPT, the Stack Overflow community, GitHub repositories, YouTube tutors, and many other resources that made my journey easier. While I’m unsure of how much I’ve truly learned in web development, I have acquired the skill of “Prompt Engineering” and possibly improved my problem-solving abilities (I don’t know really but I feel) by asking targeted questions and exploring problems from different perspectives.
Note: I didn’t incorporate JavaScript into the website since learning and troubleshooting it would have taken additional time, which I wanted to avoid. While I believe web development skills aren’t necessary for cybersecurity at its best, I remain open-minded and willing to learn them when the need arises or when the time is right.
Kindly, Take a look at My Website, feel free to share your thoughts, suggestions, and Areas of Improvement:
What I’ve Learned:
I’ve learned that every action should have a purpose behind it, as performing actions without a clear purpose hampers efficiency. Similarly, my purpose was to quickly build a portfolio website without delving into the core concepts, which turned out to be a significant mistake. I could have created a more efficient website by taking the longer route. However, I don’t regret my approach because failure teaches valuable lessons, and I’ve gained insights that I’ll keep in mind. While I acknowledge that the code I’ve written may not be as good as someone who took the longer path, I managed to make it work and learned from the experience. I don’t recommend this approach to others; I chose it due to time constraints and my aversion to wasting time after having lost plenty in the past. Finally, I would say, “Clear your concepts before diving into practical tasks!”
Conclusion:
My journey of creating a personal portfolio website without coding knowledge was filled with challenges, mistakes, and valuable lessons. By observing and implementing project concepts through online resources, I gained a basic understanding of website structure. Despite encountering difficulties and relying on various resources like ChatGPT, YouTube, and Stack Overflow, it took perseverance and trial and error to overcome obstacles and complete the website. I’m grateful for the support of these online communities and the knowledge gained in prompt engineering and problem-solving. While acknowledging the limitations of my approach, I’ve learned the importance of clear goals and purposeful actions, and I remain open to continuous improvement and future learning opportunities in web development.
Thank You!
