Designing the Angry Coder Website

It’s a tough life being a coder. The pressure of our day to day work; constantly creating code, fixing code, testing code- sometimes it’s enough to make you want to lock yourself in a room, turn off the lights and vent the days toils to all the coders out there who share the pain.

 

So, here at Kalexiko HQ we have come up with the ingenious idea of creating a hub for all us angry coders to pour their laments to one another; a hub where all the tired, the weary and the downright fed-up coders can come together and share a rant in the privacy of our own kind. What’s more, rather than just create the site and throw it out at you we thought it would be nice to offer you a step-by-step guide as to how we made it. In the first part of this two part series we will show you how we designed the front end of the site, with the back end to follow. By the end of the series, you will see just how a blog site is made and, if you feel like going a step further you can even make your own hub and create an online social space about whatever you want.

 

This tutorial assumes that you have a basic knowledge of CSS and HTML, if you do then let’s begin, I will introduce you to my quickly made design and then I’ll show you how to begin coding it. The design itself is simple, with a vote up and vote down system and the ability to submit entries to the Angry Coder, apart from that it’s really just a simple blog.

 

Firstly, lets set up our document. Personally I use a website called Initializr to set up my documents and for the sake of this tutorial suggest you do too. So visit their website choose bootstrap and click to download it. Set up your local environment and open it up in your text editor of choice.

 

Next you will need to add the fonts that I used to the header of the document. I used a couple of fonts from Google Web Fonts; these are Droid sans and Crimson text. So visit Google Web Fonts and add them to your collection. Once you have done this then paste the relevant code within the header, which should look like this;

 

 

Ensure you add this line above your CSS files.

 

Now we are ready to begin developing our design. To begin with implement the background and header area. I used a patter for the background from Subtle Patterns so visit the site and download the pattern called AG Square. grab agsquare.png from the zip file and place that in your IMG folder. Now, apply it to the body tag within your CSS. Once you have done this open up main.css which is located within your CSS folder. From here write the style for your body which will look like this;

 

 

Now you have a nice repeating background across the site; note I also added the border top to resemble the horizontal red line across the top of the design. The next step is to add the logo and “submit an article” button to the header of the document.

 

Before we do this, you need to save the Angry Coder logo to image folder. Next, within our header tags (in index.html) we are going to add the html for our logo and button, which should look like this;

 

 

Next comes the style, so back to your main.css file;

 

 

Now the correct style is all in place in the header area we will now put together the blog post area. So to begin with “create a new section” within your index.html document underneath your header tags, and then add the following article tag into this section;

 

 

Once this is done, we need to add each part of the blog post so that the heading, page-break, vote up and vote down; arrows, content, posted by, posted on and total number of votes features are added to the blog. First save the images of the arrows and two page breaks, then we can start the mark up. As I am going to be using test content I will show you how I have laid my html out with blank entries;

 

 

Next we need to style this up, so go back to main.css and then we can set up a working responsive blog page to use. The styles I used are as follows.

 

 

Now for the finishing touches, the heading text gets a bit too big when it’s reduced down in size so I will add a media query into my main.css. This will apply a text change when the window size gets smaller;

 

 

I have also added a css3 transition on the “submit entry button”, but feel free to experiment and make it your own. Next up we need to place our “submit enquiry” form in and add some jQuery. So let’s start with the mark up for the form first, I place the form just below the header tags like so;

 

 

This is the mark up for the form as well as the CSS for the relevant form.

 

 

Now we have a nice form in the middle of the screen; the only problem is that we have is we don’t want it displaying all the time. So for the time being add the below code to the .submit-article class, which should now look like;

 

 

So, now let’s open up the main.js file located on your javascript folder. Let’s start by adding a document ready to the file;

 

 

Now we are going to use jQuery to show and hide the form we just created. So add the id toggle-article to our submit article button;

 

 

Also, add this CSS to your document.

 

 

Now we can implement the jQuery, which will look like so.

 

 

Now we have a functioning slide down form which toggles on and off via the “submit article” buttons. The last piece I will cover within this article is a simple HTML5 Validation. So, simply add “required” to the fields within the form you want to be required before submitting, we will go into more depth on validation when it comes to adding the backend of the site in the next article. Please beware HTML5 Validation is not supported by Safari or IE9. So the final form looks like this;

 

 

So there you have it; a simple fully responsive blog which features a submit article form. If you would like to see how ours turned out click here. As I mentioned at the beggining of the article, this is only the front-end design. In the upcoming article we will be using PHP to bring this template to life. We will show you how to make the template communicate with a database and retrieve all the rants from you angry coders out there. Let us know how you found the tutorial! Did your Angry Coder site end up a success or did you go all out and make your own blog? We would like to hear how you guys found the tutorial and what creations you have come up with.

SHARE: