Sean’s first website!

So here’s a Monday update for ya! Up until recently, I’ve spent the majority of my time “learning” primarily by one of two ways. It’s been either a) having directions fed to me and then I copy the code given and reproduce a pre-established project. Or b) looking at other peoples’ basic projects and copying their code and then manipulating their code to customize it to fit what I wanted to create.   Both have had their benefits, but both felt very limiting as well.

I had yet to create something from scratch. Something that I visualized in my head and then actually made it happen. So I decided to take on the task of creating something from nothing. No pre-made templates, no copy and pasting other peoples’ code, just my own ideas coming to fruition. So I made a super basic, single-page static website. I had a design in my head of what I wanted and later transferred that to a piece of paper. Some of the things I wanted proved tougher than anticipated and were ultimately scrapped in favor of ideas that were a bit simpler to implement. I was admittedly pretty proud of creating this site! Like I said, it’s pretty basic and you won’t get much info from it, but without further ado, here’s the link to check it out.


Sean’s First Website


For those interested, I’ll break down some of the pieces of the site, both that I’m proud of and want people to notice, and things that I know are learning opportunities for later. Some things I know how to fix and have since cleaned up a bit, but this was the first version of the site that I was willing to show people. I wouldn’t focus too much on the content necessarily, I just chose a topic that I know the most about and find incredibly interesting… me! But for real, it’s essentially just filler content and an introduction to me. I was more concerned with design, functionality, placement of objects, layout, etc. That said, here some things I liked about the site:


Starting from the top, I really like the way the navigation bar came out. (The black chunk at the top of the page that contains the links to the other non-existent pages of the site.) Almost all sites have some sort of navigation bar that allows you to go between the different pages on their site. Good ones seem to go unnoticed and unappreciated, at least in my experience. When I go to a site, it’s almost come to be an expectation that a well laid out and logical navigation bar will be at the top or on the side of a page. So I shot for that and I more or less think I achieved my goal. The links fit the color scheme of the page, they’re always fixed to the top of the page which I like (I had to look up that functionality and get it to work which was fun,) and it’s slightly transparent (I don’t know if it’s necessary, but I kind of like the way things seem to fade behind it as you scroll down.)


I spent a lot of time just going to different websites and trying to think about what it was I liked about them, and did my best to emulate that experience. With something as basic as what I have here, I wasn’t going to get all the bells and whistles that make something a great user experience, but I felt good about the things that I did include.


Sticking with the nav-bar attributes, you’ll notice the “About” tab has a red outline to show that the “About” tab is the active tab of the site. This is a feature of bootstrap that I learned about briefly in Codecademy and had fun implementing. There’s no other red on the page, so it’s kind of out of place, but hey… at least there’s no doubt about which tab is active! You’ll also notice that if you hover above any of the other links, they change colors to let you know they’re “clickable.” This is another huge feature that I know I take for granted when looking at sites. I’ve always thought if something was clickable, it should be easy to recognize as you hover over it. It infuriates me when that’s not the case. Anyone else feel this way? It’s actually a super easy feature to add in to your site in terms of code, so I think it should be the norm.


Okay, last thing about the nav-bar, promise! I wanted to add a bit of Javascript to the page, and added some VERY simple JS features. For those that aren’t aware of Javascript or what it does, here’s the answer you’d get if you googled “What is Javascript?” – “A programming computer language used to create interactive effects within web browsers.” Basically, it allows you to make cool things happen on your page and it’s not just a boring page where nothing is interactive. For example, when you click on the other links within my nav-bar, an extremely witty error message pops up. Javascript allows that to happen. Enabling this feature was probably the most challenging part of the site for me, because I had literally zero experience using JS before this. It was fun to mess around with it and get it to work the way I wanted. It took way longer than I expected and I dealt with a lot of bugs to get them all to pop up with a message, but I’m happy that it came out functional!


When all was said and done, I spent significantly more time with the things in the nav-bar than anywhere else on the site. As a direct correlation, I think I also learned the most while creating it. After a bunch of hours of work, all I had was a little black bar with a few links that didn’t even go anywhere. I was honestly a bit discouraged at how much time had been spent creating a black bar that was maybe some 50px in height, but I tried to keep a good perspective and remembered just how much I’d learned in making it and how much easier it’d be the next time. After a mental break, it was back to creating the rest of the site.


I like the way the top section looks, with the framed portrait and white text on the dark background. Ignoring the lack of centering (more on that in a second) I like the way white pops on dark backgrounds.


The next section, the all black bar with the 4 random facts was mostly just practice for me introducing a new section. I like the way it looks and the padding between the black section and the pictures below it. I wish I could have used different bullet points than the generic dashes I ended up going with, but that was an HTML battle I wasn’t going to fight. I believe there are actually black bullet points all the way on the left of the screen that you just can’t see. I couldn’t get them to attach to the text, so that’s something to fix next time for sure. That’ll be our little secret.

Getting the 3 pictures of myself to line up neatly was pretty challenging. I used Bootstrap to help me get these aligned and I thought it’d be easier than it was having used it a bit before. I struggled a lot with trying to use pictures with a landscape orientation in there, but that wasn’t working obviously (it took me way too long to realize why it wouldn’t work. Although I am curious if it would have eventually worked if I did something different.) Eventually I was able to make these work by copying some bootstrap code I had used previously and modifying it to work and fit here. I’m pretty happy with how that all came out.


The last little section is the footer. I spent a decent amount of time there making the “Submit” button fit correctly and look decent. One thing I don’t really understand is why it says “Submit Query” if you open up the page in IE but it only says “Submit” in Chrome. You can’t submit anything, so don’t worry. Or I guess you can worry if you really wanted updates on this site. Either way, it won’t do anything!


Things I’d fix:

The thing that bugged me the most was the obvious lack of centering of the text on the top section of the page. It just looks strange. I spend a good bit of time and couldn’t figure out what the problem was. Eventually, with the help of my roommate Matt-zilla, we figured out that the text was placed inside the div* that holds the portrait. (*A div is basically just a container that holds certain elements together) This meant the text was being centered based on the div it was in. I have since fixed this, but I wanted to show my site with the quirks and downfalls for feedback and whatnot.


I don’t know why the links at the top of the page aren’t pushed all the way to the sides of the navigation bar. I’d probably push them closer to the edges if I could/knew how.


I don’t like why the middle picture of me doesn’t go as far down as the other 2 pictures. This makes a little gap between the footer and the middle picture that’s bigger than the other gap and truthfully, it just annoys me.


If you make the window of your browser smaller, the pictures don’t stack in a great fashion. You’ll see two pictures next to each other on one row, and the second row will have space for two pictures, with the left-most one being blank. It just looks kinda funky and not great. That’s something I had a bit of practice with in another project, so I likely could have fixed that had I spent more time, but I was excited to show people the site at this point, flaws included.


Despite its’ flaws, I’m still very proud of it. I’d love to hear peoples’ thoughts on it! Again, I wasn’t too focused on the content, but rather wanted practice making ANY webpage and making it look decent.


Another thing I’d love feedback/thoughts on is a good way to share my code with those that are interested. I used Codepen to do a little bit of collaborative work on the site with a friend of mine, but I want to have my code up somewhere that’s both a) free for others to look at it without signing up for anything and b) relatively easy to use. I’m open to recommendations!


That’s all for now, wait for a big update next Monday!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: