top of page

Elevating My ePortfolio: iFrames to HTML & CSS Literature Review Pages



As a student of the ADL program, I was fully immersed in the world of digital portfolios, where I showcased how my academic and professional accomplishments became an essential part of my learning journey. Early on during my journey in the EDLD 5305 (Disruptive Innovation In Education) course, one of my initial attempts at creating a solid digital portfolio involved using an iframe code to display a Google Doc containing my literature review. While this approach served its purpose, I realized it needed the polish and professional appearance I desired for my portfolio. So, when the EDLD 5315 (Assessing Digital Learning and Instruction) course came around, I needed to deliver a second literature review. This time around, I set out to recreate the traditional APA 7 literature review style using HTML and CSS. This blog post will detail my journey from a simple iframe-based embedded literature review to HTML and CSS-based one.


The iFrame Experience

During the EDLD 5305 course, I used a simple yet effective method: embedding a Google Doc into my website using an iframe code. While this approach allowed me to display my literature review without much hassle, there were some drawbacks:

  1. Limited customization options: The iframe code restricted my ability to customize the appearance of the content, leaving me with a somewhat bland and unpolished presentation.

  2. Inconsistent formatting: The Google Doc is sometimes translated poorly to different devices or browsers, leading to inconsistent formatting, readability issues, or even failure to display.

  3. Dependence on external platforms: Relying on Google Docs meant that I depended on an external platform, potentially leading to accessibility or compatibility issues.

Leveraging HTML & CSS

To improve my portfolio creation process, I ventured into the world of leveraging HTML and CSS during the EDLD 5315 course to make my portfolio dynamic and self-sufficient. HTML (Hypertext Markup Language) is the standard markup language used to structure content on the web. At the same time, CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance of HTML elements.


By harnessing the power of these two languages, I was able to recreate the traditional APA 7 literature review style with greater customization and control.


The Benefits of HTML & CSS

Transitioning from iframe-based portfolio creation to HTML and CSS offered several advantages:

  1. Greater control over formatting and style in relation to the website: HTML and CSS allowed me to create a more polished and professional appearance, closely matching the traditional APA 7 literature review style.

  2. Responsive design: Using CSS, I ensured that my content was displayed correctly and consistently across various devices and browsers.

  3. Independence from external platforms: By creating my literature review directly in HTML and CSS, I no longer had to rely on Google Docs or any other external platform.

The Journey Continues

My journey from an iframe-based presentation of the literature review to a full-blown HTML and CSS code-based development of the literature review has been an enlightening and rewarding experience. It has allowed me to improve the professionalism and appearance of my digital portfolio, showcasing my academic and professional accomplishments in a more polished and visually appealing manner. As I continue to learn and grow in the world of web development, I look forward to further refining my skills and discovering new ways to enhance my digital portfolio.


bottom of page