diff --git a/readme.md b/readme.md index 60d8dc4..4dc39e4 100644 --- a/readme.md +++ b/readme.md @@ -54,6 +54,9 @@ - [HTML Table](#html-table) - [Day 10](#day-10) - [Lists](#lists) + - [Ordered List](#ordered-list) + - [Unordered List](#unordered-list) + - [Description List](#description-list) - [Day 11](#day-11) - [File Paths](#file-paths) - [Meta tags](#meta-tags) @@ -389,6 +392,7 @@ In this section, we will start writing the DOM tree of an HTML document or file. ### Declaration Before the root element, there is a declaration. This declaration tells the browser that the document is an HTML. Therefore, the browser render it to the way an HTML suppose to be rendered. + This is the code to declare an HTML. The declaration is not part of the DOM tree. ```html @@ -399,7 +403,7 @@ This is the code to declare an HTML. The declaration is not part of the DOM tree The _html_ element is the root of the DOM tree and is the parent of _head_ and _body_. -The DOM try has be wrapped by the html tag. +The DOM try has to be wrapped by the html tag. ```html @@ -1192,13 +1196,7 @@ To create a form, we use _form_ element and the _form_ element wrap other input ``` -You can see the output of the above code here. - -
- - - -
+You can try the output of the above code on visual studio code. The HTML form code below can handle different kind of data. It handles almost any kind of data including file. @@ -1313,121 +1311,7 @@ The HTML form code below can handle different kind of data. It handles almost an ``` -The output the above form look like this - -
-

Application Form

-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-

What are your skills

- - -
- - -
- - -
- - -
- - -
-
- - -
-
-

Gender

- - -
- - -
- - -
-
-

Select your country

- -
-
-

Select your country

- -
-
-
- -
-
- - -
-
- - -
-
- -
-
-
+Try the output the above code on visual studio. What is matters the most is understanding how the HTML form works, this is not an exhaustive list of all the input fields. Whenever you would like to solve some problem, try to search it on the internet using a key word. Searching is also one the most important skill in software development. @@ -1466,7 +1350,8 @@ Let us see the output of the above code Finland -However, HTML table has thead, tbody and tfooter. Let us add thead and tbody to the above code. In addition, we can use th in the table head instead to td to make the table heading bold. + +However, HTML table has _thead_, \*tbody and tfooter. Let us add thead and tbody to the above code. In addition, we can use th in the table head instead to td to make the table heading bold. ```html @@ -1487,7 +1372,7 @@ However, HTML table has thead, tbody and tfooter. Let us add thead and tbody to
``` -The out for the above code +Try the output of the above code using visual studio code. @@ -1588,87 +1473,83 @@ The author of this challenge creates different challenges every year. Let us put ``` - - - 30 Days Of HTML: Table - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ChallengeDaysTimeStars(K)URL
30 Days of Python30November 20194.6K - Link -
30 Days of JavaScript30January 20206.8K - Link -
30 Days of React30October 20205.6K - Link -
30 Days of HTML30February 201133 - Link -
- - +Try the output the above code on visual studio + # Day 10 ## Lists +Lists are important to list down items. In HTML, we have different list types such as ordered list, unordered list and description list. + +### Ordered List + +If you want to be a web developer, learn the following technologies according to order: + +```html +
    +
  1. HTML
    2. +
  2. CSS
    3. +
  3. JavaScript
    4. +
  4. React
    5. +
  5. Redux
    6. +
  6. Node
    7. +
  7. MongoDB
    8. +
  8. GatsBy
    9. +
+``` + +### Unordered List + +We use undordered list if we do not interested in the order or hierarch of the list. + +For instance, if we like to list down the Scandinavian Countries. + +```html + +``` + +### Description List + +A description list indent the list to the right. + +```html +
+
HTML
+
HTML(HyperText Markup Language) is the build block the web.
+
CSS
+
CSS(Cascading Style Sheet) that make HTML page look beautiful.
+
+
JavaScript
+
+ JavaScript is a programming language that can add interactivity to websites +
+
React
+
+ React is a modern JavaScript library that was initial released on May 29, + 2013. +
+
+``` + +Output of the above code + +
+
HTML
+
HTML(HyperText Markup Language) is the build block the web.
+
CSS
+
CSS(Cascading Style Sheet) that make HTML page look beautiful.
+
JavaScript
+
JavaScript is a programming language that can add interactivity to websites
+
React
+
React is a modern JavaScript library that was initial released on May 29, 2013.
+
+ # Day 11 ## File Paths