Programming!

After doing the page I linked the other pages with the first one since they had the same layout. I also did the icons and linked them to work.  <ul class="dropdown-links small d-flex">                     <li class="ml-2">                         <i class="icon fas fa-user"></i>                         <span class="sr-only">User.</span>                         <a class="nav-link" href="user.html"></a>                 ...

After I finished my homepage I moved to the next pages where I used a grid system to include 4 images near each other and I also included some dropdown buttons. 

In my header when I included the navigation bar I had in mind that I do a dropdown menu when you hoover on a word to make it similar to the official Asos website. 

After I did the plan I started coding and I started by doing the homepage.  The first thing that I included in my homepage was the logo on the left top corner and then I continued building my page by adding the navigation bar.  Logo code Navigation bar In my homepage I also included some images and then I included the footer. Images code

From now on the posts are going to be about the development of the website.  The website which I had chosen to redesign and make some changes in it was the ASOS website. 

On the 5th lesson we were told to plan out what we wanted to place into the website. This was part of the second task. In this task we had to create a style guide, sitemap and wireframes of the website. We had to chose the style of the website,  typefaces, colour palette and layout. I decided to choose the ASOS shopping website.  Once completing the sitemap of the website, I started redesigning the webpages themselves.    After completing the wireframes and the sitemap of the website, I had to create the style guide. 

In the 4th lesson we were taught that we can get the codes from BOOTSTRAP, that includes dropdown menus, buttons, grids and others. So the codes can work you have to link it in the html; <link rel="stylesheet" href="css/bootstrap.min.css" /> We also included the link of Fontawesome.com in the html; <script defer src="js/fontawesome-all.min.js"></script> On Fontawesome.com one can find different icons that will be suitable for our website. One can see the code below: < a href="#">    <i class="icon far fa- heart"></i>    <span class="sr-only">Activity Feed.</span> </a>