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 our first lesson, we were taught the difference between HTML and CSS. HTML is the layout of a website with a Header, Body and Footer. < !DOCTYPE html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > This is a Heading < /h1 > < p > This is a paragraph. < /p > < /body > < /html > CSS includes the colour, margins and typefaces. An external style sheet is used to define the style of the HTML pages this is usually done by linking the HTML with the CSS by using this code; < !DOCTYPE html > < html > < head > < link rel ="stylesheet" href ="styles.css" > < /head > < body > < h1 > This is a heading < /h1 > < p > This is a paragraph. < /p > < /body > < /html > We also learned how to input an image and how to change the font style.
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>
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.
Comments
Post a Comment