Self Initiated: Start Of Development

Now that I had a better understanding of a ‘frame work’ works, I decided to begin development of the website. First of all I needed a domain for IVY Infant Clothier, so I went onto my domain hosting website ‘Godaddy’.

godaddy

Luckily the domain I wanted was free, so I managed to get

http://www.ivyinfantclothier.com

I also purchased 5 years worth of use, because this website has a long shelf life and is a product that will be used for a long time, here is a screenshot from my cpanel of the domain:

domain


 

 Start Of Development

To begin with I first implemented the foundation documents into the file tree of my website, and put the files up onto the server. Here is a screenshot of my file tree:

filetree

Containing all of my foundation documents, including folders for:

  • pics
    Including any pictures such as (logos, buttons, ect.)
  • Dresspics
    Including all of the pictures of Louisa’s dresses
  • Icons
    Including all of the icons such as social networking icons
  • Vids
    Includes my hero video
  • Webfonts
    Includes my purchased fonts, with the licensing I purchased with them

It is good practice to keep your files organised and labeled, it makes it easier when trying to find files you need to edit or implement into your website. Now that I had my file structure in place it was time to start implementing the frame work such as the rows and columns into my ‘index.html’ file.

First of all I had to link all of my documents within the file tree, into the head of my index file, such as the foundation documents and any other files such as style sheets.

head

My next step was to begin creating the structure of the website, implementing containers using relevant names for the classes, for each sections of the website. Once I had done this I then went onto working on my main body, and started adding my rows of columns for the pictures of the new in section.

rowscolumns

I had to make sure that all of my images where of the correct file format ‘png’ to help with loading time, and also that all of the images where of the same size. Once I had done this I began entering the images into the columns, and setting the amount of columns each image would take up in each row, in this case I set the column sizes to Large 4, this means that for each row, there will be three images each image is assigned the large 4, because only 12 columns can go into each row.

So these columns I have assigned in the screen shot only show on large screens, so my next step was to copy and paste this section and implement it bellow:

row2

These are the rows for medium screens only ‘tablet devices’, and notice I have set the size of the columns of each picture to medium-6 this means that in each row there are only two images, changing the structure of the layout of images. I then carried out the same process for small screens ‘smart phone’.

When the screen is downsized from large to small the content is now responsive, and flows with the resize of screen, here is a gif I created showing how the images respond to the size of the screen and change in structure:

responsiveivy.gif

 

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s