Skip to main content

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series.
Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others.
Being programmers, we are going to do this by coding a simple web page.
Your task is to see if you understand all that is happening, if not, then be sure to revisit a previous tutorial on the subject and re-read it.
Along the way, I will be recommending common practices for organizing & writing your code.

Let's get started.

I recommend storing your web-project files as follows;
Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files. 
  1. For this work, create a new folder and name it review. 
  2. Inside it create two folders, name one styles and the other html.
  3. Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) of Sublime Text.
  4. Create a review.html file and save it inside the html folder. 
  5. Create another file and save this one as review.css, inside the styles folder. 
Open up the review.html file in your text editor and copy & paste the following code;


<!DOCTYPE html>
<html>
<head>


<!-- see the linked image in this blog site to understand where this title goes -->

     <title>My Site</title>

    <!-- link to css
      href property is set to ../styles/review.css
      ../  means outside this folder (that is outside the html folder where review.html is in)
      ../styles/ means outside this folder, there is a folder called styles
      ../styles/review.css means outside this folder, there is a folder called styles and in it, there is    review.css file

     -->
    <link rel="stylesheet" type="text/css" href="../styles/review.css">
<body>

 <!--instead of using <div id="header"> ... </div> we can simply use  <header></header> -->
    <header>
        <a href="#" id="siteHeading">My WebSite</a>
    </header>
  

<!--instead of using <div id="main"> ... </div> we can simply use  <main> ...  </main> -->

<main>
        <h2 id="siteSubHeading">Welcome to the coolest website for people like you.</h2>
       
   
        <div id="middleMainSection">
            <div id="leftSideBar">
                <div class="fancyBorders">
                    <h3>This website is for</h3>
                    <ol>
                        <li>Reviewing previous html & css concepts</li>
                        <li>Learning a few new concepts</li>
                        <li>Learning best practices for organizing and writing code</li>
                        <li>Fun</li>   
                    </ol>
                    To learn more, feel free to check out the blog-site (see details at the bottom of this site).
                </div>
            </div>
           
            <div id="rightSideBar">
                <div class="fancyBorders">
                    <h3>Sign up now and click get started.</h3>
                    <form>
                        <input type="text"      placeholder="Your full name">
                        <input type="text"      placeholder="Your email">
                        <input type="password"  placeholder="Choose a password. *Atleast 6 characters.">
                        <button type="submit">GET STARTED</button>
                    </form>
                </div>
            </div>
    </main>


    <!--instead of using <div id="footer"> ... </div> we can simply use  <footer> ... </footer> -->
    <footer>
        <h4>Visit Us</h4>
        <ul>
            <a href="https://relatableterms.blogspot.com/" id="blackLink">relatable terms blogspot</a>
        </ul>
    </footer>
</body>
</html>

Save and then open up review.css and copy & paste the following code;

/*

** instead of using color names such as white, we can specify colors as hexadecimals

* for example white is #FFFFFF ,  black is #000000

* for a complete list of hex color values, you can simply google

* here is one good site to refer too (scroll to bottom of the site)

* https://material.io/design/color/the-color-system.html#tools-for-picking-colors

*/

#header{
    background-color: #212121;
    margin: -10px; /*you should play around with this value and see the changes*/
    padding: 25px;
}

#siteHeading{
    font-size: 22px;
    color: #FFFFFF;
    text-decoration: none; /*removes the underline from anchor <a> tag, try deleting this line*/
}

#siteSubHeading{
    text-align: center;
    padding: 12px;
}

#leftSideBar{
    display: inline-block;
    float: left;
    width: 48%; /*almost half the screen width*/
    padding: 12px;
  
}


/* this next side bar will also float left because it does not clear the left float BUT
* it will be displayed at the right because of the above left floating side-bar above which takes up to 48% of the screen's width
*/
#rightSideBar{
    display: inline-block;
    width: 48%;
    padding: 12px;
  
}

.fancyBorders{
    border-top: 12px solid #BDBDBD;
    border-left: 2px solid #BDBDBD;
    border-right: 2px solid #BDBDBD;
    border-bottom: 2px solid #BDBDBD;
    padding: 12px;
    height: 250px;
}

input{
    display: block;
    width: 300px;
    padding: 8px;
    margin-bottom: 16px;
}

button{
    width: 318px;
    padding: 8px;
    background: #212121;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

#footer{
    clear: left;  /*we are clearing the float now */
    background-color: #BDBDBD;
    margin: -10px;
    padding-left: 25px;
    padding-top: 12px;
    padding-bottom: 12px;
}

#blackLink{
    color: #212121;
    text-decoration: none;
}



/*
** :hover waits for when your mouse is over this element and makes the changes specified,
** in this case, changes your cursor to hand or pointer as well as the text color to purple
** :hover is the same as :focus here, except focus is for when the site is viewed via your phone's **browser
** we will learn more ebout events (hover, focus, and others) in the coming tutorials
*/
#blackLink:hover,
button:hover,
#blackLink:focus,
button:focus{
    cursor: hand;
    cursor: pointer;
    color: purple;
}

Save and open your review.html file in the browser. Your site should look similar to the one in the screenshot below;


Notice there is a green arrow which points to where the title inside the head tag of your html goes.

The code above contains comments (in both html and css).
Comments are used to describe your code to a reader of your code in simple terms so they can understand why you wrote the code you wrote.
Using comments whenever you see fit, is necessary to make others understand your code and to also ensure that you won't, later on, be confused by it.
Note, only use comments when writing code that might be confusing. For example, no need to write a comment to explain the <body> tag, all html developers get it!

In html, comments are written by starting with <!-- and ending with -->. 
Comments will not appear when the file is viewed in the website.

In css, comments are written by starting with /* and ending with */

  1. Read the comments I have written in the code, and go through each line at a time to understand  the code. Try making changes to the code and see what happens.
  2. This review marks the end of this html & css tutorial series. I have described only the concepts necessary to get you started. You should be able to now move on and study more advanced concepts such as positioning in css, audio and video tags in html and so on. 
  3. Use google, and sites such as Tutorials-point and W3Schools, as well as books to learn new concepts. Programming languages are being improved everyday, the aim is not for you to memorize all concepts but to have a solid foundation to be able to learn newer concepts as needed.
  4. The current HTML version used, is HTML5. Tags such as header, main and footer have been introduced in this version as well as many others.
  5. The current CSS version uses is CSS3, it also comes with it's improvements. 
  6. In the coming tutorials, I will explain more concepts and their applications, starting with the Bootstrap Library.
As always, I will upload a video that you can use to follow along. For now leave any questions or suggestions in the comment section below.
Happy coding.

  






Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 107

Hello and welcome back to this series of tutorials for beginners in web development. So far we have a simple html page and a css file linked to it. We begin this tutorial by creating new html and css files, in the same folder as where my_site.html is located. We shall call them index.html and index.css respectively. Done? Great! Link the two files together , by opening up index.html in your text editor (e.g. Sublime Text) and typing the following code below the closing title tag  </title>  and before the closing head tag </head> :               <link rel="stylesheet" type="text/css" href="index.css"> Inside the body of your html (i.e after <body> and before </body>),  type the following html code :              <p> This is a paragraph </p>              <p> This is a second paragraph </p>              <p> This is a third paragraph </p> Save your index.html file. Then open the
Post a Comment
Read more

HTML BASICS : TEST YOURSELF

Hello and welcome back. Test your knowledge of the concepts we have learnt so far, by creating a website that looks as seen in images the below, before continuing with the next part.   Click on each image to zoom in (or better yet, save them in your pc). You can get the image used by clicking here . As always, if you have any questions / comments, leave them in the comment section below.
Post a Comment
Read more

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border-left: 2px solid grey;     padding: 12px; } input{     display: block;     margin-bottom: 24px;     width: 200px;     padding: 8px; } textarea{     display: block;     margi
Post a Comment
Read more