#10 Coding Round-Up

Amy Marsh Is A Fashion Technologist In Training

Sunday is said to be the day of relaxation and for this sunday it is going to be exactly that! A whole week (plus a weekend) down and we have gone from this:


Screen Shot



To this:


Screen Shot


Not bad for a first few days of code hey! (Even if I am saying so myself!)


However, now I am going to take this opportunity to go through some of the basics of HTML and CSS. I have tried to be as clear as possible when writing the tutorials for you but going over a few key points won’t hurt anyone and coding should always be done in good practice! Dodgy code won’t help any site!



1.HTML and CSS


Starting with the very basics, HTML is the structure of a website and CSS is what makes it look good! The HTML and CSS files are linked together by this piece of code which is entered into the header of your HTML code:



2. Tags


You may of read that I have been referring to sections of coding as ‘tags’ these refer to things inside <>, you will find them in the HTML of  a website. Tags nearly always come in pairs, with an opening and closing tag.


An example of an opening tag would be <div> and an example of a closing tag would be </div> (noticing the adding of a / to the closing tag).


Tags can nest in each other and you should make sure to close them in the right order for example here see how the div tag is nesting inside the body tag:



The most common tags you are likely to come across are:

<html> </html> : These open and close an entire web page, all HTML code should be contained within these.

<header> </header> : These contain introductory content for the site (for example the title of the site) as well as links to pages the website also needs to read when loading, for example a link to the CSS code.

<body> </body> : This contains the main structure(/body) of the site.

<nav> </nav> : These nav tags will be found inside the body tags and contain information relating to the navigation.

<div> </div> : These define a division of code, for example one division might be your blog post and another your blog sidebar.

<p> </p> : These define different paragraphs within a section of code.

<footer> </footer> : These contain information relating to the footer of the website.


3. Class and Id


Sometimes tags include a class or id to allow them to be called in the CSS to be styled.


A class will be displayed like this:



And called in the css using a full stop and then a the class name directly after it like this:



The same class name can be given to multiple tags and the same styling will applied.


An Id on the another hand can only be given to one tag, this will be displayed like this in the HTML:


And called like this in the CSS:



In general for CSS the standard set up for each section of CSS is calling the tag, placing { } around the options of CSS you have decided on and for each option of CSS to have a ‘:’ after you have said what you are about to change and a ‘;’  to end with. It should be similar to the below layout were I am setting the body tag to have 0 margin:



You can call out a piece of HTML in the CSS by either referencing the tag name itself i.e body, nav, p. To call out tag names themselves you simply need to write the name (no full stop or # is needed). Or you can call a section of CSS out by the class or id of a tag as shown earlier.


I will now go through some common options of CSS:


margin and padding – margin adds space around the content whereas padding adds space inside the content, it is demonstrated in the diagram below:


Screen Shot


Margin and padding are set-up using pixels and top, left, right and bottom all can be given different size. You can either call margin-top, margin-bottom, margin-left and margin-right displayed here:



Or you can set them up using shorthand so each option placed in the particular order means, either top, left, right or bottom. These orders are:


top margin is 25px

right margin is 50px

bottom margin is 75px

left margin is 100px


top margin is 25px

right and left margins are 50px

bottom margin is 75px


top and bottom margins are 25px

right and left margins are 50px


All four margins are 25px


(NB margin has been used as an example, this applies for padding as well)


border- this adds a border around the piece of code you have called out, you have to select what style of border i.e (solid, dashed, dotted see the list here) then the width of the border (1px, 2px, 3px etc) and then the colour. It should look similar to this:


font-family- this decides on the font for the section of code you link it to. If you place it in the body tag it will decide the overall main font for your website. A list of font-family’s you can use can be found here. It should be written like this:



font-size- this decides on the font size for a certain section of coding, fonts in css are measured by pixels (px) not points so remember to put px at the end of size you decide on, like this:


color- this decides the colour of font for the section of code you call out- please note the america spelling of colour is used on websites. When deciding on colours Hexadecimal codes should be used, please see the list here. An example of how to set the font colour is:


background-color- the decides the background colour of the code you call out, again note the america spelling. An example of how to set the background colour is:


display- the main options for display you will use are inherit, block, inline-block and none, for the bigger list of what you can set display to please see here. Display should be written like this for example:



position- the options for positions are static, fixed, absolute, inherit and relative. Static is the default for position. Fixed means it will stay in that position on the browser, whether you scroll down the page the div will still be present for example like our fixed header. Absolute means it will be there on the webpage whereas relative means it will be there relative to a another div. Position should be written like this:



height and width- you set the height and width of a section of code by defining the height and width like so:


Or by using percentages:


Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!



Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">