I built this site as a way of putting into practice the concepts of HTML and CSS, and throughout it I set up and organized the site into sections each containing a specific content.
This section would be like a traditional detailed introduction to websites. Here and in the following sections I created a whole background separation that differentiates one section from another using HTML in structuring and CSS in styling.
In the following sections, I tried to use a little of each resource as training, like a gallery, where I linked several images and styled their layout.
In another I used the concepts of CSS Grid Layout and to finish I built an example of a contact form with name, email and stylized message fields.
A brief description:
CSS Grid layout is a W3C specification designed to provide a two-dimensional method for creating CSS layouts that provides the ability to "layout" page items using rows and columns. CSS grid can be used to get a multitude of different layouts.
The differential of this method of creating layouts lies in the possibility of dividing a page into large regions and of defining the relationship in terms of measurements, positioning and layers between the different components of the HTML markup.
Like tables, grid layout allows the author to align page components using rows and columns. However, unlike tables, grid layout is not based on content structuring, allowing a huge variety of layouts, which is not possible to obtain using tables. For example: child elements of a grid container can be positioned at will by overlapping or changing layers, in the same way as using the functionalities of our well-known CSS positioning.
exemplification
This would be another grid session, which I added to add more content to the site:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis cum delectus molestias. Atque doloribus nobis laudantium esse ut, non commodi maxime distinctio veritatis unde, reprehenderit minus ad dolores provident maiores.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis cum delectus molestias. Atque doloribus nobis laudantium esse ut, non commodi maxime distinctio veritatis unde, reprehenderit minus ad dolores provident maiores.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis cum delectus molestias. Atque doloribus nobis laudantium esse ut, non commodi maxime distinctio veritatis unde, reprehenderit minus ad dolores provident maiores.
HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.
We can create a table to display data in tabular form, using "table" element, with the help of "tr" , "td", and
"th" elements.
In Each table, table row is defined by "tr" tag, table header is defined by "th", and table data is defined by
"td" tags.
An HTML table may also include "caption", "colgroup", "thead", "tfoot", and "tbody" elements.
| Title 1 | Title 2 | Title 3 | Title 4 | Title 5 |
|---|---|---|---|---|
| Content 1 | Content 2 | Content 3 | Content 3 | Content 3 |
| Content 1 | Content 2 | Content 3 | Content 3 | Content 3 |
| Content 1 | Content 2 | Content 3 | Content 3 | Content 3 |
| Testando |
I created this section as an example of a contact form that we usually see on websites out there.
