Learn Bootcamp From Zero

I can't believe that I have finished the whole Web Develop Bootcamp course . From Google Image In this blog, I shared 80 key study notes about web develop which includes frontend and backend. Every note introduces the basic concepts of certain topics, and show the screenshots of codes, and explain each process. I also shared some small project studies to implement all the related code together to make the learning more meaningful. The learning process, for me, was not easy. I have to say it was so struggle. Sometimes I couldn't get the concept about the logical which made me very confused. Sometimes the code did't work in the server even though I typed the exactly the same codes as the course did. Whenever the problem was happened, I couldn't sleep and couldn't eat.And this kind of issues had driven me crazy thousands of times. At some points, I did want to give it up. It was just so hard for me. And my goal was not to become a developer, what's...

From Google Image So far I have learned half way through the Web Develop Bootcamp course. I really want to share my deep feeling here: I have learned basic HTML, CSS,  Bootstrap, JavaScript and jQuery which belong to front end category. When I was learning HTML, CSS and Bootstrap parts, everything seemed good to go. I could understand how to write a simple web page, and create responsive nav-bar, and style my page into a good looking. All the small or big projects, I could finish 85% or 100% by myself depending on the project hard levels. So, I really felt some achievement at that time. However, as I started to learn JavaScript and jQuery, everything became no fun. The concepts of those functions were not hard to understand, but they were hard to implement in the real project. Even small exercises drove me crazy. I was struggle to write those function and logical stuff. Every time I saw a question, my mind was just blank. I didn't know how to start, which function s...

After I learned JavaScript loop and array, it's time to implement those codes into a simple project and see how it works. The course instructor leads us to create a small To Do List APP. Basically, when we open the web page, it will pop up a question:"What would you like to do?". Then we enter "new" and add a todo. If we want to check our todo list, we need to enter "list", so we can see our todos are stored in the console. The question will ask you again and again until you enter "quit" to end it. We create a HTML page and link to a separate JS file.  In the JS file, we start to write a  todos array . We leave the empty[] since we will enter data through the pop up question window.  Then, we create the pop up window by writing a prompt("What would you like to do?" So when we open the web page, it will pop up this question to ask you to enter your todos. Next, we use while loop to let the site keep ask...

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

In this post, I will continue to play with grid sizes based on the last post example. Change Grid Size From Large To Medium Firstly, I make a 12 grids, and each grid is for large size device and scales to 1 units (col-lg-1). The result shows 12 grids in the same size on the desktop size page. If the window changes from desktop size to tablet size, we will change the grid size from large to medium, too. Therefore, I add additional value "col-md-2" in the class attribute. As we see, when I change the web page to a tablet size, each grid will scale 2 units to fit in a medium size device. Change Grid Size From Medium To Small Then, I create a new grid system which includes four same unit grids to fit both large and medium size device. They are colored in orange. The result shows four orange grids. If we want those grids to fit in a small device, we need to add another class attribute value "col-sm-6". When I change the w...