Learn Bootcamp From Zero

So far, we only have simple HTML tags and ejs tags in each ejs file. Every template page has no style at all. And the basic HTML header and footer are also missing. Today, I learned how to add styles and partials in ejs file. Link Style Step One: Touch a Separate CSS file I create a new directory "Style" under the "EJSDemo" directory, then I add a new CSS file "app.css" inside "Style" folder. Step Two: Add app.use(express.static()) in the app.js I add app.use(express.static("style")) in the "app.js". This will tell Express.js to serve the content of "Style" directory. Step Three: Write styles in CSS file I simple give body an orange background color and set text color to be grey. Step Four: Link to CSS file in the EJS file I just add <link> tag to link the "app.css" file on the top of the h1 tag in each ejs template. As the result, when I run the app and...

How to select element? In jQuery, we select an element with $() . $("Selector Name") Selecting with "$" is very similar to querySelector and querySelectorAll. In that we provide a CSS style selector. Then, jQuery will return all matching element. I updated the jQuery Demo HTML page a little by adding a <a> tag and id "test" in the list. If I want to select the h1, I just need to type $("h1")[0] in the console, and it will return us the h1. If I want to select the link, I just need to type $("a")[0] , and it will return the link. If I want to select the list with special id, I just need to type $("#test")[0] , and it will return that list. Moreover, selecting element with the dollar sign in jQuery will return a list even if there's only one item. And it is much shorter and easier to wirte syntax. How to manipulate style? The .css() method is jQuery's interface to st...

After I learned some basic HTML, CSS and JavaScript, they are finally meet together. The DOM is Document Object Model, which is the interface between your JavaScript and HTML + CSS. The concept is that the browser turns every HTML tag into a JavaScript object that we can manipulate. Everything is stored inside of the document object. We interact with DOM to do things like: game, scrolling effects, drop-down menus, form validation, interactivity, or animations. The main DOM process is Select an element and then manipulate. How do we implement that? The document comes with a lot of methods for selecting elements. There are five most common methods we need to know: 1. document.getElementById() 2. document.getElementsByClassName() 3. document.getElementsByTagName() 4. document.querySelector() 5. document.querySelectorAll() All of them are started by document dot. And these five methods have all been added into the document object. Now I am going to create a simple HT...

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