Learn Bootcamp From Zero

So far I have learned some basic JavaScript language such as conditional keywords, logical operators, and built-in methods. Today, we will build a simple guessing number game by applying those JS basic language. Basically, the game is ask user to guess a number, if the number is match to the secret number, they win the game. If not, they will have to try again. Step One: Create a simple HTML page and Link to the JS file I start to build a simple HTML page and give a title "Guessing Game" for it. Then, I create a separate JS file named "game.js", and link to the HTML page. Step Two: Create Secret Number and Prompt Question In the JS file, I start to create a secretNumber which is 6. Six is a lucky number in China which means everything goes well as you wish. Then I ask a prompt question:"Guess A Number", so user will enter a number. Step Three: If users enter the right number, they will receive a message It is conditional, so I u...

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

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

I had shared my HTML Form study notes, and it is time to use those key elements to do a small form project. The Udemy course assignment is creating a register form like below: There are a few requirements: First name, Last name, Email are required fields Password requires 5 to 10 characters Three drop-down contents: Month, Day and Year Three radio buttons: Male, Female and Other One checkbox Let's Start! Step One: Use <label> and <input> to create First Name and Last Name fields Before I create form, I start to enter page title "Register Form", and put header as "Register" under <body> tag. So when I open the page on browser, I can see the page is about "Register Form". Then, I begin to create the form by enter <form> tag. The web application will know there will be a form under the page header. If you want to submit this form to another page, you need to add "action" and "method"...

I learned some basic html table elements such as <table></table>,<tr></tr>, <tb></tb>. Therefore, I can use these elements to create a simple table . Today, I continue to learn more html table elements to add more features to a table. <Caption> Since we are not likely to read every detail on each website; in the other word, we like to scan content to save time. If a web page has a table, it is better to have a title for the table. So, we can get a quick idea about this table. Therefore, we need to add <caption></caption> element under the <table></table> directly. screenshot from MDN Advanced Table Element <thead>, <tbody> & <tfoot> These three elements will help to mark up a header, body and footer section for a table. They are very useful for styling and layout. <thead>   </thead> stands for table header, which will be the first row containing the column heading...