HTML/CSS Beginner Intro

I am new to both HTML and CSS. The beginner tutorials on HTML Dog helped me a lot to understand the basics of HTML and CSS, especially in such a short time. In this post, I will describe my experience learning HTML and CSS in under three hours.

First, HTML. I did not really find any difficulties in learning HTML, because most of the lessons were already covered in class, except for creating tables and forms. As for the table, I quickly recognize the table format in HTML which is quite similar to the format in LaTeX, a typesetting system I regularly use. As for the form, it was really intuitive, especially since I had some background in CS. It was interesting still to think that we can create interactive pages using this tool in HTML (of course along with CSS and JavaScript as discussed in class.) This was probably my most favorite part in this tutorial. Below I include a sample code I wrote:

<h3>This is a form for you:</h3>
<form action="not_exist_yet.php" method="get">
 <p>Name:</p>
 <p><input name="name" value="Name"></p> 
 <p>How are you?</p>
 <p><input type="radio" name="how" value="excellent">Excellent</p>
 <p><input type="radio" name="how">Good</p>
 <p><input type="radio" name="how">Not bad</p>
 <p><input type="radio" name="how">Bad :( </p>
 <p><input type="submit"></p> 
</form>

This code results in:

Of course, the submit button has not functioned as it is supposed to yet, since the action attribute not_exist_yet.php indeed does not exist yet.

Next, I completed the beginner tutorial for CSS. Similar to HTML, I found the tutorials for CSS pretty straightforward. One thing that I found interesting was the choices of color. I used Brackets instead of Text Wrangler, and once I typed in color as the property, a variety of color options showed up as suggestion. I found this really helpful instead of trying to use hexnumber and see the changes on the website. Here I include a sample code from my CSS tutorial:

body{
 font-size: 14 px;
 color: orangered;
} 

h3{
 color: magenta;
 background-color: #ccc;
 text-align:center;
 margin: 20px;
 padding: 30px;
 border-style: dashed;
 border-width: 3px;
 border-left-width: 10px;
 border-right-width: 10px;
 border-color: red;
}

form{
 text-indent:40%;
}

Here is the result of the formatting on the page I created above:

Although the page doesn’t look quite as good as it could be and the submit button still doesn’t work since  not_exist_yet.php  still doesn’t exist, I am satisfied with the progress I made so far on both HTML and CSS.

Author: Alief