Learning How to Code (Part 3)
Previously on Learning How to Code~ 9ish months ago I set out to try and create a virtual pet generator program from scratch, with python. I had zero coding experience so this whole project was going to be an up hill battle, but I had a sick set of artwork and determination on my side. With a lot of swearing and hair pulling I was able to create a script that colorized artwork. Read the process here: Part 1 <<<<
I was super excited to have actually coded something that worked! But it’s not a ‘real’ program. It needed a user interface because there’s no way people want to install the coding bits just to get the thing to work. So I set out trying to figure out how to make a GUI and turn it into a real program. Read the exciting play-by-play here: Part 2 <<<<
I left off part 2 with a functioning program, but in the end I still wasn’t satisfied. I decided it needed to go online to reach a wider audience, but that would mean more code learning. I’ve become comfortable with python and working around the code that venturing out onto the web was overwhelming and intimidating. Every time I opened google and tried to figure out how to turn python into working, internet code I’d get confused and lost. It wasn’t just python I had to learn anymore... it was html, css, databases, hosting sites, and on-and-on. Things were super complicated, so I put it off. I moved on to other things.
A couple weeks ago I was having a really shitty day. I don’t even remember what happened, but I felt awful and I thought to myself, “I need to do something productive today so it’s not a waste!” So I dusted off my coding folders and opened reddit. I found a python learning community (r/learnpython) and made a post asking for advice. The people on there were super supportive and helped point me in the right direction. They offered advice on how to tackle the program and where to start. They suggested I start with Flask, a web framework which uses python. It was super easy to get it up and running and with some basic html, I was able to create this:
Nothing works yet. I basically got the html codes to display an image, dropdowns with options, and a title to go with each dropdown. Simple, but you gotta start somewhere. Next is to figure out how to connect the html to my existing python code. This is where Flask is awesome. It reads the html format and you’re able to ‘get’ the variables you need to execute into your code.
Success! The website works! (even though it’s not public and only I can use it when I run the flask file)
But this thing is ugly. Time to learn how to CSS.
OMG THIS IS HARD
I know css is supposed to make life easier, but as a creative person, it was driving me nuts. I couldn’t get the things to do what I wanted. It took me four hours just to figure out how to get the pet image to show up on the right side. Lord have mercy. I needed a drink after that exercise.
I gave up on trying to move things around so they were aligned nicely and focused on the dropdowns. I wanted to give the users a preview of the colors before they selected them. I also had to change the text color from the default black for better visibility on the darker colors.
Ok, guys... guys. Can you just come here for a sec? Closer... closer. *whispers* Dreamweaver Ughhhhh Dreamweaver is one of the most amazing things ever. I felt so stupid not thinking of it before. I have the adobe creative cloud suite and I totally forgot that adobe has A VISUAL CODE EDITING SOFTWARE BUILT IN TO SUPPORT PHOTOSHOP FILES. *screams out in bitter happiness at time wasted* This whole time I was working like a caveman using Notepad ++ which doesn’t give you a live preview. I’d have to launch the code every time and reload the files to see the tiny adjustments I was doing. I was such a fool~ Dreamweaver allows you have your coding files open while it splits the screen to show you a preview of your site. PLUS it lets you load in photoshop files so you can extract the info and build it into your own site. Total f-ing life saver. After re-discovering Dreamweaver, I was able to align things all nice. Look at the dropdowns all in a row.
Hawt.
Damn.
Dreamweaver made things so stupid simple. In no time I was able to jazz things up and make it look like a real thing. Now it was time to figure out how to publish the site. I looked around the interwebs and found PythonAnywhere. It lets you host your apps for free given certain limitations. Things run a bit slow since it’s the free version, but I got it to launch! GO CHECK IT OUT. I AM SO HAPPY I CAN’T EVEN RIGHT NOW.
I’m gonna cry I’m so happy. Thank you guys for sticking with me through this whole process. The next steps are to beef it up. I need to fix the dropdowns so they don’t refresh when you click submit. I also need to add the children program I built. It’s a super fun program that’ll generate children based on the parents’ attributes.
I’m also thinking about turning this into an actual site. With users and everything. The whole sha-bang. I’m thinking of setting it up as a tool for other people to create a pet generator with their own artwork. I’ve got the code, now to figure out how to make it adaptable. If you have any suggestions, please let me know! I’m also interested in commissioning more pet artwork. I’ve got this big cat with wings theme going, but I’m not committed. Gotta stay flexible. If you’re an artist and have commissions open, please let me know as well.
I’ll keep posting updates as I go along so be sure to follow me if you want to learn more. In the meantime~ thanks for the support and have an awesome day!
