Posts

Showing posts from April, 2018

Lesson 3:

PINTEREST. We started replicating the Pinterest official website. We included an animation effect on the two small buttons at the bottom of the page.  In the footer we declared the two circular icons and the privacy option: < i class="icon fas fa-plus"></i> < i class="icon fas fa-question"></i> <a href="#">Privacy</a> The animation will take place at the bottom of the screen and rise up 24pixels; bottom:24px; and this animation will take place once opening the webpage. 

Lesson 2:

In the second lesson we learned how to link the HTML to the CSS codes. The code to link the HTML to CSS is:  <link rel="stylesheet" type="text/css" href="css/style.css"/> We also started replicating the Pinterest official website.  In HTML- <div class="grid-container"> link to .grid-container {          display: flex;          margin: auto;          width: 900px;          } in the CSS. 

Lesson 1:

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.