Learn Bootcamp From Zero

Posts

Intro to CSS: Three Basic CSS Selectors You Will Use All The Time

In the previous post, I show the general rule of CSS which is selector { property: value;}. Selector can be element tags such as <p>, <body>, <h1>, etc. For different style purpose, we may need to use different types of selectors in the CSS part. The course instructor introduces three basic CSS selectors which are used in most time. I would love to share my study note here. Element Selector: Element selector will select all instances of a given element. It's basically the type of attacks as you specify div or paragraph or body and then it will select all. For example: p{ color: blue;} will make all paragraph texts in blue color. ID Selector: ID selector selects an element with a given ID. And Only One Per Page! The first step is to add that hook which is called an ID as an element attribute in HTML. For example: <p id="special" > text </p> Then in the CSS part, we refer to the later by writing "#" a...

Intro to CSS: How To Add Border & Background To Your Web Page

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

Intro to CSS: Three CSS Color Types You Could Try

The simplest thing to make our web content attractive is to change text color. There are three CSS color types many programmers are using very commonly. Hexadecimal Hexadecimal is the # plus string of 6 hexadecimal numbers, which range from 0 to F. For example, color:#4B0082 is a purple color. The first two numbers correspond how much red is in the color. The next two numbers correspond how much green in the color, and the last two numbers correspond to how much blue in the color. For example, color #FF0000 means all red. However, it is impossible to know the exactly hexadecimal for each color. So the easiest way is to find the color on Color Picker to select the color you want. RGB RGB includes three channels: Red, Green and Blue. Each ranges from 0 to 255. For example, if you want your <h1> text to color all green, you can use color: rgb (0,255,0). RGBA Just like RGB, but with an alpha (transparency) channel ranges from 0.0 to 1.0. For e...

Intro To CSS: General Rule and Link To CSS File

I still can't believe I have already done all the HTML course sections. After I shared all my study notes and learning process in the blog, now I don't feel scared anymore. Instead, I feel so much earned. So, it is time to start to learn CSS which will transform our web page into a customized style. What is CSS? CSS stands for "cascading style sheets" . It is a language for specifying how documents are presented to users such as how they are styled and laid out. (Defination from MDN "How CSS Work") CSS is like a decoration for your store. Nobody wants to visit an boring web page with only text just like nobody likes to enter a store without any creative design. CSS can make our sites more unique and more attractive, so customers are willing to stay the site and to explore more information. General Rule of CSS: "Selector" is the HTML tags which we want to make special style such as <h1>, <p>, <li>, <body> e...

Project Study: Create A Common Register Form

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

Three Useful HTML Form Features: Radio Button, Drop-down Content & Data Validation

A simple register form like Facebook sign up form may only contains username, email and password. However, we may also see many complex forms out there such as survey form, visa application form, and school application form, etc. From Google Image Just like a random example form above, this survey form not only has simple text fields such as "Name" & "Email" , but it also has drop-down content and checkbox to collect the information. With Drop-down and Checkbox, people feel easy to make a choice because they don't have to think their own answers. It also help company to collect the most relevant data and analyze results. How to add those useful features on your HTML form? Radio Button/Checkbox Radio Button and Checkbox are widgets whose state you can change by clicking on them. Both of them are created using the <input> element with its "type" attribute set to the value "checkbox" or "radio" . ...

Three Most Common HTML Form Elements You Should Know

When I visited the Facebook page at the first time, it required me to sign up. Therefore, I completed the sign up form to create my new account. The form is very simple to fill in because it only asks for very common information such as full name, phone number, new password, birthday, and gender. It only took me one or two minutes to finish the form. Not only Social media sites require us to sign up first before we post anything, but many business or eCommerce sites also ask us to create new account before we take any action. For example, when I go to the Origins skin care site, it will pop up a email sign up form window. To encourage new customers to sign up, it gives a 15% off for the first order. It is definitely an attractive call-to-action message. Anyway, if your website requires users to sign up, you need to know how to create a HTML form. Yesterday, I just learned how to build a simple HTML form from Udemy course. And it is not that hard. All you need to kno...