{"id":406,"date":"2018-05-21T23:06:15","date_gmt":"2018-05-21T23:06:15","guid":{"rendered":"https:\/\/ucsbwebdev.fzilla.com\/?p=406"},"modified":"2018-05-21T23:10:41","modified_gmt":"2018-05-21T23:10:41","slug":"preparing-for-the-midterm-retake-building-website-from-scratch","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=406","title":{"rendered":"Preparing for the Midterm Retake – Building website from scratch"},"content":{"rendered":"

Building a simple website from scratch<\/h2>\n

In this tutorial we’ll build the exact same website from the midterm. It contains the following elements:<\/p>\n

    \n
  1. Header: With a logo and a menu\n
      \n
    1. The menu should have black buttons with white text<\/li>\n<\/ol>\n<\/li>\n
    2. A two column main element\n
        \n
      1. The left column should have a title and a vertical navigation<\/li>\n
      2. The right column should contain a title and a paragraph of text<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

        The final product should look like this:<\/p>\n

        \"\"<\/p>\n

        Creating a project inside WebStorm<\/h2>\n

        You can either create a project from the welcome screen<\/p>\n

        \"\"<\/p>\n

        Or if you’re already inside a project go to\u00a0File -> New -> Project<\/strong><\/p>\n

        \"\"<\/p>\n

        Replace where it says “untitled” with your project name<\/p>\n

        \"\"<\/p>\n

        like this<\/p>\n

        \"\"<\/p>\n

        No spaces<\/strong>! Just text characters.<\/p>\n

        Then click the\u00a0create<\/strong> button.<\/p>\n

        Starting our project with the needed files<\/h2>\n

        We’ll first need our index.html\u00a0<\/strong>as this is the file our server will always look for to show to the user first (even if you have 100 other pages).<\/p>\n

        Right click on the little folder with the name you chose for the project, then select New -> HTML File<\/strong><\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        You should now see an index.html in the left column of your editor<\/p>\n

        \"\"<\/p>\n

        Now we repeat the process to create a stylesheet called style.css\u00a0<\/strong>(please always use lowercase characters, no spaces, and try to name the files for each website the same! For example, your stylesheet can be named main.css or style.css, but those are really the only names you should use!)<\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        Adding your stylesheet in the HTML<\/h2>\n

        For us to use a stylesheet (as there can be 10 available stylesheets in a big project for each page) we need to link it from the html file using the\u00a0link\u00a0<\/strong>tag.<\/p>\n

        The\u00a0link\u00a0<\/strong>tag should go immediately before the closing of the\u00a0head\u00a0<\/strong>tag.<\/p>\n

        \"\"<\/p>\n

        It contains two attributes, rel (relationship, it’s a stylesheet) and href\u00a0(which is the path to the stylesheet file).<\/p>\n

        If we created a folder called\u00a0css\u00a0<\/strong>then the href would be\u00a0href=”css\/style.css”<\/strong> meaning we’re referencing the folder and then the file inside it.<\/p>\n

        As a sanity check, making sure our stylesheet is now linked we can simply make the body background black. When we preview our html page the background should be black.<\/p>\n

        \"\"<\/p>\n

        And then from within our index.html file we click the browser icon from the top right:<\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        Great, we’re all set here, let’s erase the sanity code from style.css.<\/p>\n

        To make it easier to look at both our html and css at the same time, you can simply right click on the\u00a0style.css\u00a0<\/strong>tab in your editor and choose split vertically<\/p>\n

        \"\"<\/p>\n

        Then close the tab on the left side that says\u00a0style.css\u00a0<\/strong>leaving it only on the right-hand side.<\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

         <\/p>\n

        Adding the initial\u00a0HTML markup<\/h2>\n

        The very first thing we should tackle is each section of our website. In this case, we’re creating a simple website with two sections, a header and a main (which has the two columns).<\/p>\n

        \"\"<\/p>\n

        Keeping in mind all our code goes inside the body element! We use a class to identify each section, allowing us to reference them later when we apply styling.<\/p>\n

        Filling in the sections<\/h2>\n

        Now we can start filling in each section with markup based on our website design. In the header, we have a logo and a menu. The menu contains buttons (anchor links).<\/p>\n

        \"\"<\/p>\n

        And the main section contains two columns:<\/p>\n

        \"\"<\/p>\n

        Each column has a title<\/p>\n

        \"\"<\/p>\n

        In the left column we add a vertical menu, and in the right a simple paragraph.<\/p>\n

        \"\"<\/p>\n

        Here is the final code:<\/p>\n

        <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Title<\/title>\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n<body>\r\n    <div class=\"header\">\r\n        <h1 class=\"logo\">\r\n            Logo\r\n        <\/h1>\r\n\r\n        <div class=\"menu\">\r\n            <a href=\"https:\/\/google.com\">\r\n                Go To Google\r\n            <\/a>\r\n            <a href=\"https:\/\/microsoft.com\">\r\n                Go To Microsoft\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"main\">\r\n        <div class=\"left-col\">\r\n            <h2>Welcome<\/h2>\r\n            <div class=\"left-menu\">\r\n                <a href=\"https:\/\/google.com\">\r\n                    Go To Google\r\n                <\/a>\r\n                <a href=\"https:\/\/microsoft.com\">\r\n                    Go To Microsoft\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"right-col\">\r\n            <h2>Great stuff<\/h2>\r\n            <p>Right column text<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
        Adding our styling<\/h2>\n
        To make our webpage look the same in every browser we can include the normalize.css\u00a0<\/strong>library. We add it the same way we add our style.css, with a\u00a0link\u00a0<\/strong>tag, but we can use a CDN link instead of storing it in our project folder.<\/p>\n
        \"\"<\/p>\n
        Very important to notice that we add the link tag\u00a0before our style.css, this ensures our styles override those of the normalize.css!\u00a0<\/strong>This is the same logic as when we add a framework. Styles declared lowed in the document are more important.<\/p>\n
        Now we can focus on getting the website to look correctly. I will again do this section by section. Starting with the header.<\/p>\n
        The header contains two immediate children, .logo and .menu\u00a0<\/strong>which should appear next to each other as columns. To do this we’ll apply:<\/p>\n
          \n
        1. display: flex; <\/strong>\/\/ making its immediate children display as columns<\/li>\n
        2. justify-content: space-between;\u00a0<\/strong>\/\/ forcing the columns to spread out to each side of the page adding space between them<\/li>\n
        3. align-items: center; \/\/<\/strong> now we can center the items inside vertically, because our logo will be much higher than the menu items and we want it to look nice<\/li>\n<\/ol>\n
          Which will look like this:<\/p>\n
          \"\"<\/p>\n
          Converting Anchor Links into Buttons<\/h3>\n
          To make our navigational links appear as buttons (larger clickable area, custom colors, etc) we have to select the actual anchor tag with our CSS. Otherwise the browser will always apply its own styling that we can’t override.<\/p>\n
          Here is how we select the anchors inside the\u00a0.menu\u00a0<\/strong>div:<\/p>\n
          \"\"<\/p>\n
          By selecting\u00a0.menu\u00a0<\/strong>div first, then adding a space, and then entering the name of the anchor tag\u00a0a,\u00a0<\/strong>we are telling the browser to select\u00a0all anchor elements inside the div with a class menu.<\/strong><\/p>\n
          Allowing us to apply the following important styles:<\/p>\n
            \n
          1. display: inline-block;\u00a0<\/strong>\/\/ By default an anchor is display inline, which is great when it appears amonst text. But as a button it needs to be able to display as a button with extra padding inside it. To do this we use inline-block<\/li>\n
          2. text-decoration: none;\u00a0\/\/ <\/strong>The browser adds an underline to all links, so we need to remove this (if we want)<\/li>\n
          3. padding: 10px 20px;\u00a0<\/strong>\/\/ Padding should typically be less on top and bottom than left and right. So we set top\/bottom to 10px and left\/right to 20px. We use padding\u00a0on the anchor\u00a0<\/strong>because we want the clickable area to be nice and large. If we used margin, or added padding to the wrapping element, the clickable area would\u00a0only be the text of the anchor<\/strong><\/li>\n
          4. color: white;\u00a0<\/strong>\/\/ Changing the text color<\/li>\n
          5. background: black;\u00a0<\/strong>\/\/ Changing the background color<\/li>\n<\/ol>\n
            \"\"<\/p>\n
            Let’s review what we have so far:<\/p>\n
            \"\"<\/p>\n
            Great, the header is in great shape. Let’s move to the .main\u00a0<\/strong>element with the two columns. Step 1, make the immediate children display as columns:<\/p>\n
            \"\"<\/p>\n
            Now we need to add styling to the buttons in the left column navigation, almost identical to the ones in the header, but I want the buttons to be display block,\u00a0<\/strong>which will make them take up the full horizontal space in the left column. And add some spacing underneath with margin-bottom:<\/p>\n
            \"\"<\/p>\n
            Result<\/p>\n
            \"\"<\/p>\n
            Looking great, a couple more small styling improvements and we’re done.<\/p>\n
            Adding padding to our columns<\/h3>\n
            We don’t want the right column to be directly touching the left column, so we can simply add some padding to the columns to give them a little breathing room:<\/p>\n
            \"\"<\/p>\n
            Here we use a special css selector, by declaring each selector and then adding a comma between the next selector we can select multiple selectors and apply the same styling. So we’ll add 15px padding to the left column, right column, and the header. Result will look like this:<\/p>\n
            \"\"<\/p>\n
            And now we just want to add a gray background to the left column:<\/p>\n
            \"\"<\/p>\n
            Here is the final CSS code:<\/p>\n
            .header {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.menu a {\r\n    display: inline-block;\r\n    text-decoration: none;\r\n    padding: 10px 20px;\r\n    color: white;\r\n    background: black;\r\n}\r\n\r\n.main {\r\n    display: flex;\r\n}\r\n\r\n.left-menu a {\r\n    display: block;\r\n    margin-bottom: 3px;\r\n    text-decoration: none;\r\n    padding: 10px 20px;\r\n    color: white;\r\n    background: black;\r\n}\r\n\r\n.left-col, .right-col, .header {\r\n    padding: 15px;\r\n}\r\n\r\n.left-col {\r\n    background: gray;\r\n}<\/pre>\n
             <\/p>\n
            That’s it! You’ve created a basic website \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
            Building a simple website from scratch In this tutorial we’ll build the exact same website from the midterm. It contains the following elements: Header: With a logo and a menu The menu should have black buttons with white text A two column main element The left column should have a title and a vertical navigation […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=406"}],"version-history":[{"count":5,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/406\/revisions\/445"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}