Building Knowledge, One Step at a Time: My Professional Portfolio
I decided to create my professional portfolio to have a sense of where I started and where I am going. In my mind, it’s a way to follow a timeline of knowledge.
Along my journey, many obstacles have been encountered, and many more will be found, but we must not give up when one of them blocks our path. After all, it is by making mistakes and finding ways to overcome the obstacles that we learn.
Therefore, I decided to create a website to showcase what I’ve studied and learned. Here are the steps I followed:
- Design the project and the visual presentation
- Develop World Wide Web applications using HTML and CSS
Design the project and the visual presentation
I found some free templates from Canvas. I took inspiration from two ideas:
- https://www.canva.com/templates/EAEkUXUH2Fc-black-simple-dark-blogger-bio-link-website/
- https://www.canva.com/templates/EAE72pcReQo-architecture-interior-design-portfolio-website-in-white-black-light-modern-minimal-style/
For the first template, I liked the way the content was presented, like a menu. I prefer to have an overview of what I want to see, and this layout is clear and effectively summarizes all the content that a person wants to present.
For the second template, I appreciated its simple structure. It avoids overwhelming the reader with too much information, maintaining a clean and focused design.
The pictures that I chose for the pages were sourced from the link:
By combining elements from both templates, I achieved the design I wanted:
Develop World Wide Web applications using HTML and CSS
HTML is the standard markup language for Web pages. The HTML defines the structure of the page. To build the desired structure it is necessary to know the elements (called Tags). Each tag has a specific functionality.
In general, I used the following tags in this project:
- <html>: root of an HTML document
- <meta>: metadata about an HTML document
- <head>: metadata/information for the document
- <body>: document’s body
- <a>: for hyperlink
- <div>: for a section in a document
- <footer>: footer for a document or section
- <h1> to <h6>: HTML headings
- <hr>: thematic change in the content
- <i>: part of text in an alternate voice or mood
- <img>: for images
- <li>: for a list item
- <link>: for the relationship between a document and an external resource (most used to link to style sheets)
- <p>: for a paragraph
- <section>: a section in a document
- <ul>: an unordered list
CSS is the language we use to style an HTML document. It allows you to control the layout, color, fonts, and overall visual appearance of the page. For each tag, it is possible to set a specific style.
My final project was published using GitHub Pages and can be accessed by clicking on https://fabitortorelli.github.io/:
Challenges that I faced:
To build this web page I had to study how HTML and CSS work and how to publish it. Additionally, I faced the following situations:
- Making the page responsive: when I first set the HTML structure and CSS style I inspected the page and noticed that it wasn’t optimized for different devices. Therefore, I used ChatGPT to help me with the problem and I compared my initial work with the suggestions provided by GPT to find the best solution
- Analyze the size of the images used: for the images on my page, I used a website that allows downloading free high-definition images. However, these HD images make the page load slowly. To overcome this issue, it is necessary to optimize the image sizes to ensure faster loading
The repository for this project can be found on my GitHub page https://github.com/fabitortorelli.
