I delayed this post a bit, I’m actually half way done my third (and last) site for my Hackeryou pre-course work, but I figured better late than never! Class starts on Monday (this Monday!) and I am SO excited. In particular, I’m looking forward to meeting so many new people with both similar interests and very different backgrounds, as well as (of course) learning web development! It’s been a lot of fun so far and every time I sit down to work on a site I learn five or six new things. Being able to see my progression laid out on the screen is incredibly rewarding. So without further ado…I present my second site!
The number one lesson I learned from making Site Zero and Site One was that I really, really needed to get more organized about things. Naming conventions, putting things in proper folders, and so on. Of course I “knew” this before (especially being a librarian…I know), but it can creep up on you really fast, especially once you start making a multi-page site, adding in various pictures and icons and so forth. I also realized the importance of site mockups/wireframes/just having any plan at all. When I made Site One I just kind of started throwing divs around. About halfway through, when it was too late to scrap the whole thing, I realized the site wouldn’t be able to be structured for the content I wanted it to have. Apparently even people with BA’s in modern art history forget FORM FOLLOWS FUNCTION. So the above is the mockup I made in Balsamiq (which is GREAT), and then edited in Preview a bit. It’s not entirely accurate as to what’s in the site, but it was such a helpful starting point. From now on I’m not touching code until I have some concept down first.
Starting the site
One of the results of not thinking through the functionality of the site before I made it was that I ended up with Site One being fine, but more or less non-functional compared with what I wanted it to be as a personal website/resume site. So for Site Two I decided to do what I should have done for Site One. The result is another personal website, but this one is multipage, with a whole page dedicated to my resume (required for the pre-course work). Since Site Zero and One were both one-pagers, the first thing I learned making this site was how to make a site that has multiple HTML docs, and one CSS doc. Again, this gets confusing really fast if you don’t keep it organized.
Here’s a picture of the homepage when it was about half way done, don’t mind the pink and such:
On the header I used a background from Subtle Patterns and changed the colour in GIMP. My original inspiration for the site I unfortunately forgot the URL for, but it’s so different you wouldn’t recognize it anyway. Basically gave me the idea for the colour scheme, which I used the awesome Chrome extension Eye Dropper to duplicate and modify. For the icons I used mostly the Noun Project. I also learned how to use Google Fonts in my sites, and was extremely happy to find my favourite display font, Lobster, is one of them! I also am really loving Oswald, which I’m using on Site Three, but more about that in another post.
And here’s the rest of the website, all five pages! I’m pretty proud of it 🙂
With more time, a lot more can be done with the resume page, but I wanted to keep it clean and simple for now. Since most personal websites I like have very little text, I decided I’d limit the resume to the very basics, and leave it up to my massive LinkedIn profile and the resume download button to provide more detail if people want it.
The testimonials site was my excuse to work on positioning more. I refuse to come up with an idea for what the page should look like, only to change it when I realize how hard it will be to position the elements properly. Because I’m just starting, this page took me some time and still could use some work. But because I went through with it, now I’d be a lot quicker if I were to do it again. Thanks to friend of the show Mat Calverley for the historically accurate content on this page.
Since I’m just starting to build up my portfolio now, this is just a placeholder.
This is a working contact form, with all the appropriate html semantics. It uses placeholder text in the text box, so that goes away once you click inside said box. A lot of making this contact form was stripping most of the default styling browsers do to forms, which aren’t super pretty.
So that’s the site! In a couple of weeks I went from this:
which I think is pretty good progress. As I mentioned, I’m now about half-way through my final site, Site Three, and I’m doing a lot of playing with transitions and animations. It’s super fun. So I’ll be back shortly with a post about that! And of course a re-cap on my first few days at Hackeryou!
I’m interested in hearing about front-end internships and jr. dev positions in cool companies that share my values, and I’ll be available for work in late June! Let me know if you have something in mind for me at email@example.com.