Permafrost - The Foundation

So, now that I have a foundation in HTML, CSS, Git, Github, and the Command Line in Terminal, next step is to make a portfolio website. Am I ready? Heck yes! I spent so much time trying to figure out how to do it, and the new tools I’ve become familiar with will definitely do the trick. *Finally* I can display my works to the world properly.

Step one: figure out my content. Let’s see... I have blue shades, and black and white from my logo, and I know I want blue in my brand colours, and not just because it’s my favourite colour. Blue in colour psychology means loyalty, dependability, trust, reliability... all things I want to perpetuate in my business. Other brand colours: white means clarity, black means serious, and grey, or silver, means balance and calm. Make sense?

Logo: wolf or dog paw in blue shades, with the biggest pad being a camera lens. Typography: Impact font with rounded corners in white, with both logo and typeface outlined in black.

Website typography: Open Sans for headers and navigation—sans means sans serif or missing the ‘tails’ on certain letters, and Droid Serif for general text, like paragraphs, captions on pictures, things like that.

Pictures: need a picture of me for sure for my About Me page, and then pictures of the various projects I’ve done so far. So, finished wireframe of my website homepage design, my finished business card design, my logo icon design, my finished brand logo design for my fictitious company The Whole Bean coffee shop, icons for The Whole Bean, my personalized version of the Wordpress website, a picture of my finished client website WhereRV? all from various Skillcrush modules I’ve completed so far. Also, a picture of Ninja for both my portfolio page and About Me page, and a picture of a somewhat finished 3D horse model in Blender, and social media icons for my contact page.

Okay, now that I have my content in order, time to go about coding this thing to look like a website. So, I need a header div for my logo and typeface, a section with one div for my samples list, and a div for my sample pictures, a section with two divs for my reviews, and a div for my footer on my homepage. For my about page, I need a logo div, three sections with a picture div, and a text div each, and a footer div. Portfolio page needs a logo div, three sections with three divs each for my picture, heading, and a description of each picture, and a footer div. Contact page needs a logo div, a text div, and a footer div. I also recently added a blog page, which required a logo div, a blog section with picture, heading, and blog post div, a sidebar div, and a footer div. This page is still very much a work in progress—not that any site isn’t—so I will be adding more blog posts once I figure out how to add somethings, like a working comment box, a read more feature for blog posts, among other things (Hint: Wordpress makes it so much easier to do this, but I’m stubborn, so I want it to work on my HTML website as well).

Now for the css part of coding—adding colour, text style, all the things that make up the visual parts of a website. Yeah, I could leave it at HTML, but then everyone would just see a lust of black text, pictures, and blue underline text denoting the links. No, thank you. Websites *need* structure! So, time to style this website to make it look good! Width, height, float where needed, font sizes, and colours for background and text.

Now, time to back it up with git and github.

Terminal: cd path-to-folder-I-have-my-website-stuff-in, git init to create local repository, git add all files.extension.

Over to github: create repository, copy and paste code git remote add origin [email protected]:username/folder.git.

Press enter, then paste git push -u origin master.

There, all backed up in a remote repository.

Now, for displaying it: git branch gh-pages, and then git push origin gh-pages (websites can be viewed here).