Untitled

Now that we have the 'Meet the Team' web page created I'd like to discuss how the final product was created. To begin, the page was created using the technologies of HTML, CSS and some bits of Javascript.

All the code in this project was written using the popular IDE 'Brackets' developed by Adobe. To begin, it was important that I started coding in HTML so that I had created a structure of content; this included things like headings, sub heading, paragraphs and images. Lets looks at the code and break it down:

<code>
<!-- /////////////////////////////////////// about-us.html /////////////////////////////////////////////// -->

<!DOCTYPE html>     <!-- Document type is HTML file (Many used to be recognised by Internet Explorer) -->
<html lang="en">    <!-- English language -->
    <head>
        <meta charset="utf-8">
        <title>Yumi</title> <!-- Title of the web app -->
        <link rel="stylesheet" href="css/stylesheet.css" type="text/css"/> <!-- Locate and link to css file -->
        <link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>                    <!-- Get font -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    </head>

    <body>

    <!-- All divs in this file are linked to the stylesheet.css located: ../css/stylesheet.css -->

    <div class="container"> <!-- E: All content in this file is wrapped around a div container -->
        <div class="user"> <!-- E: Each user is placed within their own div -->
            <div class="name">Elliot Langley</div> <!-- E: Slightly larger font and thickness -->
                <div class="usr-image"> <!-- E: Profile pics are centered and scaled correctly -->
                    <img src="images/profile-images/elliot.png">
                </div>
                <div class="align-items"> <!-- E: Social media buttons placed next to each and centred -->
                <a href="https://www.facebook.com/eclangley"><img src="images/profile-images/fb.png"></a>
                <a href="https://twitter.com/eclangley"><img src="images/profile-images/twitter.png"></a>
                <a href="https://elliotchrislangley.wordpress.com"><img src="images/profile-images/wp.png"></a>
                <a href="https://github.com/elliotlangley"><img src="images/profile-images/git.png"></a>
                <a href="https://www.linkedin.com/pub/elliot-langley/75/49a/b1b"><img src="images/profile-images/linkedin.png"></a>
                <a href="http://langley.digital"><img src="images/profile-images/langley.png"></a>
                </div>
                <div class="sub">Developer & Designer</div> <!-- E: Smaller font and centered attributes -->

                    Elliot is a curious guy who likes to keep busy. He spends most of his time infront of the computer learning new skills in the digital world. He's a serious guy with a passion for technology but when the deadlines are met successfully he likes to have a good time with friends out in the clubs. His second home is the gym where he spends most of his time weight training. His favourite video game at the moment is Halo 2 Anniversary.

    </div>

<!-- /////////////////////////////////////// E: END /////////////////////////////////////////////////////// -->
</code>

Now that we have come to the end of the code it's good to explain what these divs are. These divs are elements that are linked to the Cascade Style Sheet (CSS). The class within each div allows me to use the block of CSS code more than once; compared to an id which only lets me use the element once because it is unique to the content in the HTML file. The CSS file allows the developer to style the HTML content, such as font types, thickness, position of elements, scales, transparencies and other things that may relate to how one may want to visualise their content.

/* /////////////////////////////////////// stylesheet.css ////////////////////////////////////////////////// */

/* E: Here we can see those div classes in the CSS */
/* E: Classes are recognised with the (.) at the beginning of the block of code */

.container {
    margin-left: auto;
    width: 75%;
}

.user {
    text-align: center;
    display:inline-block;
    width: 100%;
    vertical-align: top;
    padding: 50px 50px 0px 0px;
    font-size:1.2em;
    color: white;
}

.user .name {                       /* E: Profile name (Elliot and Seb) */
    font-weight: 900;
    color: white;
    font-size:1.8em;
    padding: 0px 0px 25px 0px;
    text-align: center;
}

.user-image {                         /* E: Profile images (Elliot and Seb) */
    width:150px;
}

.user .sub {                        /* E: Profile description (Elliot and Seb) */
    font-weight: 900;
    color: white;
    margin:3px 0px;
    font-size:1.2em;
    padding: 20px 0px 5px 0px;
}

.social-images {
    display: -webkit-flex;          /* E: Safari */
    -webkit-align-items: center;    /* E: Safari 7.0+ */
    display: flex;
}

.align-center {
    align-items: center;
    float: left;
    display: flex;
}

/* /////////////////////////////////////// E: END ////////////////////////////////////////////////// */