Webpage
Intro.exe-Introduction-into-Webdesign
This project pertains to the development of my website.
The brief for this section of the project required me to make a functional website that operates effectively using HTML 5.
We also need to show a demonstration of our technical skills to code that we used in making our website. I also need to show my portfolio along with presenting myself as an interesting individual for possible recruiters.
In the early stages:
The first few steps started with me developing my skills in coding. I had done work before in Java script to make simple game mods. With some familiarity using similar skills I found it to be slightly easier to manage.
To also improve my options later on I started practising HTML over christmas to learn the basics. This future planning is required as we only had 4 weeks to properly develop our portfolio website.
Challenges:
One of the challenges I had for this project originally stemmed from thinking about how I wanted to structure my website. Despite creating an early mockup, I struggled to visualize the final product.
My limited HTML coding skills made it difficult to fully consider and implement the features I wanted. This led to a mental barrier that often arose whenever I attempted to plan or create something new. I frequently found myself second-guessing my progress as I coded, particularly in the early stages of development.
However, this mental block gradually diminished as I gained a deeper understanding of HTML and honed my skills.
One of the challenges I encountered was related to the document setup process.
During the initial phase of planning my website, I was unsure about the limitations and possibilities of using HTML. Additionally, I wasn't certain how much I could accomplish within the 4-week timeframe.
To address this, I created a simple outline for my project, which served as a guide throughout the process. However, this approach led to some misconceptions regarding certain features I wanted to include in the website's design. For example, I was uncertain about the necessity of elements such as a dropdown bar or whether contact and general navigation buttons were essential. Furthermore, I found that my understanding of grid and document layouts was more rigid than I initially anticipated. I came to realize that grids were far more integral to the design than I had originally thought.
I was able to overcome these challenges by adjusting my approach and being more flexible with my work. With a clearer understanding of HTML's strengths and limitations, I developed a more concrete vision for what I wanted to include in my web portfolio setup.
Given that the project requirements specify that external site links cannot be used to support my site's code, I encountered an issue with the bibliography buttons. This was due to the button's code and its reliance on links from an external website. To resolve this, I explored alternative bibliography options.
After receiving feedback from Mark, I opted for the simplest solution: creating separate web page links for the bibliography at the bottom of each page.
Target audience:
This website is designed primarily for recruiters who are visiting to explore my work. I have tailored the content based on insights shared during the AUB Futures representatives' talk and feedback from visitors at Batten’s Hall.
During the AUB Futures career talk on February 18th, we were informed that recruiters are drawn to candidates who stand out. Presenting yourself in a visually striking manner while also demonstrating strong competency in your skills is key to capturing their attention.
With this in mind, my website reflects a tone that is both creatively inspired and professionally executed, ensuring that my work not only stands out but also resonates with potential recruiters.
Development:
Other workshops led by Mark during this time were instrumental in deepening our understanding of the key concepts in CSS and HTML. These sessions also provided valuable guidance on potential paths for further exploration and development.
After finalizing the main components of my website, I began early development alongside coding workshops. I utilized freeCodeCamp, a coding platform designed to help individuals enhance their HTML skills. During the Christmas holidays, I dedicated time to improving my overall proficiency in HTML as part of my preparation for the future website project.
Image Experiment in CSS grid
These sections show my changes and other uses for CSS grid in my attempt to better form my website.
Sustainability
When considering the effective development of my website's pages, I needed to take into account the sustainability of the site in terms of its operations.
With a rating of 'B'I would consider my site fairly sustainable especially when the global average is below E making my site 70% cleaner than most.
Feedback
After finalizing the main components of my website and selecting the Railway font for improved readability, I shared the site with others to gather feedback for future development.
By presenting my website to my peers Rafe, Cream, and Emily; I was able to gather valuable feedback and address several additional issues they identified.
After gathering advice from my peers, I decided to seek additional feedback from Mark and Alice to obtain more professional insights on areas for improvement. The feedback from Alice was particularly comprehensive, focusing on broader structural improvements that would enhance the overall organization of my site.
One key piece of advice was regarding the hierarchy of my website's pages.
Previously, some of the narratives on my projects were unclear due to the detailed approach I had taken in presenting the content. I aimed to showcase a large portion of my thought process in a more professional tone, but this affected clarity.
To address this, I implemented a clear structure, using headings that followed a logical flow: Introduction, Challenges, Development, and Reflection on my work. To improve hierarchy further, I incorporated a variety of text formatting, including bold, italics, small, and enlarged paragraphs.
Final Reflection:
The aim of this project was to showcase our portfolios to potential recruiters. The presentation of my work needed to effectively communicate my creative identity and ambitions as a designer to potential employers and clients. I believe I have successfully achieved this by maintaining a professional tone while clearly demonstrating my design process.
From the beginning of the animation project, I made a conscious effort to do small amounts of preparation and research to improve my HTML skills. This preparatory work and planning directly contributed to the development of my project, aligning with the brief's objectives.
In conclusion, the development of my portfolio website has been a focused and intentional process, driven by both technical skill-building and a clear understanding of my target audience. By first strengthening my HTML skills and engaging in early preparation, I was able to approach the project with confidence despite the limited four-week timeline. The aim was not only to create a functional and visually appealing website but also to showcase my abilities in a way that resonates with recruiters.
Through continuous improvement and research, I have effectively incorporated key elements that reflect my creative identity while demonstrating my technical competencies. Understanding that recruiters value individuals who stand out, I ensured that my website maintained a balance of creativity and professionalism. The end result is a website that not only meets the brief but also positions me as a compelling candidate for future opportunities.
---Back to Work page---