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

When someone mentions to create a table, the first thing come to my minds is  to use Excel. I love using Excel to make tables because it is very simple to use and has many great functions. But, if I want to create a table on our web page, Excel won't work on that way anymore. Someone may think to create a table on Excel, to save it as image and then to upload on the web page.  Excuse me? Is it the right solution? What if you want to change the data? Upload a new table image again? Of course NO! The best way is to use HTML create a table, so you can always update the data! To create a simple HTML table, it only requires FOUR STEPS : First Step: Brainstorm your table design and content Before you create a table, you need to brainstorm some ideas about your table such as: What is this table about? What is the purpose of creating this table? What kinds of data do you need to collect? How many rows and columns? Do you need any images or hyperlinks? Do...

Now we have learned the basic HTML elements and attributes. The first assignment from the course is to write a simple web page, which requires to include: Header, text, list, image, and hyperlink. Before we write any code, we need to know how to combine all the elements into an entire HTML page.  According to MDN Web Doc, it states that a HTML page must includes the following elements: <!DOCTYPE html> :  It is the shortest string of characters that counts as a valid doctype. <html></html> : This element wraps all the content on the entire page, and is sometimes known as the root element. <head></head> : This element acts as a container for all the stuff you want to include on the HTML page that  isn't  the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results. <meta charset="utf-8"> : This element sets the character set you...