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 mentioned that flex box allows items to move inside a container. In the last post, I use buttons as an example to show how do those buttons move in the flex box. Today, I learned navs can also move in a flex box. I would love to share my study note here. Firstly, I copy the Bootstrap 4 starter template on the editor, and also put the base nav code in the body. In order to show how navs move in the flex, I add a border outside the navs. The result shows a base nav bar inside a box. Move in Row Then, I want to add some space between each nav items, so I set "justify-content-around" value in the <ul>. The result: You can also move the items to the right (justify-content-end) or to the center (justify-content-center). Move Vertically If I want to show my nav bar vertically, I can just simple set "flex-column" value. The result:  Responsive Nav If I want the nav bar change from the horizontal to vertical as the page cha...

I have learned how to create a image gallery, and now it's time to create a nice landing page. Add Bootstrap CSS and Java Script Links Firstly, we need to install Bootstrap CSS link in the <head> element and add the Java Script & J Query links at the bottom of the <body> . Create Major Content in Grid System I love coffee so much, so I would like to create a landing page named "Coffee Time". I want all my text in a container, so it will help to style them as a whole later. Since I only have two headline words, I want them to display in the full-size grid, which is 12 columns. Under the text, I add a large size bootstrap button, so users can click on it. The page looks like this: all the content is on the top left of the page, and I don't like it.  Style The Content I want all the content to be in the center of the page. Therefore, I add <div id="content"> tag outside the headers & button.  Then, I...

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