Learn Bootcamp From Zero

I have seen many image blogs these years. People love to post their photos online to express life and feeling.  Image is powerful because it could bring a visual story to audience. People can see what you see, and may be feel the same way as you feel, too. If we want to build our own photo gallery, what should we do? Luckily, the boot-camp instructor just showed me how to use HTML and CSS to create a simple photo gallery.  I would love to share my study note here. (p.s. all the image links are provided by Udemy course instructor) Step One: Add Image Links on HTMLPage The instructor provides all the image links. All we need to do is add those links inside the <img> tag. Without CSS, the page will looks like this: they are not organized, and sizes are different, too. Step Two: Set Image Property Values We set the width of each photo the same value which is 30%, so there will be three images per line. The percentage value can help...

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

When I read blogs or any web content, I always pay attention to the text style. Are those text styled easily to read? What feeling do those styled texts bring to me, feel clear or feel a mess? I have seen many brands use "special" font text in order to make a stronger personality. Those content do attract my eye attention, but I don't have the patience to read through it. I prefer to read the content which is styled professionally. So how to use CSS to style our text & font? Now I am going to list Six Common CSS properties which are used for text and font style. I create a simple HTML page includes two paragraphs, which are copied from my first blog post. The HTML Part: The page looks like: 1. Font-family I want to make all my text content with font Arial, so I set the<p> and <h2> font-family property value as "Arial". The result: Arial is my favorite font. If you prefer to use other professional fonts, you can s...

Today, I am going to share five advanced CSS selectors from Udemy course. Then, I will create a simple project to explain how we apply each selectors. Those five advanced selectors are: Star Selector:  Whatever we do, it will apply to every single element. Descendant Selector:  The way that descendant selector works is that it takes two or more tag names or two or more selectors and you chain them together. Adjacent Selector:  With adjacent selector, it will let us select elements that comes after another element. Attribute Selector:  The attribute selector is a way to select elements based of any attribute. Nth of Type:  The way of nth of type works is it takes a number like three or five and then it selects every end of a specific element. So if I want to select every fifth paragraph, I could use nth of type. I know it is not clear to understand without apply them in a project and see how they work. Now I am going to create a simp...

In the last post, I shared my study note about three basic CSS selectors. Even though I wrote an example under each selector, it still may not enough to explain how those selectors make the effect. Therefore, I am going to explain more detail about how to use those CSS selectors in a simple project. In this project, I will create a short To Do List and then apply element selector, ID selector and class selector to style the list. Step One: Create HTML page As I mentioned before, the first step is always to create HTML page. Without a page, we can't do any CSS work. It is just like we should have a cake ready before to put cream and fruit on it. Here is the To Do List HTML part: It turns out a simple black and white web page. Step Two: Use Element/ID/Class selectors in the CSS file. Element Selector:  Firstly, I want to make the web page background to be grey. Since the whole body of the page will be grey, I will use Element selector: body { background: g...