I am currently in the process of writing up the Component 2 webpage of the Education Innovation final project.
Component 2 of the project is focused on the creation of ibuiltmyown.education.
I am detailing the full development of the site, right from its conception in 2013 to its publicly presentable form in 2023.
To aid in the presentation of the full history of the site, I have been drawing on previous content I have written about the site.
One notable piece of content was web design and content creation overview page on the first version of my personal website, petebecreative.com.
This overview page was called I Make Websites and Content and I used the creation of ibuiltmyown.education as an example to demonstrate my competency as a web designer and content creator.
The overview page presents an earlier version of the development of ibuiltmyown.education from 2020.
It also touches on my long-term plans for my education platform which are going to be detailed in Component 4 of the Education Innovation final project.
To be clear, I Make Websites and Content completely fails as an overview page!
I’ve learned a lot about content creation since writing this page in 2020 and it’s why I have gone back to the drawing board for my personal website (the full development my personal website will probably be detailed in the Designing My Career Brand project).
I Make Websites and Content is way too long and detailed to work as an effective overview page.
Really, it is just a blog post and should always have been a blog post.
As it is a piece of content that I am no longer using on my personal website and because it serves as something of an adjunct to the Component 2 page of the Education Innovation final project, I have decided to repost it in its original form on this blog.
I Make Websites and Content – How I made ibuiltmyown.education (from 2020)
By far, the most challenging website to build has been my education website.
Not just in terms of all the technical problems I had to overcome to get the thing working properly, but in terms of the visual presentation and logical structure of the website.
I Built My Own Education houses my MTA Portfolio which is a very elaborate master’s degree program that I built myself using online courses and creative projects.
My MTA Portfolio is made up of 699 courses, arranged into 70 learning modules, spread across 10 guiding concentrations, shared between 2 majors and has 10 final projects (three of them are my websites) with one final project assigned to each of the concentrations (and there may also be an additional final thesis project to wrap the whole portfolio up); as well as 310 diplomas also spread across the 10 concentrations.
Already, from the previous sentence, you should start to see how utterly complex and confusing my MTA Portfolio is to get your head around.
Imagine translating that into a website that is visually appealing and concisely gets to the point.
For me, it was a headache… but totally worth it!
One of the reasons I wanted to build my own master’s degree was because I loved the idea that instead of being a dead piece of paper, it could come alive and be an engaging multimedia degree certificate that you could open up, explore and interact with just like a really well constructed website.
I Built My Own Education has been a long time coming, I first had the idea of building a website for my MTA Portfolio all the way back in 2015.
It spent four years on the backburner while I devoted my time to studying all the courses that make up my MTA Portfolio.
Even so, in 2017 I started to sketch down ideas of what the site would look like, what content it would contain and how best to present my MTA monstrosity in a way that was visually engaging and to the point.
I hadn’t yet come up with the brand identity of I Built My Own Education, but you can start to see similarities with what I originally envisioned the MTA Portfolio overview page as being and what it has now become.
There’s the slider/ticker with site name and drop-down menus…
The square blocks underneath the slider were originally for links to my MTA majors, mission, concentrations, etc., but have now become info squares with stats about my MTA Portfolio as a whole…
I’ve opened up and laid out the structure and contents of my MTA Portfolio…
Each element of my portfolio – concentrations, modules, diplomas and final projects – all have a highlight block and call-to-action page link under their respective majors…
The module highlight blocks are also sliders, so each module of each concentration slides through on a loop with a call-to-action link button to each module page…
The concentrations are all colour coded to further differentiate their similar but different elements from one-another…
I also placed a short piece of explainer text between each highlight block to further contextualise how each element of the concentrations relates to each other…
The website is responsive, so depending on what device you are viewing the site, the contents of the majors of the portfolio will either be laid out side-by-side or ascending one-after-another.
My main challenge was to make the structure work either way and I think I have now achieved that.
For me, the key to figuring out how to visually present my MTA portfolio (and master’s degree certificate) was always the MTA overview page.
I knew that if I could get the structure of my MTA Portfolio laid out in a way that was visually engaging and easy for the website visitor to understand, then the rest of the website would take care of itself.
Currently, the MTA overview page is the homepage of I Built My Own Education and you could argue that it is still a bit too much information all at once.
And I would absolutely agree with you.
The MTA overview page won’t always be the homepage of the site, it is supposed to be its own separate page.
I want to host other education-related items on the website, in addition to my MTA Portfolio, and I have a much simpler design in mind for the real homepage.
Right from the start, I knew I wanted to invest a good deal of time and money into making an extremely high quality and professional looking website.
I also knew that I didn’t want to hire a web developer to make it for me, because I wanted to practice the web development and design knowledge I had acquired from my studies.
I also didn’t want to use a website building service like Weebly, Squarespace or WordPress.
Don’t get me wrong, they are all good options for building a website, but I wanted to have a lot of control over the front-end and back-end operations of my platform.
I really wanted to use this as a learning opportunity to figure out all the various aspects and infrastructure levels that go into building a website from scratch, with full access to the back-end mechanics.
I also wanted to build more than one website.
Originally, it was just going to build my education website and my personal website… and then I started life coaching as a side hustle and I realised I would be better off with three websites.
These demands meant I needed an external hosting provider that offered a hosting package at a reasonable price, with automatic backups, 24/7 customer service and that would allow me to build as many websites as I liked on my server space.
Ultimately, I decided on GreenGeeks because of their very good reviews and the fact that they operate eco-friendly hosting centers globally.
Then it was just a case of installing the WordPress software on my server space in order to provide me with a website building platform and interface.
I use WordPress because it is surprisingly simple to operate and is also highly customizable thanks to its vast widget addon marketplace.
Plus, I have already built a blog – my 365 FRAMES 2015 blog – using the WordPress software on WordPress’s own hosting platform, so I already knew how to use it.
Then it was just a case of choosing a website theme package that would allow me to construct my site in the way that I had envisioned.
I purchased a license for the Olvi – Creative MultiPurpose WordPress Theme on ThemeForest, installed it and have been building ever since.
I was quite fortunate with the Olvi theme because it came packaged with WP Bakery Page Builder which is a first class drag and drop page construction interface.
While you do still have to occasionally tweak the HTML, using WP Bakery Page Builder and its page building elements allows you to bypass an awful lot of coding.
Using WP Bakery Page Builder is actually a lot like playing with Lego bricks, so it can be quite an enjoyable website building experience.
As I’ve said already, the first thing I made was the MTA overview page and once I had the basic structure of that done, I moved onto making the ten concentration pages.
My original version for all the concentration pages were very different to the web pages that are now online.
The original concentrations pages used tabs and each tab would either have a glorified web page link, as in the case of the diplomas and final project tabs, or they would contain a whole array of content…
The original concentration pages included an overview of the concentration; as well as all the concentration’s modules, the modules’ overviews and the modules’ contents in flip blocks…
The flip blocks work either by hovering your cursor over them or by tapping on them…
The flip blocks were one of the first problems I had with the original concentration pages. They worked just fine on the desktop screen variation of the website, but they could be quite temperamental on the smartphone variation of the site.
One of the problems was with how I had made each item on the flip blocks have an expand feature with a drop-down list of information, quite often these would interfere with the flip motion of the block.
Also, the flip blocks massively varied in size depending on how many items were listed on them, which caused problems on the smartphone variation of the site. Sometimes you would be scrolling through a concentration page and a lot of your scrolling would be devoted to getting past the flip blocks.
It was made even worse when all the module contents were added on, one after the other, because suddenly you had a page that was never ending!
Ultimately, I had included the flip blocks and all the module contents on the concentration pages, because I wanted everything to be concisely collected together into a time saving and coherent whole… but it was having the complete opposite effect.
So I scrapped my original design for the concentration pages.
Instead, I decided to make the concentration be much more like the MTA overview page, which is how I ended up with the current version…
I emphasized the colour coding scheme much more so on the new version.
I got rid of the tabs and instead opted to have the overview cleanly presented on the main page.
I used the same highlight blocks from the MTA overview page to give each module a distinct presence.
As with the highlight blocks on the MTA overview page, each highlight block on the concentration pages has a call-to-action web page link.
Finally, I included directional buttons at the bottom of the page so you can flip back and forth through each concentration or head back to the MTA overview page.
My MTA Portfolio is already way too confusing and I didn’t want the design of I Built My Own Education to make it worse, so I embraced an idea I had originally discarded as unnecessary and being too much work.
I gave each module its own webpage… which meant I instantly added seventy new webpages to the site!
It was definitely hard work filling up those seventy pages, but worth it in order to reduce the load on the main concentration pages.
Once again, I used the same colour coding scheme to show the module pages as being related to the concentration pages, but I inverted the layout to immediately differentiate the module pages from the concentration ones…
Giving each module its own webpage also meant that I had a bit more space to write a more in-depth module overview.
The overviews were very important because they contextualise the module’s contents and explain my reasoning for including the module in my MTA Portfolio.
Together with sourcing and annotating the quotes I included, it took me about three or four weeks to write the overviews for the seventy pages!
For the module’s contents, I kept the same expand feature from the original flip blocks, which was hugely timesaving because all I had to do was copy and paste the HTML onto the new page.
The original flip block contents and expand feature took me two weeks to complete. I had to copy and past over 3,500 pieces of information from my MTA Portfolio spreadsheet and the only way to do it was one item at a time. I denfinitely did not fancy going through that process again!
Like the concentration pages, I have included navigation buttons at the bottom. This time, they either take you to the next or previous module of the parent concentration, or you can go back to the parent concentration page.
Finally, in addition to the final project pages, most of which don’t even exist yet, I also created a diploma wall page for each concentration.
Again, I wanted the diploma walls to be very simplistic and what is more simplistic than JPEG diploma images presented neatly on a recognizable colour coded background.
Even if converting the original 310 pdf files into JPEGs and getting the pop-up image gallery working properly was a time-consuming nightmare!
Again, like the concentration and module pages, the diploma wall pages have their very own navigation buttons at the bottom.
That’s basically a snapshot of I Built My Own Education as it currently exists.
There is still a lot more work I have to do on it.
I have to finish all the About pages, complete the overview content for the concentration pages, create an array of new photographs and graphic elements and get all the final project pages done… not to mention the final projects they showcase!
Back when the site was called Your Renaissance Education (bloody stupid name), I had plans to produce a selection of ebooks and education resources for building your own education and, you know what, that is still my thinking for I Built My Own Education.
That’s my long-term vision for the site, once I have my MTA Portfolio fully embodied on the site, I want to develop a range of education products that can also be housed on I Built My Own Education and turn the platform into a form of passive income.
More immediately, though, I would also like to produce some video content for the site and, by that, I mean take a lot of what I have written for the About pages and turn it into video content.