Put thought in your design/Coding Basics

Put thought in your design

Design a 5-page website or blog to promote your hometown (or any other place if you so choose). Present your design along with a strategy that explains the decisions you’ve made during the design process (keep the six steps mentioned in the lesson Web Design Process: Designing for Web (part 2) in mind). Remember, it’s important for us to see how you think, so explain why you decided to do things the way you did.

This is a front-end design learning activity. No coding or publishing is needed.

Please upload this activity to your WordPress blog along with a Word document or PDF explaining your strategy.

Ok so here’s the thing, I live in Mjøndalen.

Never heard of it?


I like my solitude.

More people are moving in though – unfortunately, due to the gentrification of the local ‘big’ city, Drammen. People who have lived in Drammen all of their lives can no longer afford to buy or rent there anymore due to it.

Since there is more of a story to tell in Drammen, I will use them for this little excercise.

But, to familiarize yourself with Mjøndalen before I move on to Drammen, please, acquaint yourself with it by dabbling in some DJ Broiler. It explains everything. (best if you can understand norwegian)


(Yeah Møndarn, it is pronounced that way….harry ås)

This is a trial run before our big project, which has a lot more coding.


I made the site a one page scrollable, since that is the type I am intending on doing for my project – it’s more modern, relevant and just as difficult to code because virtually everything on the site is linked to something else on the page and scrolls automatically to that, or diverts the user to a sub section. (similar wireframes of this type are featured in blog entry ‘making a wireframe)

Coding basics:

Take the basic website you have designed in your previous two Learning Activities in this module (Learning Activity – Put Thought Into Your Design and Learning Activity – Planning the Structure) and convert that into HTML and CSS code.

This will help you understand the importance between the design and the programming phase and how they work together.

Don’t stress if you can’t get everything right, just do as much as you can.




2726 lines of code btw.

Crimson editor was used instead of Dreamweaver because Dreamweaver is for babies.


(No, I don’t mean that, I just think it’s a subpar program that doesn’t allow people to CODE but holds their hands, then it fails on them – and having no skill because of the hand holding, do not know what to do to fix it.)

Anyway, random screenshots:


some of the code

screenshot from browser (but remember http://www.ourdrammen.com does not actually exist, I’m using my hosting/domain I paid for exclusively for my project)


Is it snarky? Sure, but I had to amuse myself somehow.




One thought on “Put thought in your design/Coding Basics

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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