Learn Bootcamp From Zero

Many web pages use box model to organize the web content. For example, when I inspect MDN homepage, I see there are box shapes on the page. Some boxes are visible, but some boxes are invisible. No matter those boxes are visible or invisible, the main purpose to use box model is to let the web page have an appropriate layout, which allow users to catch the clear information and easy to read. What Is The Box Model? According to MDN, in a document, each element is represented as a rectangular box. In CSS, each of these rectangular boxes is described using the standard box model.  Each box has four edges: margin, border, padding and content edge. From MDN Content: The content of a CSS box is where the text and images appear. The "width" and "height"   properties set the width and height of content box.  Padding: Padding refers to the inner margin of a CSS, and it is transparent. The properties include padding-top, padding-right, padding-botto...

When we open any web page, almost all of them have unique backgrounds. Background can let people feel the personality of the brand. For some website, the web page also include a few borders, which make the page content more organized. Today, I am going to show you how to add border and background to your web page. Step One: Create a simple HTML web page No matter what, you always have to create a web page first. Since I love cooking, so I build a Love Cooking and Food blog page. The HTML part is: In the <body> part, I add a page header, a search bar, a short navigation which include four parts:"Home", "Homemade Recipes", "Food Photos" and "Diet Style". Each part should has hyperlinks to another page, but I don't have another page yet, so I just keep them here. Then, I write some simple text about this site and use <div> tag to block all the paragraphs for the CSS purpose. The outcome is just a all...