Perpetual Education. So far.
The whole shebang... so far..
Hey. This post is going to be a special one. Planning to look over what I have learned and what I’m looking to do at this point in Perpetual Education. Nothing too crazy just outlining what learning has been for me the pass couple of months.
It started with a computer -
The early days were just learning about the computer and to how to turn this machine into a tool for us. With that said, a tool means nothing if it takes you too long to get anything done. Organization and time savers are important in the industry.
Organization goes a long way when there are multiple developers working on one project. If everything is Mise en place then finding things and working on said projects becomes much simpler and saves time.
In the grand scheme of things, is there enough time in the world for everything? Maybe not, but that doesn’t have to be a bad thing. We just have to make the most of our time and find ways to save it. Organization is just one layer in the process to save time, but being able to find little tricks and apps to help go beyond that. Some examples:
One Password: There are a lot of login pages as a developer, so it would kind of suck spending hours trying to unlock my account somewhere.
Divvy: Window management tool. Developers like myself don’t have that much screen real estate. This allows us to organize windows to keep everything in view, thus allowing us to see all the changes in real time instead of having to click around.
Tower: Allows us to quickly upload our updates our GitHub repositories.
Copy & Paste sheets: This way we could copy multiple items and have them ready and waiting to be pasted.
At this point we started creating websites! They were really simple.. but they’re still websites. There are a lot of little intricate things to HTML that at start didn’t seem completely obvious. Even to this day there are still some elements I have no idea how to use and haven’t really been put in a position to use it. AND THAT IS OKAY.
I remember learning about meta data. You know the little picture that comes out when you send a link over to someone, yeah that was pretty cool.
Once we got a good handle on things we turned it up and learned about organizing things. There is a way to organize elements on a page that goes beyond just stacking things onto each other.
To the average eye you may not notice a lot of difference but I will tell you the new layout is leagues above the other. The new layout is structured with specific custom elements to determine the areas of the page. Also this form of HTML helps us style things exactly to our liking while the old version could see some issues and also come off as simple.
Speaking of styling. This is where we started to learn some styling code. There was a big learning curve at this time. Being able to design a page is one thing but making it look like the design was a bit of a challenge, at the time it seem like I would just try to get it as close as possible and deal with the little issues as they come. We used one file to style an entire website. Whether the website was one page or five pages, we depended on that CSS file to contain all the information.
Now a days we have something like this. Each file contains specific styling and allows us to find what we are looking for, and adjusting on the fly.
modules.css: This file is dedicated to portions of our page that gets separate out to other files. For example, our header and footer changes would be found here.
reset.css: This file is dedicated to a reset that takes all the based HTML browser styling and resets them to generic standardized amounts. You could look it over here.
setup.css: This file will organize elements I generally use to a specific style. For example, “inner-column” is given a padding, a width, and some simple margin space to center it on the page. This will happen at every inner-column on my website. If I wanted to make a specific change I would do that in that specific file styling.
style.css: This is a general file that gathers all the other files and puts it on the website.
typography.css: This file handles just that, typography on the page. Font-sizes, font-styles, font-weights, and font classes can be found in this file.
This was when we started to learn what some people would argue is “real” programming. Imagine making a website and then making a page for over 100 items in my shop. That would probably suck right? Well yeah so we could use PHP to make those pages for us! We could make loops, place conditions on how things appear, add classes based on things, make pages for each selection, make a form to accept user input, and etc. There are a lot of cool things you could and we only are scratching the surface of it. The best of it all is that we could generate a whole interactive website all by simply having a file for the data. It takes all the code and turns it into HTML to be displayed onto a website. Almost like an HTML level up, it evolved into PHP.
[Spoiler for blog post about project I haven’t finished]
This block of HTML has PHP inside of It to go through my data file and create a cool little page for my project.
Just this last week we wrapped up Wordpress which took the ideas we were making in PHP but have a Content Management System (CMS) to hold all our data, pages, functions, and most of the code. I would just be responsible on putting the data into Wordpress and getting out what I want to be display to create an interactive website. Obviously this is pretty recent and still learning how to best use it but it seems really useful and a tool to grow with. This was a level up of PHP!
I was tasked with looking at all my projects whether they were implied or took it upon myself to make them. Going to review each, give a slight description and if it is finished or deserves more development.
These projects are in the archive as they are considered completed and will more than likely not be touched at all. No need to reference or update any aspect of it.
Alpha/Jesse version 1: I designed an original page for my portfolio before we were instructed. This original version was design to display my work with Perpetual Education and my classmates, not really about myself.
Ableton Replica: We were originally given the task of attempting to recreate a website design we found in the wild. We didn’t know too much at that time so it is very bland.
Home Page Site: Made a website with various links to sites we use. Similarly to AOL or Yahoo back in their prime days. They were just a page that had links to stuff.
Boilerplate: A folder structure that would be the starting point of all my projects. Containing files that will be required.
Client Project: Pick a client, gather research of that market and based on client suggestions create a webpage to meet their need.
[FINISHED, could be reworked into a Wordpress but might be better to make a new one. ]
Spider Responsive Layout Garden: A website dedicated to different layouts that could be used in websites. Used Spiderman as an influence for the material.
[STARTED, ideally would evolve to contain various layout designs, could add more. ]
Overwatch - Website Layout replica: Use a layout on the internet as inspiration for a design. Used Overwatch as an influence for the material. The project also make use of different layouts.
[IN PLACE, could be reworked and cleaned up a bit more if I want it to make my portfolio. ]
Bartfay - Website replica: A lesson on taking aspects from a website and being able to implement them into our version of that site.
Pokédex Project: Use given PHP Pokemon data to create a display of each pokemon’s type and change box color based on its type.
Monster Adoption Project : Take monster data and loop through it to create a monster adoption page, practice making a function that can create an object in our data.
Legends Project: Personal project combining all the resources of PHP that we had learned from the monster’s and Pokédex projects.
[REWORK, pretty passionate about this game and wouldn’t be against fleshing this out in Wordpress, I would say it is very similar to my current PHP CRUD project. ]
E4P: Exercise for Programmers. Practice writing pseudo code and turning that into actually code. Also practice problem solving and creating if, loops, or functions and using forms in PHP.
[STARTED, there are more exercises to do! ]
Audiophile Group Project: Use JSON data that was create by the entire cohort of Alpha 4 to make a page displaying all the data.
Alpha 4 Homepage Group Project : Design and create the Alpha 4 homepage as a group. Give each card their own unique design that identify’s that person’s personal site.
Ultra Responsive Layout Challenge : Layout practice creating different modules that could be reused in the site and future sites. Ex. Call to action module. Contains a link that leads somewhere.
Theme Challenge : Take inspiration from an industry and shape our Ultra Layout to match that set Industry. Ideal goal was to give off professional website vibes.
Router - Boilerplate (Update): This is an update of my boilerplate file that would be the start to all projects. This version has a PHP set up to generate page values based on the page and file structure is ready with multiple modules and css files.
PHP Crud project. : Create. Read. Update. Delete. project. Learned to use our JSON data to create a page of characters and have a form that could then add, delete, update a character. This project is only able to save the data from the form but not able to do anything with it.. yet.
[INCOMPLETE. I have a strong passion for this project and would love to finish it out. A must. ]
Personal Site: Design. Make data. Show a little about myself. Display information about myself. Portfolio beta.
[COMPLETE FOR NOW. Finished the initial version of my personal site but needs a refresh! Could be made with better PHP or Wordpress ]
Thanks for reading Jesse’s Newsletter! Subscribe for free to receive new posts and support my work.
"Finished" is a funny concept with websites. I feel like they get born, and then after that you have to keep maintaining and iterating on them until they eventually go away. It's like they are "Ready" to be seen.