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’.
Luckily the domain I wanted was free, so I managed to get
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:
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:
Containing all of my foundation documents, including folders for:
Including any pictures such as (logos, buttons, ect.)
Including all of the pictures of Louisa’s dresses
Including all of the icons such as social networking icons
Includes my hero video
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.
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.
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:
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: