HTML5 & CSS3 FOR THE REAL WORLD

I'm a beginner in front-end web development. Many of my classmates don't care about their website because they think it is the work of those who have a talent in aesthetic and are good at designing. However, they don't even intend to know how to write those codes like html, css and js. In my opinion, though we may be not as great as people who have an artistic talent or get professional training, it's necessary for us to understand and write front-end codes. So today I just borrowed a book from library, that is "HTML5 & CSS3 FOR THE REAL WORLD".

I read through the first, second and third chapters very fast for their difficulties in understanding for such a beginner as me. In other words, the fourth chapter is my first chapter. Let me keep track of my reading in the following way, and I think it is clear and efficient :-)


<label for="name">My name is: </label>
<input type="text" id="name" name="name" required aria-required="true">


<label for="name">My name is: </label>
<input type="text" id="name" name="name" placeholder="Scrooge Santa">

<label for="password">Set my password as:</label>

<p>(at least six characters, no space)</p>

<input type="password" id="password" name="password" required aria-required="true" pattern="\S{6,20}">

<label for="about">article title</label>

<input type="text" name="about" id="about" 

placeholder="First time reading" readonly>

<label for="favcolor">Favorite Color</label>

<input type="text" list="colors" id="favcolor" name="favcolor">

<datalist id="colors">

<option value="Blue">

<option value="Green">

<option value="Pink">

<option value="Purple">

</datalist>

<form id="search" method="get">

<input type="search" id="s" name="s">

<input type="submit" value="Search">

</form>

<label for="address">My email address is:</label>

<input type="email" id="address" name="address" required aria-required="true">

<label for="url">My website is:</label>

<input type="url" id="url" name="url">

<label for="rating">On a scale of 1 to 10, my knowledge is :</label>

<input type="range" min="1" max="10" id="rating" name="rating">

<label for="startdate">Start my subscription on:</label>

<input type="date" min="2000-01-01" max="2099-12-31" id="startdate" name="startdate" placeholder="2013-9-2">