Learn Bootcamp From Zero

At the end of CSS course section study, the instructor assigned us a fun blog exercise. We are going to create a simple blog and use relevant CSS element and Box model to style the blog like this: The Hints of this exercise: there is a gray border around the body, border size is 20px, border color: #bdc3c7 date color: #bdc3c7 H2 color: #2c3e50 Text Font: source sans pro Date Text: All Uppercase Letter-spacing on Date A Horizontal line between posts (add <hr> element on HTML) Now Let's start! Step One: Create a HTML page I create a simple blog page include two dates and two articles. I copied some paragraphs from my old digital analysis post .  The page only has text, and it doesn't look very attractive.  Step Two: Style Your Body I start to style the whole page body by adding a border . Since the instructor told us the border value, I just put the number in the CSS. The Outcome: We have the border around the body, but ...

Today I am going to apply CSS box into a Tic Tac Toe table. And this is the assignment from the course. Step One: Create A HTML Table The Tic Tac Toe is a table contains three rows and three columns. So the table page looks like: You can't see the table because two reasons: 1. I didn't put any table data in the <td> elements, so it is an empty table. 2. I didn't add border in the CSS. Step Two: Set Basic Text and Table Properties  I start to move the header from the page left to the center, so I set the "text-align" property to be center. Then I  set the table margin as auto and set each td width and height to be 100px. As the result, the table get bigger, but it is still invisible without adding borders. Step Three: Use Class Selector to Add Vertical Border When I was doing this assignment, I did very well on the first two steps, but I got stuck on this step. How to add the right border on each table data box?...

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...