This is
- ALL ABOUT HTML5
- ALL ABOUT CSS3, SASS
- ALL ABOUT BOOTSTRAP
- RESPONSIVE
- jQuery
- VSC
- GIT & GITHUB
Last active
January 22, 2019 06:48
-
-
Save KimTrijnh/6f94463395baacfa09dd1e8f4491a2a0 to your computer and use it in GitHub Desktop.
HTML5 & CSS & BOOTSTRAP
5. JQUERY
from FCC
- Script Tags
<script> //browser will run any JavaScript inside a script element, including jQuery.
$(document).ready(function() {
_code you put inside this function will run as soon as your browser has loaded your page._
})
</script>
2. select HTML element using $ (dolar sign operator)
3 ways of targeting an HTML element
$('button').addClass('animated bounce')
$('.wel').addClass('animated shake')
addClass >< removeClass( ' ' )
3. Change css properties
$('element').css('color', 'red')
4. Disable
$(_).prop('disabled', true)
5. change content inside a tag
$(_).html("changed")
$(_).text('treated as a text')
6. remove an element,
$().remove( )
move an element
$().appendTo('#other')
clone an element
$().clone( )
target parent of an element
$().parent( )
target children
$(_).children( )
Target a Specific Child of an Element
$('element:nth-children(n)').addClass('className')
odd, even
$('element:odd').
Use jQuery to Modify the Entire Page
$('body').addClass('animated hinge')
NPM
node package management, quản lý các dependencies, updates của chúng và install everything automatically instead of manually.
-install node first, npm automatically installed after install node.
- after npm is installed, a file called package.json also installed. It is kind of object type. package.json contains all info we need to know about package management of a project
- a folder called node_module allso is installed. Where all dependencies for the project are in there.
- node_module can be installed globally _ accessible by many projects. Or locally, only accessible to this local project. the latter is preferred.
In brief, in your project, you will find something like:
- index.html
- app.js
- package.json
- Node_module (folder)
1. Modify file package.json
- "author", "description", "keywords": [ "key1", "key2"], "license": "MIT", "version",
- "dependencies:
"express": "2.14.0"
Semantic Versioning works according to the official website:
Given a version number MAJOR.MINOR.PATCH, increment the:
MAJOR version when you make incompatible API changes,
MINOR version when you add functionality in a backwards-compatible manner, and
PATCH version when you make backwards-compatible bug fixes.
This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.
To allow a npm dependency to get updated to the latest PATCH-version,use the tilde ~ "moment": "~2.10.2"
some-package-name": "^1.3.8" allows updates to any 1.x.x version.
To remove a dependencies, or orther info, just remove it from package.json
2. Sử dụng CLI trong npm
uninstall dependencies
npm uninstall removes the module from node_modules, but not package.json
npm uninstall --save also removes it from dependencies in package.json
npm uninstall --save-dev also removes it from devDependencies in package.json
npm -g uninstall --save also removes it globally
install dependencies
list dependencies
https://www.npmjs.com/
https://viblo.asia/p/manage-packages-dependencies-with-npm-YWOZrDLR5Q0
2. CSS & SASS
II. CSS PREPROCESSOR: SASS http://www.sassshop.com/
"Syntactically Awesome StyleSheets"
simplify and maintain the style sheets for their projects.
allows you to create variables, nest CSS rules into others, and import other Sass files
There are two syntaxes available for Sass.
- SCSS (Sassy CSS)
- indented syntax (or sometimes just "Sass")
-
Install sass
-
Store Data with Sass Variables: $varibale-name: red;
-
Nest CSS with Sass
div {
h1{css}
p{ css}
}
@mixin text-effect($val) {
@if $val == danger {
color: red;
}
@else if $val == alert {
color: yellow;
}
@else if $val == success {
color: green;
}
@else {
color: black;
}
}
- to loop use @for
@for $i from 1 through 5 { //include 5
.text-#{$i} {font-size : 10px*$i}
}
@for $i from 1 to 5 { //exclude 5
.text-#{$i} {font-size : 10px*$i}
} - to map use @each
<style type='text/sass'>
$colors: (color1: blue, color2: black,color3: red);
@each $key, $color in $colors {
.#{$color}-bg {background-color: $color;}
}
div {
height: 200px;
width: 200px;
}
</style>
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3. BOOTSTRAP
SETUP & RUN
Ngoài ra còn cần thêm các link khác nếu có sử dụng những component using js, check:
https://getbootstrap.com/docs/4.2/getting-started/introduction/
** TEMPLATE HOÀN CHỈNH**
RESPONSIVE GRID 12-columns system
TO TARGET INLINE ELEMENT
FONTAWSOME
BUTTON
class='btn btn-default btn-block btn-primary btn-danger btn-info'
FORM
class='from-control'
well
div class='well'
create class for jQuery selector
Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.
BOOTSTRAP4 TUTORIAL FROM SCRIMBA
bootstrap4
responsive grid system
responsive navigation bar
modal
Modal_codepen