When working with the <div> tag, the important thing is to segment each container so that its content has flexibility when applying its respective properties.
For this exercise, the main axis is the <div> tag, in it each of the elements that make up the header, body and footer of our Instagram publication were divided, after building the structure we elaborate its content with the tags <h1…h4> for titles, <p> for paragraphs, and <img> for images. Then in the css properties we apply the corresponding selectors for each of the elements and finally, after having the entire structure, an elaboration of the aesthetic part was arranged so that its design was similar to that of an Instagram post.
Concepts applied in architecture:
- Basic structure for every HTML5 website.
- The link tag to import CSS rules.
- Implementation of display property and CSS selectors.
Recommended websites for theme icons, images and tools:
The most basic boilerplate for any 4Geeks Academy student using the gitpod.io coding editor.
Create an index.html file with the basic HTML structure and see it live by running a web-server using the following command:
$ pip3 install flask && python3 server.py- You can create as many HTML files as you want
- You can also create CSS files and import them into your website using a
<link>tag placed between the<head></head>tags, like this:
<head>
...
<link rel="stylesheet" type="text/css" href="styles.css">
...
</head>