Learn Bootcamp From Zero

Today, I learned how to add picture card on the page. The Udemy course shows a simple pattern project to demonstrate it. Then, I follow the instructor's steps and create my own pattern page. Step One: Create Simple Nav Bar On the top of page, we need to create a nav. Inside the <nav> tag, I set the background color (bg-dark) and navbar color (navbar-dark). You can always change your background color to light or any other choices. The instructor showed us how to install an icon from Font Awesome . Basically, you find your ideal icon from their icon page and copy the tag and paste in your HTML. Moreover, we also need to add a support link from Font Awesome Start Page inside header tag, so the icon tag will work. The result: dark nav bar with a small icon in front of the brand name. Step Two: Create A Jumbotron We create a Jumbotron, and inside it we adding the header text, paragraph text and two small buttons. All the button class value are selected fr...

I have shared how to apply Bootstrap code to create Nav-bar, Jumbotron, and Grid System in previous posts, so today I am going to use all my bootstrap learning to create a Image Gallery. This is also a Udemy course project, so some image links are provided by instructor. I would like to share the project process here. Add Bootstrap CSS & Java Script Links I start to create a HTML page and link to the Bootstrap CSS code. At the bottom of <body>, I also add the Java Script and J Query links, so it will make sure the page is following the certain rule. Create A Jumbotron I apply the Jumbotron code in the HTML, and add h1 header as "The Image Gallery" and a short paragraph to describe what this site is about. By the way, just make sure the Jumbotron code is inside the "container", so everything will be moved to the center of the page. Add A Nav-Bar I just copy my old nav-bar code from previous Nav-bar exercise, but I make two...

If you want to make your message outstanding on the web page, Jumbotron can be a good style choice. Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site. (From Bootstrap Components-Jumbotron) I would like to try this component on my page, so I create the HTML page and apply the Jumbotron code in the body part. I change the text "Hello, World!" to "This is Jumbotron" and also put its definition in the <p> element. If we want the whole part to be center of the page, the instructor told us a quick way to do that is adding a "container"  outside the jumbotron code. The instructor also recommended some common forms on Bootstrap. I prefer the inline form because it is very short and simple. I apply the inline form code under the Jumbotron code. The class value "form-group" will group that input, so it can leave some space between each input. As...