Coding Project: Part 1

After learning a bit more HTML and CSS, I am attempting a little side coding project. At the rate I was going, there was no way I could have created anything worth looking at — that is, until I found out about Bootstrap. Bootstrap is a mobile-friendly combination of HTML, CSS, and Javascript. It saves time by eliminating the need to code every single detail, and allows you to focus on the project as a whole. Bootstrap was started by the innovators over at Twitter. Go figure.

 

Coding the front Page

 

WB-homepage
The “Heading” sections at the bottom were coded using Bootstrap’s mobile friendly design

I’m not going to go into crazy amounts of detail. I’ve seen the Facebook movie. I know what happens when someone shares web ideas.

It’s been exciting learning the basics of coding, especially now that I have Bootstrap to work off of. For example, instead of creating a ton of <div>’s within <div>’s, and tweaking the position of those <div’s> in CSS, Bootstrap simplifies it into one tiny line of code: <div style =”col-md-4″>.

 

HeaderJournalistCornerHeader.fw

The minimal, classic design of typewriter keys took a while to get right. At first, I tried to include a pencil and cigarette somewhere in the image. I also toyed around with the color pallet — using light blues and their complementary oranges. It was too much.

When I think about my taste, I am always attracted to minimalism, and negative space. In getting back to the basics, and making something easily recognizable, while simultaneously appealing, I ended up with a pleasing final product.

 

Logo

WB-logo.fw
Similar to the header, I wanted something clean and simple for the logo. Since the webpage is going to be called “The Writers Block,” a play on words seemed fitting.

This was created in Adobe Fireworks, as was the header image. I am more fluent in Illustrator and Photoshop, so adjusting was a bit tricky. My options are slim, as I am burning through the free trials Adobe offers. Since I had already used both Photoshop and Illustrator, I was stuck with Fireworks. Baylor does have an entire floor full of iMac’s with the latest Adobe software — I just like my desk too much.

Leave a Reply