Welcome to my logbook!
Here, I'll keep track of my progress in building this website. Each week brings new challenges and improvements, and I'm excited to document the journey.
Here, I'll keep track of my progress in building this website. Each week brings new challenges and improvements, and I'm excited to document the journey.
This week, I created the main structure of my website, including the homepage, an about me page, a studies page, and a hobbies page. I also learned how to link these pages together using hyperlinks, ensuring smooth navigation. Adding a photo was a fun challenge, but I managed to insert an image successfully. Overall, this was a great introduction to HTML, and I enjoyed getting my first pages live!
This week, I focused on improving the layout and design of my website by creating an external CSS stylesheet. I am still figuring out the exact style I want, but I think this will come together in the next few weeks as I experiment more.
I started using DIV elements to structure my content, which was a bit tricky at first. However, the more I experimented, the more sense it made. I finally figured out how to get those smooth, rounded edges on the content blocks, which makes everything look much cleaner.
I also worked on making the website visually consistent with a uniform background color and typography. Choosing the right colors and overall style is still something I want to refine further.
This week, during the computer lab session, I worked on editing my photo and adding an image map. With the help of professor Meindertsma, I managed to open my picture in an editing program, crop it to remove unnecessary background details, and resize it while maintaining high quality. I then added the full-sized image to my homepage and placed the smaller, compressed thumbnail on the "About Me" page.
Next, I created an image map by adding clickable links to different parts of my face. I successfully linked my eyes to my favorite movie, my mouth to my favorite restaurant, and my nose to my favorite perfume. For the nose, I even managed to use a circular shape, which was an interesting challenge.
Before the lab session next week, I plan to improve the overall design of my web page, making it look more polished and visually appealing.
This week, I focused on adding a new page to my website dedicated to the term 'stracciatella ice cream dish' while ensuring it was search engine friendly. I incorporated the term into a unique title tag, meta description, h1 heading, and link texts, as required by the assignment. Additionally, I included an image with appropriate alt text and filename.
One challenge I faced was optimizing the background image. I used GIMP to reduce its size below 100KB to improve loading speed, but this resulted in a noticeable loss of quality, making the image appear less visually appealing on my page. This is something I’d like to improve in the future.
Another aspect I experimented with was adding pronunciation guidance for Italian words, including 'stracciatella.' I explored how this was done on another website by inspecting it through Firefox and tried to implement a similar approach on my page. However, this proved to be more difficult than expected, and I haven’t fully managed to get it working yet. Despite these challenges, I successfully completed the core requirements of the assignment and made good progress in optimizing my page for SEO.
This week, I first focused on completing the previous assignments before diving into the design improvements. I added a container div to all pages and ensured the content was centered within the browser. I also made sure the navigation structure was uniform across all pages.
I adjusted the text's line length to fall between 525 and 545 pixels for better readability. Although my font choice was already good, I changed the text color to white, which creates better contrast against the blue background.
With the help of my professor, I resolved some issues with the navigation bar, which wasn’t behaving as expected. After some adjustments, I managed to get it looking neat and functional. Additionally, I started working on optimizing the images to keep them under 100kb, though there's still more to be done in that area.
This week, I reviewed Jule's website as part of the assignment. It was actually quite helpful because it made me realize a few things I still needed to improve on my own site. Reviewing her website was a bit tricky because I wasn't sure if she had completed everything yet, but I based my review on what was available so far. I also understand (since I'm still in the process of building my site) that not everything will be perfect right away, and I’m sure there are still things that need work on my own page as well.
As for my own website, I’m now in the final stages, but I’ve encountered a few issues. When I open it through the Siegfried hosting, it looks different from when I open it directly from the documents on my laptop. I’m hoping to solve this issue soon. There are still some other minor imperfections, but I realize that aiming for perfection after only six weeks of learning how to build a website may not be entirely realistic.
Today, I’ll submit the website. I’m really happy with how it turned out, especially when I think back to six weeks ago when I knew absolutely nothing about web design. Surprisingly, I’ve really enjoyed the process! Each week I learned something new, and I watched my website improve bit by bit. The addition of images and experimenting with different layouts took some time, but I enjoyed it a lot. I also added a nice background for my "Stracciatella Ice Cream Dish" page, with which I struggled quite a lot, but I managed to make it work in the end. Last but not least, thanks to the feedback, I figured out that I needed to give my active page a clear visual indication. After puzzling with this a bit, I managed to do this as well.