#the splash text on the title screen is VERY relevant to what i have done | Explore Tumblr posts and blogs

jackkiplingdesignindustry · 5 years ago

Text

Coding my Portfolio Site

Over the past 3 years of uni and Sixth Form, I have picked up the basics of coding and can easily write a basic website, but we have also done a few lectures on some more advanced coding. The languages we predominantly used are HTML 5, CSS 3 and Javascript.

In 2nd Year I designed a good portfolio website, but I want to improve that by changing/adding new code that I have learnt this past year.

I first started to learn code by using Python language in Year 8 of school, then moving on to using dreamweaver and notepad to create basic websites. However, I have found that since coming to uni and downloading brackets to write, that this is the best tool for the job.

<head>

Search Engine Optimisation (SEO)

In a sense, this is the most important part of a website as it contains all of the information that is going to get your website higher up in the search results on web browsers. Companies hire whole teams dedicated to researching SEO as it can literally be the difference between you or your rivals being noticed first.

All if this information is contained in the <Head> tag and will not be displayed on your pages, but it is mainly for the web browsers to read.

The description of my site is just a short sentence, giving my name and explaining what the site is.

Another important part is the “keywords” section. This is where you list all of the suitable, relevant words for your site. So when people search these words on a browser, your site will be selected to be shown to them. You would think that most people would list a ridiculous amount of words relevant or not just to be noticed, but this is called ‘Dark SEO’ in the industry and is massively frowned upon.

The <title> tag is essentially what your site is to be called. This is what will be the blue hyperlink on search pages and will be displayed in the tab bar at the top of your page.

</head>

<body>

<nav>

The code that you want to be displayed on your site sits in the <body> tag.

First of all, I wrote the code for the navigation on my site. I wanted my site to all flow on one page as it keeps everything streamline and simple. However, a form of navigation always keeps your site more accessible. So, I added a ‘hamburger menu’ icon in the top right of my sight, that shows the links for shortcuts on my site.

Here, you can see the code for the navigation. Rather than send the user to a different pages, each link is a trigger to scroll down to the desired section. This code is relatively simple but effective as a way to navigate a simple portfolio site.

</nav>

For the header, I wanted it to be a sort of clean, simple splash screen, hence the lack of code. Here, you can see that I have included my logo as an image in the centre of the screen, with text below, stating my name and qualification/course. Simple and straight to the point. Below this, is a button ‘More About Me’, that when clicked takes you down to the next section explaining

</header>

In this section, I have shown a little image of me with a bio below. A couple of paragraphs explaining who I am and what work I do in more detail. A very basic section to code as it is just an image with text.

</profile>

Here, 4 icons are displayed, each stating what my strongest points in this field of work are. A basic, but good section to add, as employers will want to know what you think you are best at.

Each strong point has an icon that suits the statement made. I chose to use the tertiary colour of my site here, as it then stands out from the main black and white theme of the site, but also matches the blues of the image used on the site.

</abilities>

For my portfolio, I wanted to make it animated as it shows off another very useful skill, and it is different to other portfolios I have seen.

Coding for this only involved embedding the url and adding dimensions for the player.

youtube

</portfolio>

<map>

Next, I added a map with a pin dropped in the location of the Media City campus where we normally study. This is just in case anyone wants to know where I am primarily located. To code this, I used a website that allows you to just choose a location and it writes the code for you. I have used this site multiple times for sites as it makes your job much easier.

</map>

Footers are located at the foot of the page, and can display many different types of information. In the footer of my site, I have chose to display images with links to companies and brands I have worked with or done work for.

located below that, are all the links to my most important social media accounts or where I can be contacted, including Facebook, Instagram and Dribbble.

</footer>

0 notes