├── README.md ├── backend ├── javascript │ └── es5_es6 │ │ ├── array-function.1.js │ │ ├── arrow-function.1.js │ │ ├── arrow-function.2.js │ │ ├── bind.1.js │ │ ├── class.1.js │ │ ├── date.1.js │ │ ├── default-param.1.js │ │ ├── default-param.2.js │ │ ├── default-param.3.js │ │ ├── default-param.4.js │ │ ├── default-param.5.js │ │ ├── default-param.6.js │ │ ├── default-param.7.js │ │ ├── destructure.1.js │ │ ├── destructure.2.js │ │ ├── destructure.3.js │ │ ├── lab │ │ └── main.js │ │ ├── let-const-var.1.js │ │ ├── modules │ │ ├── math.1.js │ │ ├── math.2.js │ │ └── module.js │ │ ├── object.1.js │ │ ├── object.2.js │ │ ├── rest.1.js │ │ ├── spread.1.js │ │ ├── spread.2.js │ │ ├── spread.3.js │ │ ├── spread.4.js │ │ ├── string.1.js │ │ └── string.2.js ├── mongodb │ ├── commands │ │ ├── lab │ │ │ ├── products.txt │ │ │ └── users.txt │ │ ├── mongo-aggregate.txt │ │ ├── mongo-analyzing.txt │ │ ├── mongo-basic.txt │ │ ├── mongo-delete.txt │ │ ├── mongo-dump.txt │ │ ├── mongo-find-array-embeded.txt │ │ ├── mongo-find-array.txt │ │ ├── mongo-find-embeded.txt │ │ ├── mongo-find-null-missing.txt │ │ ├── mongo-find-projection.txt │ │ ├── mongo-find.txt │ │ ├── mongo-insert.txt │ │ ├── mongo-install.txt │ │ ├── mongo-relational.txt │ │ ├── mongo-tuning.txt │ │ └── mongo-update.txt │ ├── mongodb_ │ │ ├── .gitignore │ │ ├── find.1.js │ │ ├── find.2.js │ │ └── package.json │ └── mongoose_ │ │ ├── .gitignore │ │ ├── UserModel.js │ │ ├── delete.1.js │ │ ├── delete.2.js │ │ ├── find.1.js │ │ ├── find.2.js │ │ ├── find.3.js │ │ ├── find.4.js │ │ ├── find.5.js │ │ ├── insert.1.js │ │ ├── insert.2.js │ │ ├── insert.3.js │ │ ├── lab.1.js │ │ ├── lab.2.js │ │ ├── lab.3.js │ │ ├── lab.4.js │ │ ├── package.json │ │ ├── update.1.js │ │ └── update.2.js └── nodejs │ ├── basic │ ├── .gitignore │ ├── console.js │ ├── filesystem │ │ ├── blocking-code.js │ │ ├── demo.html │ │ ├── demo.js │ │ ├── fs.1.js │ │ ├── fs.2.js │ │ ├── fs.3.js │ │ ├── fs.4.js │ │ ├── fs.5.js │ │ ├── input.txt │ │ └── non-blocking-code.js │ ├── global-objects.js │ ├── http │ │ ├── about.html │ │ ├── home.html │ │ ├── http.1.js │ │ ├── http.2.js │ │ ├── http.3.js │ │ └── http.4.js │ └── lab │ │ ├── 404.html │ │ ├── about.html │ │ ├── demo.html │ │ ├── favicon.ico │ │ ├── home.html │ │ ├── lab1.js │ │ └── lab2.js │ ├── express-generator │ └── server │ │ ├── .gitignore │ │ ├── app.js │ │ ├── bin │ │ └── www │ │ ├── config │ │ ├── dev.js │ │ ├── keys.js │ │ └── prod.js │ │ ├── db │ │ └── users.json │ │ ├── models │ │ ├── productModel.js │ │ └── userModel.js │ │ ├── package.json │ │ ├── public │ │ └── stylesheets │ │ │ └── style.css │ │ ├── routes │ │ ├── api │ │ │ └── userRoutes.js │ │ ├── indexRoutes.js │ │ ├── productRoutes.js │ │ └── userRoutes.js │ │ └── views │ │ ├── error.pug │ │ ├── index.pug │ │ ├── layout.pug │ │ ├── products.pug │ │ └── users.pug │ ├── express │ ├── lab │ │ ├── .gitignore │ │ ├── app.js │ │ ├── package-lock.json │ │ └── package.json │ └── server │ │ ├── .gitignore │ │ ├── error-handling │ │ └── error.1.js │ │ ├── middleware │ │ ├── middleware.1.js │ │ ├── middleware.2.js │ │ ├── middleware.3.js │ │ ├── middleware.app.1.js │ │ ├── middleware.router.1.js │ │ ├── my-middleware.js │ │ └── views │ │ │ ├── regular.pug │ │ │ └── special.pug │ │ ├── package.json │ │ ├── routes │ │ ├── route.1.js │ │ ├── route.2.js │ │ ├── route.3.js │ │ ├── route.4.js │ │ ├── route.5.js │ │ ├── route.6.js │ │ ├── route.7.js │ │ ├── route.8.js │ │ └── users.js │ │ ├── static │ │ ├── public │ │ │ └── images │ │ │ │ └── icons │ │ │ │ └── sun.png │ │ ├── static.1.js │ │ └── static.2.js │ │ └── template-engines │ │ ├── template-engines.1.js │ │ └── views │ │ └── index.pug │ └── npm │ ├── .gitignore │ ├── main.js │ ├── package-lock.json │ └── package.json └── frontend ├── css ├── cascade.2.html ├── cascade.css ├── cascade.html ├── css-comment.html ├── css-including.1.html ├── css-including.2.html ├── css-including.3.html ├── css-rule.html ├── images │ ├── backgrounds │ │ └── bg.jpg │ └── icons │ │ └── sun.png ├── inheritance.css ├── inheritance.html ├── labs │ ├── _lab.1.html │ ├── _lab.2.html │ ├── _lab.3.html │ ├── _lab.4.html │ ├── _lab.5.html │ ├── images │ │ ├── pattern-small.jpg │ │ ├── pictures │ │ │ ├── 1.jpg │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ ├── 4.jpg │ │ │ ├── 5.jpg │ │ │ ├── 6.jpg │ │ │ ├── 7.jpg │ │ │ ├── 8.jpg │ │ │ └── 9.jpg │ │ └── resume-bg.jpg │ ├── lab.1.html │ ├── lab.2.html │ ├── lab.3.html │ ├── lab.4.html │ └── lab.5.html ├── properties │ ├── background-color.html │ ├── background-image.html │ ├── background-position.html │ ├── background-repeat.html │ ├── background-shorthand.html │ ├── box-model-overflow.html │ ├── box-model.1.html │ ├── box-model.2.html │ ├── box-model.3.html │ ├── box-model.4.html │ ├── box-model.5.html │ ├── cat.png │ ├── float-alignment.1.html │ ├── float-alignment.2.html │ ├── font-shorthand.html │ ├── fonts-size.html │ ├── fonts.html │ ├── pattern-small.jpg │ ├── pattern.jpg │ ├── positioning.1.html │ ├── positioning.2.html │ ├── positioning.3.html │ ├── positioning.4.html │ ├── tables.1.html │ ├── tables.2.html │ ├── tables.3.html │ ├── tables.4.html │ ├── tables.5.html │ ├── tables.6.html │ ├── tables.7.html │ ├── text-decoration.html │ ├── text-spacing.html │ └── text-transform.html ├── selectors │ ├── selectors-attribute.html │ ├── selectors-class.html │ ├── selectors-descendant.html │ ├── selectors-direct-child.html │ ├── selectors-grouping.html │ ├── selectors-id.html │ ├── selectors-next-sibling.html │ ├── selectors-pseudo-classes.html │ └── selectors-universal.html └── stylesheet.css ├── googlemap ├── basic │ ├── map-language.html │ └── simple.html ├── controls │ ├── control-options.html │ ├── control-positioning.html │ ├── control-simple.html │ └── disabling-control.html ├── drawing │ ├── infowindow │ │ └── infowindow-simple.html │ └── markers │ │ ├── images │ │ └── beachflag.png │ │ ├── maker-info-window.html │ │ ├── marker-animations-iteration.html │ │ ├── marker-animations.html │ │ ├── marker-icon-simple.html │ │ ├── marker-remove.html │ │ └── marker-simple.html ├── labs │ ├── _lab.1.html │ ├── _lab.2.html │ ├── images │ │ └── beachflag.png │ ├── lab.1.html │ └── lab.2.html ├── signed │ └── signed-in-maps.html ├── styles │ ├── styles-maps.html │ └── theme-styles-maps.html └── xml │ ├── maker-xml.html │ └── marker.xml ├── html ├── audio.html ├── audio.mp3 ├── comment.html ├── div.html ├── form.1.html ├── form.2.html ├── formatting.1.html ├── formatting.2.html ├── heading.html ├── iframe.html ├── images.html ├── images │ ├── fearless.jpg │ ├── speak-now.jpg │ └── taylor-swift.jpg ├── labs │ ├── _lab.1.html │ ├── _lab.2.html │ ├── images │ │ └── resume-bg.jpg │ ├── lab.1.html │ ├── lab.2.html │ └── lab3.html ├── link.html ├── list.html ├── meta.html ├── multipages │ ├── about.html │ ├── contact.html │ ├── home.html │ └── product.html ├── paragraphs.html ├── span.html ├── table-css.html ├── table.html └── video.html ├── javascript ├── browser │ ├── bom │ │ ├── frames.1.html │ │ ├── history.1.html │ │ ├── location.1.html │ │ ├── navigator.1.html │ │ └── screen.1.html │ └── dom │ │ ├── attr-prop.1.html │ │ ├── attr-prop.2.html │ │ ├── attr-prop.3.html │ │ ├── attr-prop.4.html │ │ ├── attr-prop.5.html │ │ ├── content.1.html │ │ ├── content.2.html │ │ ├── content.3.html │ │ ├── content.4.html │ │ ├── dom.1.html │ │ ├── dom.2.html │ │ ├── dom.3.html │ │ ├── dom.4.html │ │ ├── dom.5.html │ │ ├── dom.6.html │ │ ├── dom.7.html │ │ ├── dom.8.html │ │ ├── dom.modify.1.html │ │ ├── dom.modify.2.html │ │ ├── dom.modify.3.html │ │ ├── dom.modify.4.html │ │ ├── dom.modify.5.html │ │ ├── dom.modify.6.html │ │ ├── dom.modify.7.html │ │ ├── dom.modify.8.html │ │ ├── events.1.html │ │ ├── events.10.html │ │ ├── events.11.html │ │ ├── events.12.html │ │ ├── events.13.html │ │ ├── events.2.html │ │ ├── events.3.html │ │ ├── events.4.html │ │ ├── events.5.html │ │ ├── events.6.html │ │ ├── events.7.html │ │ ├── events.8.html │ │ ├── events.9.html │ │ ├── form.1.html │ │ ├── form.2.html │ │ ├── form.3.html │ │ ├── form.4.html │ │ ├── form.5.html │ │ ├── form.6.html │ │ ├── style-class.1.html │ │ ├── style-class.2.html │ │ ├── style-class.3.html │ │ ├── style-class.4.html │ │ ├── style-class.5.html │ │ ├── style-class.6.html │ │ └── style-class.7.html └── fundamentals │ ├── alert.html │ ├── arrays.1.html │ ├── arrays.2.html │ ├── arrays.3.html │ ├── arrays.4.html │ ├── comparisons.1.html │ ├── condition-operators.1.html │ ├── condition-operators.2.html │ ├── console.html │ ├── constant.html │ ├── datatype.html │ ├── external.1.html │ ├── external.2.html │ ├── external.3.html │ ├── functions.1.html │ ├── functions.2.html │ ├── functions.3.html │ ├── functions.4.html │ ├── helloworld.html │ ├── js │ └── script.js │ ├── logical-operators.1.html │ ├── logical-operators.2.html │ ├── logical-operators.3.html │ ├── loops.1.html │ ├── loops.2.html │ ├── loops.3.html │ ├── main.js │ ├── objects.1.html │ ├── objects.2.html │ ├── objects.3.html │ ├── objects.4.html │ ├── operators.1.html │ ├── operators.2.html │ ├── operators.3.html │ ├── operators.4.html │ ├── operators.5.html │ ├── sample │ └── main.html │ ├── string.1.js │ ├── switch.1.html │ ├── switch.2.html │ ├── switch.3.html │ └── variables.html ├── jquery ├── ajax │ ├── ajax.1.html │ ├── ajax.2.html │ ├── ajax.3.html │ ├── ajax.4.html │ ├── employee.json │ ├── employee.xml │ ├── result.1.json │ ├── result.2.json │ └── result.html ├── animation.1.html ├── animation.2.html ├── animation.3.html ├── animation.4.html ├── animation.5.html ├── animation.6.html ├── animation.7.html ├── attributes.1.html ├── attributes.10.html ├── attributes.2.html ├── attributes.3.html ├── attributes.4.html ├── attributes.5.html ├── attributes.6.html ├── attributes.7.html ├── attributes.8.html ├── attributes.9.html ├── css.1.html ├── css.2.html ├── css.3.html ├── dom.1.html ├── dom.2.html ├── dom.3.html ├── dom.4.html ├── effects.1.html ├── effects.2.html ├── effects.3.html ├── event.1.html ├── event.2.html ├── images │ ├── dog1.jpg │ └── dog2.jpg ├── jquery-3.2.1.min.js ├── jquery.cdn.html ├── jquery.install.html ├── jquery.javascript.1.html ├── jquery.javascript.2.html ├── sample │ └── main.html ├── selectors.1.html ├── selectors.2.html ├── selectors.3.html ├── selectors.4.html ├── selectors.5.html ├── traversing.1.html ├── traversing.2.html └── traversing.3.html ├── responsive ├── bootstrap-4.0.0-beta.2 │ ├── .babelrc.js │ ├── .editorconfig │ ├── .eslintignore │ ├── .gitattributes │ ├── .github │ │ ├── CONTRIBUTING.md │ │ └── ISSUE_TEMPLATE.md │ ├── .gitignore │ ├── .hound.yml │ ├── .houndignore │ ├── .travis.yml │ ├── CNAME │ ├── Gemfile │ ├── Gemfile.lock │ ├── LICENSE │ ├── README.md │ ├── _config.yml │ ├── _data │ │ ├── breakpoints.yml │ │ ├── browser-bugs.yml │ │ ├── browser-features.yml │ │ ├── colors.yml │ │ ├── core-team.yml │ │ ├── grays.yml │ │ ├── nav.yml │ │ ├── showcase.yml │ │ ├── theme-colors.yml │ │ └── translations.yml │ ├── _includes │ │ ├── ads.html │ │ ├── callout-danger-async-methods.md │ │ ├── callout-warning-color-assistive-technologies.md │ │ ├── docs-navbar.html │ │ ├── docs-sidebar.html │ │ ├── favicons.html │ │ ├── footer.html │ │ ├── header.html │ │ ├── icons │ │ │ ├── bootstrap.svg │ │ │ ├── download.svg │ │ │ ├── github.svg │ │ │ ├── import.svg │ │ │ ├── lightning.svg │ │ │ ├── menu.svg │ │ │ ├── slack.svg │ │ │ └── twitter.svg │ │ ├── scripts.html │ │ └── social.html │ ├── _layouts │ │ ├── default.html │ │ ├── docs.html │ │ ├── home.html │ │ ├── redirect.html │ │ └── simple.html │ ├── _plugins │ │ ├── bugify.rb │ │ ├── callout.rb │ │ ├── example.rb │ │ └── markdown-block.rb │ ├── assets │ │ ├── brand │ │ │ ├── bootstrap-outline.svg │ │ │ ├── bootstrap-punchout.svg │ │ │ ├── bootstrap-social-logo.png │ │ │ ├── bootstrap-social.png │ │ │ └── bootstrap-solid.svg │ │ ├── css │ │ │ ├── docs.min.css │ │ │ └── docs.min.css.map │ │ ├── img │ │ │ ├── bootstrap-stack.png │ │ │ ├── bootstrap-themes.png │ │ │ └── favicons │ │ │ │ ├── android-chrome-192x192.png │ │ │ │ ├── android-chrome-512x512.png │ │ │ │ ├── apple-touch-icon.png │ │ │ │ ├── browserconfig.xml │ │ │ │ ├── favicon-16x16.png │ │ │ │ ├── favicon-32x32.png │ │ │ │ ├── manifest.json │ │ │ │ ├── mstile-144x144.png │ │ │ │ ├── mstile-150x150.png │ │ │ │ ├── mstile-310x150.png │ │ │ │ ├── mstile-310x310.png │ │ │ │ ├── mstile-70x70.png │ │ │ │ └── safari-pinned-tab.svg │ │ ├── js │ │ │ ├── docs.min.js │ │ │ ├── ie-emulation-modes-warning.js │ │ │ ├── ie10-viewport-bug-workaround.js │ │ │ ├── src │ │ │ │ ├── application.js │ │ │ │ └── pwa.js │ │ │ └── vendor │ │ │ │ ├── anchor.min.js │ │ │ │ ├── clipboard.min.js │ │ │ │ ├── holder.min.js │ │ │ │ ├── jquery-slim.min.js │ │ │ │ └── popper.min.js │ │ └── scss │ │ │ ├── _ads.scss │ │ │ ├── _algolia.scss │ │ │ ├── _anchor.scss │ │ │ ├── _brand.scss │ │ │ ├── _browser-bugs.scss │ │ │ ├── _buttons.scss │ │ │ ├── _callouts.scss │ │ │ ├── _clipboard-js.scss │ │ │ ├── _colors.scss │ │ │ ├── _component-examples.scss │ │ │ ├── _content.scss │ │ │ ├── _examples.scss │ │ │ ├── _featured-sites.scss │ │ │ ├── _footer.scss │ │ │ ├── _masthead.scss │ │ │ ├── _nav.scss │ │ │ ├── _page-header.scss │ │ │ ├── _responsive-tests.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _skiplink.scss │ │ │ ├── _syntax.scss │ │ │ ├── _team.scss │ │ │ ├── _variables.scss │ │ │ └── docs.scss │ ├── bower.json │ ├── build │ │ ├── .htmllintrc │ │ ├── .stylelintrc │ │ ├── change-version.js │ │ ├── gcp-key.json.enc │ │ ├── htmllint.js │ │ ├── lint-vars.sh │ │ ├── postcss.config.js │ │ ├── rollup.config.js │ │ ├── sauce_browsers.json │ │ ├── saucelabs-unit-test.js │ │ ├── ship.sh │ │ ├── upload-preview.sh │ │ ├── workbox.config.json │ │ └── workbox.js │ ├── composer.json │ ├── dist │ │ ├── css │ │ │ ├── bootstrap-grid.css │ │ │ ├── bootstrap-grid.css.map │ │ │ ├── bootstrap-grid.min.css │ │ │ ├── bootstrap-grid.min.css.map │ │ │ ├── bootstrap-reboot.css │ │ │ ├── bootstrap-reboot.css.map │ │ │ ├── bootstrap-reboot.min.css │ │ │ ├── bootstrap-reboot.min.css.map │ │ │ ├── bootstrap.css │ │ │ ├── bootstrap.css.map │ │ │ ├── bootstrap.min.css │ │ │ └── bootstrap.min.css.map │ │ └── js │ │ │ ├── bootstrap.bundle.js │ │ │ ├── bootstrap.bundle.js.map │ │ │ ├── bootstrap.bundle.min.js │ │ │ ├── bootstrap.bundle.min.js.map │ │ │ ├── bootstrap.js │ │ │ ├── bootstrap.js.map │ │ │ ├── bootstrap.min.js │ │ │ └── bootstrap.min.js.map │ ├── docs │ │ └── 4.0 │ │ │ ├── about │ │ │ ├── brand.md │ │ │ ├── history.md │ │ │ ├── license.md │ │ │ ├── team.md │ │ │ └── translations.md │ │ │ ├── browser-bugs.md │ │ │ ├── components │ │ │ ├── alerts.md │ │ │ ├── badge.md │ │ │ ├── breadcrumb.md │ │ │ ├── button-group.md │ │ │ ├── buttons.md │ │ │ ├── card.md │ │ │ ├── carousel.md │ │ │ ├── collapse.md │ │ │ ├── dropdowns.md │ │ │ ├── forms.md │ │ │ ├── input-group.md │ │ │ ├── jumbotron.md │ │ │ ├── list-group.md │ │ │ ├── modal.md │ │ │ ├── navbar.md │ │ │ ├── navs.md │ │ │ ├── pagination.md │ │ │ ├── popovers.md │ │ │ ├── progress.md │ │ │ ├── scrollspy.md │ │ │ └── tooltips.md │ │ │ ├── content │ │ │ ├── code.md │ │ │ ├── figures.md │ │ │ ├── images.md │ │ │ ├── reboot.md │ │ │ ├── tables.md │ │ │ └── typography.md │ │ │ ├── examples │ │ │ ├── .stylelintrc │ │ │ ├── album │ │ │ │ ├── album.css │ │ │ │ └── index.html │ │ │ ├── blog │ │ │ │ ├── blog.css │ │ │ │ └── index.html │ │ │ ├── carousel │ │ │ │ ├── carousel.css │ │ │ │ └── index.html │ │ │ ├── cover │ │ │ │ ├── cover.css │ │ │ │ └── index.html │ │ │ ├── dashboard │ │ │ │ ├── dashboard.css │ │ │ │ └── index.html │ │ │ ├── grid │ │ │ │ ├── grid.css │ │ │ │ └── index.html │ │ │ ├── index.md │ │ │ ├── jumbotron │ │ │ │ ├── index.html │ │ │ │ └── jumbotron.css │ │ │ ├── justified-nav │ │ │ │ ├── index.html │ │ │ │ └── justified-nav.css │ │ │ ├── narrow-jumbotron │ │ │ │ ├── index.html │ │ │ │ └── narrow-jumbotron.css │ │ │ ├── navbar-bottom │ │ │ │ └── index.html │ │ │ ├── navbar-top-fixed │ │ │ │ ├── index.html │ │ │ │ └── navbar-top-fixed.css │ │ │ ├── navbar-top │ │ │ │ ├── index.html │ │ │ │ └── navbar-top.css │ │ │ ├── navbars │ │ │ │ ├── index.html │ │ │ │ └── navbar.css │ │ │ ├── offcanvas │ │ │ │ ├── index.html │ │ │ │ ├── offcanvas.css │ │ │ │ └── offcanvas.js │ │ │ ├── screenshots │ │ │ │ ├── album.jpg │ │ │ │ ├── blog.jpg │ │ │ │ ├── carousel.jpg │ │ │ │ ├── cover.jpg │ │ │ │ ├── dashboard.jpg │ │ │ │ ├── grid.jpg │ │ │ │ ├── jumbotron-narrow.jpg │ │ │ │ ├── jumbotron.jpg │ │ │ │ ├── justified-nav.jpg │ │ │ │ ├── navbar-bottom.jpg │ │ │ │ ├── navbar-fixed.jpg │ │ │ │ ├── navbar-static.jpg │ │ │ │ ├── navbar.jpg │ │ │ │ ├── offcanvas.jpg │ │ │ │ ├── sign-in.jpg │ │ │ │ ├── starter-template.jpg │ │ │ │ ├── sticky-footer-navbar.jpg │ │ │ │ └── sticky-footer.jpg │ │ │ ├── signin │ │ │ │ ├── index.html │ │ │ │ └── signin.css │ │ │ ├── starter-template │ │ │ │ ├── index.html │ │ │ │ └── starter-template.css │ │ │ ├── sticky-footer-navbar │ │ │ │ ├── index.html │ │ │ │ └── sticky-footer-navbar.css │ │ │ ├── sticky-footer │ │ │ │ ├── index.html │ │ │ │ └── sticky-footer.css │ │ │ └── tooltip-viewport │ │ │ │ ├── index.html │ │ │ │ ├── tooltip-viewport.css │ │ │ │ └── tooltip-viewport.js │ │ │ ├── extend │ │ │ ├── approach.md │ │ │ ├── icons.md │ │ │ └── index.md │ │ │ ├── getting-started │ │ │ ├── accessibility.md │ │ │ ├── best-practices.md │ │ │ ├── browsers-devices.md │ │ │ ├── build-tools.md │ │ │ ├── contents.md │ │ │ ├── download.md │ │ │ ├── introduction.md │ │ │ ├── javascript.md │ │ │ ├── theming.md │ │ │ └── webpack.md │ │ │ ├── layout │ │ │ ├── grid.md │ │ │ ├── media-object.md │ │ │ ├── overview.md │ │ │ └── utilities-for-layout.md │ │ │ ├── migration.md │ │ │ └── utilities │ │ │ ├── borders.md │ │ │ ├── clearfix.md │ │ │ ├── close-icon.md │ │ │ ├── colors.md │ │ │ ├── display.md │ │ │ ├── embed.md │ │ │ ├── flex.md │ │ │ ├── float.md │ │ │ ├── image-replacement.md │ │ │ ├── position.md │ │ │ ├── screenreaders.md │ │ │ ├── sizing.md │ │ │ ├── spacing.md │ │ │ ├── text.md │ │ │ ├── vertical-align.md │ │ │ └── visibility.md │ ├── favicon.ico │ ├── index.html │ ├── js │ │ ├── .eslintrc.json │ │ ├── dist │ │ │ ├── alert.js │ │ │ ├── alert.js.map │ │ │ ├── button.js │ │ │ ├── button.js.map │ │ │ ├── carousel.js │ │ │ ├── carousel.js.map │ │ │ ├── collapse.js │ │ │ ├── collapse.js.map │ │ │ ├── dropdown.js │ │ │ ├── dropdown.js.map │ │ │ ├── index.js │ │ │ ├── index.js.map │ │ │ ├── modal.js │ │ │ ├── modal.js.map │ │ │ ├── popover.js │ │ │ ├── popover.js.map │ │ │ ├── scrollspy.js │ │ │ ├── scrollspy.js.map │ │ │ ├── tab.js │ │ │ ├── tab.js.map │ │ │ ├── tooltip.js │ │ │ ├── tooltip.js.map │ │ │ ├── util.js │ │ │ └── util.js.map │ │ ├── src │ │ │ ├── alert.js │ │ │ ├── button.js │ │ │ ├── carousel.js │ │ │ ├── collapse.js │ │ │ ├── dropdown.js │ │ │ ├── index.js │ │ │ ├── modal.js │ │ │ ├── popover.js │ │ │ ├── scrollspy.js │ │ │ ├── tab.js │ │ │ ├── tooltip.js │ │ │ └── util.js │ │ └── tests │ │ │ ├── .eslintrc.json │ │ │ ├── README.md │ │ │ ├── index.html │ │ │ ├── unit │ │ │ ├── alert.js │ │ │ ├── button.js │ │ │ ├── carousel.js │ │ │ ├── collapse.js │ │ │ ├── dropdown.js │ │ │ ├── modal.js │ │ │ ├── popover.js │ │ │ ├── scrollspy.js │ │ │ ├── tab.js │ │ │ └── tooltip.js │ │ │ ├── vendor │ │ │ ├── qunit.css │ │ │ └── qunit.js │ │ │ └── visual │ │ │ ├── alert.html │ │ │ ├── button.html │ │ │ ├── carousel.html │ │ │ ├── collapse.html │ │ │ ├── dropdown.html │ │ │ ├── modal.html │ │ │ ├── popover.html │ │ │ ├── scrollspy.html │ │ │ ├── tab.html │ │ │ └── tooltip.html │ ├── nuget │ │ ├── MyGet.ps1 │ │ ├── bootstrap.nuspec │ │ └── bootstrap.sass.nuspec │ ├── package-lock.json │ ├── package.js │ ├── package.json │ ├── robots.txt │ ├── sache.json │ ├── scss │ │ ├── _alert.scss │ │ ├── _badge.scss │ │ ├── _breadcrumb.scss │ │ ├── _button-group.scss │ │ ├── _buttons.scss │ │ ├── _card.scss │ │ ├── _carousel.scss │ │ ├── _close.scss │ │ ├── _code.scss │ │ ├── _custom-forms.scss │ │ ├── _dropdown.scss │ │ ├── _forms.scss │ │ ├── _functions.scss │ │ ├── _grid.scss │ │ ├── _images.scss │ │ ├── _input-group.scss │ │ ├── _jumbotron.scss │ │ ├── _list-group.scss │ │ ├── _media.scss │ │ ├── _mixins.scss │ │ ├── _modal.scss │ │ ├── _nav.scss │ │ ├── _navbar.scss │ │ ├── _pagination.scss │ │ ├── _popover.scss │ │ ├── _print.scss │ │ ├── _progress.scss │ │ ├── _reboot.scss │ │ ├── _root.scss │ │ ├── _tables.scss │ │ ├── _tooltip.scss │ │ ├── _transitions.scss │ │ ├── _type.scss │ │ ├── _utilities.scss │ │ ├── _variables.scss │ │ ├── bootstrap-grid.scss │ │ ├── bootstrap-reboot.scss │ │ ├── bootstrap.scss │ │ ├── mixins │ │ │ ├── _alert.scss │ │ │ ├── _background-variant.scss │ │ │ ├── _badge.scss │ │ │ ├── _border-radius.scss │ │ │ ├── _box-shadow.scss │ │ │ ├── _breakpoints.scss │ │ │ ├── _buttons.scss │ │ │ ├── _caret.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _float.scss │ │ │ ├── _forms.scss │ │ │ ├── _gradients.scss │ │ │ ├── _grid-framework.scss │ │ │ ├── _grid.scss │ │ │ ├── _hover.scss │ │ │ ├── _image.scss │ │ │ ├── _list-group.scss │ │ │ ├── _lists.scss │ │ │ ├── _nav-divider.scss │ │ │ ├── _navbar-align.scss │ │ │ ├── _pagination.scss │ │ │ ├── _reset-text.scss │ │ │ ├── _resize.scss │ │ │ ├── _screen-reader.scss │ │ │ ├── _size.scss │ │ │ ├── _table-row.scss │ │ │ ├── _text-emphasis.scss │ │ │ ├── _text-hide.scss │ │ │ ├── _text-truncate.scss │ │ │ ├── _transition.scss │ │ │ └── _visibility.scss │ │ └── utilities │ │ │ ├── _align.scss │ │ │ ├── _background.scss │ │ │ ├── _borders.scss │ │ │ ├── _clearfix.scss │ │ │ ├── _display.scss │ │ │ ├── _embed.scss │ │ │ ├── _flex.scss │ │ │ ├── _float.scss │ │ │ ├── _position.scss │ │ │ ├── _screenreaders.scss │ │ │ ├── _sizing.scss │ │ │ ├── _spacing.scss │ │ │ ├── _text.scss │ │ │ └── _visibility.scss │ └── sw.js ├── bootstrap-cdn.html ├── bootstrap-containers.html ├── bootstrap-grid.html ├── bootstrap-install.html ├── components │ ├── breadcrumb.html │ ├── carousel.html │ ├── form.1.html │ ├── form.2.html │ ├── form.3.html │ ├── form.4.html │ ├── images │ │ ├── train-01.jpg │ │ ├── train-02.jpg │ │ └── train-03.jpg │ ├── navbar.html │ └── typography.html └── labs │ ├── _lab.1.html │ ├── _lab.2.html │ ├── _lab.3.html │ ├── _lab.4.html │ ├── images │ ├── slides │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ └── 4.jpg │ └── thumbnails │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ └── 8.jpg │ ├── lab.1.html │ ├── lab.2.html │ ├── lab.3.html │ └── lab.4.html └── video.mp4 /README.md: -------------------------------------------------------------------------------- 1 | ฝึกนักสร้างเว็บไซต์ จาก ผู้เริ่มต้น ไปเป็น มือโปร 2 | ======================================== 3 | Source Code ตัวอย่างสำหรับคอร์ส "ฝึกนักสร้างเว็บไซต์ จาก ผู้เริ่มต้น ไปเป็น มือโปร" ประกอบด้วย HTML, CSS, Javascript, JQuery, Bootstrap, Javascript ES5 | ES6, Node.js, ExpressJS, MongoDB, Git 4 | 5 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/arrow-function.1.js: -------------------------------------------------------------------------------- 1 | // OLD WAY STYLE -------------------------------------------------------- 2 | var greet1 = function (firstname, lastname) { 3 | return firstname + ' ' + lastname 4 | } 5 | var name = greet1('Olan', 'Samritjiarapon') 6 | console.log('greet1|' + name); 7 | // ARROW FUNCTION ------------------------------------------------------- 8 | var greet2 = (firstname, lastname) => { 9 | return firstname + ' ' + lastname 10 | } 11 | var name2 = greet2('Seen', 'Vechprasit'); 12 | console.log(`greet2| ${name2}`); 13 | // ---------------------------------------------------------------------- 14 | var greet3 = (firstname, lastname) => firstname + ' ' + lastname 15 | console.log(`greet3| ${greet3('Gamer', 'Soney')}`); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/arrow-function.2.js: -------------------------------------------------------------------------------- 1 | var person1 = { 2 | name: "Luna", 3 | 4 | handleMessage: function(message, handler) { 5 | handler(message); 6 | }, 7 | 8 | greet: function() { 9 | var _this = this; 10 | this.handleMessage("Hi", function(message) { 11 | console.log(message + " " + _this.name); 12 | }); 13 | } 14 | }; 15 | 16 | person1.greet(); 17 | 18 | // ------------------------------------------------------------------ 19 | var person2 = { 20 | name: "Luna", 21 | 22 | handleMessage: (message, handler) => { 23 | handler(message); 24 | }, 25 | 26 | greet: function() { 27 | this.handleMessage("Hi", message => 28 | console.log(message + " " + this.name) 29 | ); 30 | } 31 | }; 32 | 33 | person2.greet(); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/bind.1.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | data: [{ name: "T. Wood", age: 37 }, { name: "P. Michelson", age: 43 }], 3 | showFirstUser: function() { 4 | console.warn(this.data[0].name); 5 | } 6 | }; 7 | 8 | // user.showFirstUser(); 9 | // ERROR 10 | // const showFirstUser = user.showFirstUser 11 | // CORRECT 12 | const showFirstUser = user.showFirstUser.bind(user); 13 | showFirstUser(); 14 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/date.1.js: -------------------------------------------------------------------------------- 1 | var pattern = /(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/; 2 | var d = new Date("20190318151725".replace(pattern, "$1-$2-$3T$4:$5:$6")) 3 | 4 | console.log(d); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.1.js: -------------------------------------------------------------------------------- 1 | function howareyou(mood = "Happy") { 2 | console.log(mood); 3 | } 4 | howareyou(); 5 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.2.js: -------------------------------------------------------------------------------- 1 | let [x, y] = [1, 2]; 2 | console.log('1|', x, y); // 1| 1 2 3 | 4 | let [x1, y1] = [1]; 5 | console.log('2|', x1, y1); // 2| 1 undefined 6 | 7 | let [x2, y2 = 3] = [1]; 8 | console.log('3|', x2, y2); // 3| 1 3 9 | 10 | let [x3 = 4, y3 = 5] = []; 11 | console.log('4|', x3, y3); // 4| 4 5 -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.3.js: -------------------------------------------------------------------------------- 1 | const { age: age1, name: name1 } = { age: 3, name: "Luna" }; 2 | console.log("1|", age1, name1); // 1| 3 Luna 3 | 4 | const { age: age2, name: name2 } = { name: "Luna" }; 5 | console.log("2|", age2, name2); // 2| undefined Luna 6 | 7 | const { age: age3 = 3, name: name3 } = { name: "Luna" }; 8 | console.log("3|", age3, name3); // 3| 3 Luna 9 | 10 | const { age: age4 = 3, name: name4 } = {}; 11 | console.log("4|", age4, name4); // 4| 3 undefined 12 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.4.js: -------------------------------------------------------------------------------- 1 | const [{ prop: x1 = 10 }] = [{ prop: undefined }]; 2 | console.log(x1); // 10 3 | 4 | const [{ prop: x2 = 11 } = {}] = []; 5 | console.log(x2); // 11 6 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.5.js: -------------------------------------------------------------------------------- 1 | function createUser(person) { 2 | const name = person.name || "Nana"; 3 | const age = person.age || 18; 4 | return `${name} (age: ${age})`; 5 | } 6 | console.log(createUser({ age: 10, name: "Lucy" })); // Lucy (age: 10) 7 | // ------------------------------------------------------------------------ 8 | function createUser1({ age = 18, name = "Nana" } = {}) { 9 | return `${name} (age: ${age})`; 10 | } 11 | console.log(createUser1()); // Nana (age: 18) 12 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.6.js: -------------------------------------------------------------------------------- 1 | function profilePage( 2 | { favColor } = { favColor: "pink" }, 3 | [name, age] = ["Bunny", 24] 4 | ) { 5 | console.log(`Name = ${name}, age = ${age}, color = ${favColor}`); 6 | } 7 | 8 | profilePage(); // Name = Bunny, age = 24, color = pink 9 | profilePage({ favColor: "blue" }, ["Ed", 30]); // Name = Ed, age = 30, color = blue 10 | profilePage({}, []); // Name = undefined, age = undefined, color = undefined -------------------------------------------------------------------------------- /backend/javascript/es5_es6/default-param.7.js: -------------------------------------------------------------------------------- 1 | function profilePage( 2 | { favColor = "pink" } = {}, 3 | [name = "Bunny", age = 24] = [] 4 | ) { 5 | console.log(`Name = ${name}, age = ${age}, color = ${favColor}`); 6 | } 7 | 8 | profilePage(); // Name = Bunny, age = 24, color = pink 9 | profilePage({ favColor: "blue" }, ["Ed", 30]); // Name = Ed, age = 30, color = blue 10 | profilePage({}, []); // Name = Bunny, age = 24, color = pink -------------------------------------------------------------------------------- /backend/javascript/es5_es6/destructure.1.js: -------------------------------------------------------------------------------- 1 | // DESTRUCTURE OF ARRAY ------------------------------------------- 2 | const arr = [1, 2]; 3 | const a = arr[0]; 4 | const b = arr[1]; 5 | console.log('1|', a, b); // 1| 1 2 6 | 7 | const [c, d] = arr; 8 | console.log('2|', c, d); // 2| 1 2 9 | 10 | const oneToFive = [1, 2, 3, 4, 5]; 11 | const [a1, b1, c1] = oneToFive; 12 | console.log('3|', a1, b1, c1); // 3| 1 2 3 13 | 14 | const [a2, b2, , d2] = oneToFive; 15 | console.log('4|', a2, b2, d2); // 4| 1 2 4 16 | 17 | const [, , , , e2] = oneToFive; 18 | console.log('5|', e2); // 5| 5 19 | 20 | const [a3, b3, ...rest] = oneToFive; 21 | console.log('6|', rest); // 6| [ 3, 4, 5 ] 22 | 23 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/destructure.2.js: -------------------------------------------------------------------------------- 1 | // DESTRUCTURE OF OBJECT ------------------------------------------------------- 2 | const person = { first: "Jane", last: "Doe" }; 3 | const f = person.first; 4 | const l = person.last; 5 | console.log("1|", f, l); // 1| Jane Doe 6 | 7 | const { first: f1, last: l2 } = person; 8 | console.log("2|", f1, l2); // 2| Jane Doe 9 | 10 | const { first, last } = person; 11 | console.log("3|", first, last); // 3| Jane Doe -------------------------------------------------------------------------------- /backend/javascript/es5_es6/destructure.3.js: -------------------------------------------------------------------------------- 1 | // DESTRUCTURE OF OBJECT IN DEEP ------------------------------------------------------- 2 | const person = { 3 | first: "Saha", 4 | last: "Michel", 5 | email: "saha@gmail.com", 6 | birthday: { 7 | day: 1, 8 | month: "Jan", 9 | year: 1984 10 | } 11 | }; 12 | 13 | const { first, last, birthday, birthday: { day, month, year } } = person; 14 | console.log("1|", first, last); // 1| Saha Michel 15 | console.log("2|", birthday); // 2| { day: 1, month: 'Jan', year: 1984 } 16 | console.log("3|", day, month, year); // 3| 1 Jan 1984 17 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/lab/main.js: -------------------------------------------------------------------------------- 1 | // Function & Arrow Functions 2 | 3 | 4 | console.log(("small" || "large")); 5 | 6 | console.log(("large" || "small")); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/let-const-var.1.js: -------------------------------------------------------------------------------- 1 | // VAR ---------------------------------------------------------- 2 | var name1 = "Luna"; 3 | if (true) { 4 | var name1 = "Ken"; 5 | } 6 | console.log("1|", name1); // Ken 7 | 8 | // LET ---------------------------------------------------------- 9 | let name2 = "Luna2"; 10 | if (true) { 11 | let name2 = "Ken2"; 12 | console.log("2|", name2); // Ken2 13 | } 14 | console.log("2|", name2); // Luna2 15 | 16 | // CONST ---------------------------------------------------------- 17 | const fruit = "Banana"; 18 | // fruit = "Apple"; // ERROR 19 | console.log("3|", fruit); // Banana 20 | 21 | const person = {}; 22 | // person = {name: "Luna"}; // ERROR 23 | person.name = "Luna"; // NO ERROR 24 | console.log("4|", person); // { name: 'Luna'} -------------------------------------------------------------------------------- /backend/javascript/es5_es6/modules/math.1.js: -------------------------------------------------------------------------------- 1 | const add = function(a, b) { 2 | return a + b; 3 | }; 4 | 5 | const substract = function(a, b) { 6 | return a - b; 7 | }; 8 | 9 | const multiple = function(a, b) { 10 | return a * b; 11 | }; 12 | 13 | module.exports = { 14 | add, 15 | substract, 16 | multiple 17 | }; -------------------------------------------------------------------------------- /backend/javascript/es5_es6/modules/math.2.js: -------------------------------------------------------------------------------- 1 | module.exports.add = function(a, b) { 2 | return a + b; 3 | }; 4 | 5 | module.exports.substract = function(a, b) { 6 | return a - b; 7 | }; 8 | 9 | module.exports.multiple = function(a, b) { 10 | return a * b; 11 | }; -------------------------------------------------------------------------------- /backend/javascript/es5_es6/modules/module.js: -------------------------------------------------------------------------------- 1 | var math1 = require("./math.1.js"); 2 | var math2 = require("./math.2.js"); 3 | 4 | // solution 1 : math1 5 | console.log("1|", math1.add(1, 2)); 6 | console.log("1|", math1.substract(1, 2)); 7 | console.log("1|", math1.multiple(1, 2)); 8 | 9 | // solution 2 : math2 10 | console.log("2|", math2.add(1, 2)); 11 | console.log("2|", math2.substract(1, 2)); 12 | console.log("2|", math2.multiple(1, 2)); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/object.1.js: -------------------------------------------------------------------------------- 1 | // --------------------------------------------------------------- 2 | const color = "red"; 3 | const age = 2; 4 | function bark() { 5 | console.log("hong"); 6 | } 7 | 8 | const dog1 = { color: color, age: age, bark: bark }; 9 | const dog2 = { color, age, bark }; 10 | 11 | dog1.bark(); 12 | dog2.bark(); 13 | // --------------------------------------------------------------- 14 | const dog3 = { 15 | color, 16 | age, 17 | bark: function() { 18 | console.log("hong3"); 19 | } 20 | }; 21 | dog3.bark(); 22 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/object.2.js: -------------------------------------------------------------------------------- 1 | const color = "red"; 2 | const age = 2; 3 | const doBark = "ba" + "rk"; 4 | 5 | const dog4 = { 6 | color, 7 | age, 8 | [doBark]: function() { 9 | console.log("hong4"); 10 | } 11 | }; 12 | dog4.bark(); 13 | // ------------------------------------------------------------ 14 | const dog5 = { 15 | color, 16 | age, 17 | ["ba" + "rk"]: function() { 18 | console.log("hong5"); 19 | } 20 | }; 21 | dog5.bark(); 22 | // ------------------------------------------------------------ 23 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/rest.1.js: -------------------------------------------------------------------------------- 1 | // REST -------------------------------------------- 2 | function howManyArgs(...args) { 3 | console.log(args.length); 4 | } 5 | 6 | howManyArgs(1); // 1 7 | howManyArgs(1, 2); // 2 8 | howManyArgs(1, 2, 3, 4, 5); // 3 9 | 10 | function multiply(multiper, ...array) { 11 | console.log(array); 12 | } 13 | const result = multiply(2, 100, 200, 300); 14 | 15 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/spread.1.js: -------------------------------------------------------------------------------- 1 | // SPREAD -------------------------------------------- 2 | // Spread into arguments 3 | function add(x, y, z) { 4 | return x + y + z; 5 | } 6 | 7 | const sum1 = add(1, 2, 3); 8 | console.log('1|', sum1); 9 | 10 | const numbers = [1, 2, 3]; 11 | const sum2 = add(...numbers); 12 | console.warn('2|', sum2); -------------------------------------------------------------------------------- /backend/javascript/es5_es6/spread.2.js: -------------------------------------------------------------------------------- 1 | // SPREAD -------------------------------------------- 2 | const arr = [4, 5, 6]; 3 | const append1 = [1, 2, 3, arr]; 4 | console.log("1|", append1); // 1| [ 1, 2, 3, [ 4, 5, 6 ] ] 5 | 6 | const append2 = [1, 2, 3, ...arr]; 7 | console.log("2|", append2); // 2| [ 1, 2, 3, 4, 5, 6 ] 8 | 9 | const prepend1 = [...arr, 7, 8, 9]; 10 | console.log("3|", prepend1); // 3| [ 4, 5, 6, 7, 8, 9 ] -------------------------------------------------------------------------------- /backend/javascript/es5_es6/spread.3.js: -------------------------------------------------------------------------------- 1 | // SPREAD -------------------------------------------- 2 | const arr1 = ["a", "b", "c"]; 3 | const arr2 = ["d", "e", "f"]; 4 | const arr3 = ["a", "b", "c"]; 5 | arr1.push(arr2); 6 | console.log('1|', arr1); // 1| [ 'a', 'b', 'c', [ 'd', 'e', 'f' ] ] 7 | 8 | arr3.push(...arr2) 9 | console.log('2|', arr3); // 2| [ 'a', 'b', 'c', 'd', 'e', 'f' ] 10 | 11 | // copy = arr2; 12 | const copy = arr2.slice(); 13 | console.log('3|', copy); // 3| [ 'd', 'e', 'f' ] 14 | copy.push(4) 15 | console.log('3|', copy); // 3| [ 'd', 'e', 'f', 4 ] 16 | console.log('3|', arr2); // 3| [ 'd', 'e', 'f' ] 17 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/spread.4.js: -------------------------------------------------------------------------------- 1 | var obj1 = { foo: "bar", x: 42 }; 2 | var obj2 = { foo: "baz", y: 13 }; 3 | 4 | var clonedObj = { ...obj1 }; 5 | console.log(clonedObj); // Object { foo: "bar", x: 42 } 6 | 7 | var mergedObj = { ...obj1, ...obj2 }; 8 | console.log(mergedObj); // Object { foo: "baz", x: 42, y: 13 } 9 | 10 | var { foo, x, y } = obj1; 11 | console.log(foo, x, y); // bar 42 undefined 12 | 13 | var { foo: foo2, x: x2, y: y2 } = obj1; 14 | console.log(foo2, x2, y2); // bar 42 undefined -------------------------------------------------------------------------------- /backend/javascript/es5_es6/string.1.js: -------------------------------------------------------------------------------- 1 | const str1 = "In ES6 " + 2 | "multi-line is " + 3 | "okay."; 4 | console.log("str1: " + str1); 5 | 6 | const str2 = `In ES6 7 | multi-line is 8 | okay.`; 9 | console.log(`str2: ${str2}`); 10 | -------------------------------------------------------------------------------- /backend/javascript/es5_es6/string.2.js: -------------------------------------------------------------------------------- 1 | const firstname = 'Robot' 2 | const lastname = 'TrippleX' 3 | const date = new Date(); 4 | const great = `Hello, ${firstname + ' ' + lastname}, how are you ${date}?` 5 | console.log(great); -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-analyzing.txt: -------------------------------------------------------------------------------- 1 | // Explain ------------------------------------------------------------ 2 | db.users.find({gender:"M"},{user_name:1,_id:0}).explain(); 3 | 4 | 5 | // HINT ------------------------------------------------------------ 6 | db.users.find({gender:"M"},{user_name:1,_id:0}).hint({gender:1,user_name:1}); 7 | db.users.find({gender:"M"},{user_name:1,_id:0}).hint({gender:1,user_name:1}).explain(); -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-basic.txt: -------------------------------------------------------------------------------- 1 | // แสดง Database ทั้งหมด 2 | show dbs 3 | // ใช้ Database ที่ต้องการ ถ้าไม่มีอยู่จะทำการสร้างใหม่ให้ 4 | use mydb 5 | // แสดง collection ที่อยู่ใน database 6 | show collections 7 | 8 | // Create Collection ------------------------------------------------------------ 9 | db.createCollection("products") 10 | db.createCollection("products", { capped : true, autoIndexId : true, size : 6142800, max : 10000 } ) 11 | 12 | // Drop - Collection ------------------------------------------------------------ 13 | db.products.drop() 14 | 15 | // CONSTAIN --------------------------------------------------------------------- 16 | // UNIQUE 17 | db.products.createIndex({name:1}, {unique:true}); -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-delete.txt: -------------------------------------------------------------------------------- 1 | // DELETE MANY --------------------------------------------- 2 | db.products.deleteMany({ status : "Active" }) 3 | 4 | // DELETE ONE --------------------------------------------- 5 | db.products.deleteOne( { status: "Inactive" } ) -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-dump.txt: -------------------------------------------------------------------------------- 1 | // DUMP 2 | mongodump -d -o 3 | mongodump -u -p --authenticationDatabase admin -d -o 4 | 5 | // RESTORE 6 | mongorestore -d 7 | mongorestore -u -p --authenticationDatabase admin -d 8 | -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-find-null-missing.txt: -------------------------------------------------------------------------------- 1 | // DATA ------------------------------------------------------------ 2 | db.inventory.insertMany([ 3 | { _id: 1, item: null }, 4 | { _id: 2 } 5 | ]) 6 | 7 | // Equality Filter 8 | db.inventory.find( { item: null } ) 9 | 10 | // Type Check 11 | db.inventory.find( { item : { $type: 10 } } ) 12 | 13 | // Existence Check 14 | db.inventory.find( { item : { $exists: false } } ) -------------------------------------------------------------------------------- /backend/mongodb/commands/mongo-tuning.txt: -------------------------------------------------------------------------------- 1 | // INDEXING ------------------------------------------------------------ 2 | db.products.createIndex({"name":1}); 3 | 4 | 5 | -------------------------------------------------------------------------------- /backend/mongodb/mongodb_/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /backend/mongodb/mongodb_/find.1.js: -------------------------------------------------------------------------------- 1 | const MongoClient = require('mongodb').MongoClient; 2 | const url = 'mongodb://localhost:27017'; 3 | 4 | // CONNECT 5 | MongoClient.connect(url, function(err, client) { 6 | if (err) throw err; 7 | console.log("Database created!"); 8 | 9 | // use shopper 10 | const db = client.db("shopper"); 11 | db.collection("users").findOne({status: "pending"}, function(err, result) { 12 | if (err) throw err; 13 | console.log(result); 14 | 15 | client.close(); 16 | }); 17 | }); -------------------------------------------------------------------------------- /backend/mongodb/mongodb_/find.2.js: -------------------------------------------------------------------------------- 1 | const MongoClient = require('mongodb').MongoClient; 2 | const url = 'mongodb://localhost:27017'; 3 | 4 | MongoClient.connect(url, function(err, client) { 5 | if (err) throw err; 6 | console.log("Database created!"); 7 | 8 | const db = client.db("shopper"); 9 | db.collection("users").find({age: 33}).toArray((err, docs) => { 10 | if (err) throw err; 11 | console.log(docs); 12 | client.close(); 13 | }); 14 | }); -------------------------------------------------------------------------------- /backend/mongodb/mongodb_/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongodb_", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "insert.1.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "mongodb": "^3.0.4" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/UserModel.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | // Schema Validation 3 | var userSchema = mongoose.Schema({ 4 | firstname: {type: String, required: true}, 5 | lastname: String, 6 | email: {type: String, require: true, lowercase: true, trim: true}, 7 | age: {type: Number, min: 1, max: 100, default: 15}, 8 | status: {type: String , enum: ["active", "pending"], required: true}, 9 | created_date: {type:Date, default: Date.now} 10 | }); 11 | 12 | var User = mongoose.model('User', userSchema); 13 | module.exports = User; -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/delete.1.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/shopper'); 3 | mongoose.Promise = global.Promise; 4 | 5 | var User = require('./UserModel'); 6 | User.remove({'firstname': 'Seen'}, (err) => { 7 | if(err) { 8 | console.log(err); 9 | } 10 | console.log('remove successfully.'); 11 | }) -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/delete.2.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/shopper'); 3 | mongoose.Promise = global.Promise; 4 | 5 | var User = require('./UserModel'); 6 | User.findByIdAndRemove('5a507fc10366c2369c550776', (err, data) => { 7 | if (err) { 8 | console.log(err); 9 | } 10 | console.log(data); 11 | }) 12 | // ------------------------------------------------------------------------------------------------------------ 13 | User.findOneAndRemove({ 'firstname': 'Seen' }, (err) => { 14 | if (err) { 15 | console.log(err); 16 | } 17 | console.log('remove successfully.'); 18 | }) 19 | // ------------------------------------------------------------------------------------------------------------ 20 | -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/find.1.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/shopper'); 3 | mongoose.Promise = global.Promise; 4 | 5 | var User = require('./UserModel'); 6 | // -------------------------------------------------------------------------------- 7 | User.find((err, data) => { 8 | if(err) { 9 | console.log(err); 10 | } 11 | console.log('User.find|', data); // Array 12 | }) 13 | // -------------------------------------------------------------------------------- 14 | User.find({'firstname': 'Olan'}, (err, data) => { 15 | if(err) { 16 | console.log(err); 17 | } 18 | console.log('User.find|', data); // Array 19 | }) -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/find.5.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/shopper'); 3 | mongoose.Promise = global.Promise; 4 | 5 | var User = require('./UserModel'); 6 | // -------------------------------------------------------------------------------- 7 | // where, gt - greater than 8 | User.find().where('age').gt(20).exec((err, data) => { 9 | if(err) { 10 | console.log(err); 11 | } 12 | console.log('User.find - age greater than |', data); // Array 13 | }) 14 | 15 | // where, lt - less than 16 | User.find().where('age').lt(20).exec((err, data) => { 17 | if(err) { 18 | console.log(err); 19 | } 20 | console.log('User.find - age less than |', data); // Array 21 | }) -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/insert.2.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | mongoose.connect('mongodb://localhost/shopper'); 3 | mongoose.Promise = global.Promise; 4 | 5 | var User = require('./UserModel'); 6 | var person = new User({ firstname: 'Seen', lastname: 'Vechprasit', email: 'seen@olanlab.com', age: 33, status: "active"}); 7 | person.save(function (err) { 8 | if (err) { 9 | console.log(err); 10 | } else { 11 | console.log('save successsfully.'); 12 | } 13 | }); -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/lab.1.js: -------------------------------------------------------------------------------- 1 | // CONNECT 2 | var mongoose = require('mongoose'); 3 | mongoose.connect('mongodb://localhost/shopper'); 4 | mongoose.Promise = global.Promise; 5 | 6 | // Model 7 | var User = require("./UserModel"); 8 | // INSERT 9 | var person = new User({ firstname: 'Seen', lastname: 'Vechprasit', email: 'Seen@olanlab.com ', status: "active"}); 10 | person.save((err, data) => { 11 | if(err) console.log(err); 12 | console.log('saved document successfully : ', data); 13 | }) 14 | 15 | -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/lab.2.js: -------------------------------------------------------------------------------- 1 | // CONNECT 2 | var mongoose = require('mongoose'); 3 | mongoose.connect('mongodb://localhost/shopper'); 4 | mongoose.Promise = global.Promise; 5 | 6 | // Model 7 | var User = require("./UserModel"); 8 | // UPDATE 9 | // 1 10 | // User.findByIdAndUpdate('5aae5759576c521358b7d8dc', {age: 20}, {new: false},(err, data) => { 11 | // if(err) console.log(err); 12 | // console.log('User.findByIdAndUpdate | ', data); 13 | // }) 14 | 15 | // 2 16 | User.findOneAndUpdate({firstname: 'Seentttt'}, {age: 14}, {new: true, upsert: true}, (err, data) => { 17 | if(err) console.log(err); 18 | console.log('User.findOneAndUpdate | ', data); 19 | }); 20 | 21 | 22 | -------------------------------------------------------------------------------- /backend/mongodb/mongoose_/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mongoose_", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "mongoose": "^5.0.10" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /backend/nodejs/basic/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules -------------------------------------------------------------------------------- /backend/nodejs/basic/console.js: -------------------------------------------------------------------------------- 1 | var profile = { firstname: "Olan", lastname: "Samritjiarapon" }; 2 | console.log(profile); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/blocking-code.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | 3 | console.log("------- Program Start -------"); 4 | var data = fs.readFileSync("input.txt"); 5 | console.log(data.toString()); 6 | console.log("------- Program End -------"); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo 4 | 5 | 6 |

Demo

7 |

This is demo page.

8 | 9 | -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/demo.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var fs = require('fs'); 3 | http.createServer(function (req, res) { 4 | fs.readFile('demo.html', function (err, data) { 5 | res.writeHead(200, { 'Content-Type': 'text/html' }); 6 | res.write(data); 7 | res.end(); 8 | }); 9 | }).listen(8081); 10 | 11 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/fs.1.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | fs.appendFile('myfile1.txt', 'Create or Update by fs.appendFile', function (err) { 4 | if (err) throw err; 5 | console.log('Saved!'); 6 | }); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/fs.2.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | fs.writeFile('myfile1.txt', 'Create or Update by fs.writeFile', function (err) { 4 | if (err) throw err; 5 | console.log('Saved!'); 6 | }); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/fs.3.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | fs.unlink('myfile3.txt', function (err) { 4 | if (err) throw err; 5 | console.log('File deleted!'); 6 | }); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/fs.4.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | fs.rename('myfile1.txt', 'myfile3.txt', function (err) { 4 | if (err) throw err; 5 | console.log('File Renamed!'); 6 | }); -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/input.txt: -------------------------------------------------------------------------------- 1 | This is a Node.js. It is not difficult. 2 | But You try to code with Node.js. Okay. -------------------------------------------------------------------------------- /backend/nodejs/basic/filesystem/non-blocking-code.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | 3 | console.log("------- Program Start -------"); 4 | fs.readFile("input.txt", (err, data) => { 5 | if (err) return console.error(err); 6 | console.log(data.toString()); 7 | }); 8 | console.log("------- Program End -------"); 9 | -------------------------------------------------------------------------------- /backend/nodejs/basic/global-objects.js: -------------------------------------------------------------------------------- 1 | console.log("__filename\t", __filename); 2 | console.log("__dirname\t", __dirname); 3 | // console.log("process.env\t", process.env); -------------------------------------------------------------------------------- /backend/nodejs/basic/http/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 |

About

8 |

This is about page.

9 | 10 | -------------------------------------------------------------------------------- /backend/nodejs/basic/http/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Home 5 | 6 | 7 |

Home

8 |

This is home page.

9 | 10 | -------------------------------------------------------------------------------- /backend/nodejs/basic/http/http.1.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | 3 | http.createServer((req, resp) => { 4 | resp.writeHead(200, { "Content-Type": "text/plain" }); 5 | resp.end("Hello World Ok.\n"); 6 | }) 7 | .listen(8081); 8 | 9 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/http/http.2.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | var url = require('url'); 3 | 4 | http.createServer((req, resp) => { 5 | resp.writeHead(200, { "Content-Type": "text/plain" }); 6 | resp.write(req.url); 7 | resp.end("Hello World Ok.\n"); 8 | }).listen(8081); 9 | 10 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/http/http.3.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var url = require('url'); 3 | 4 | http.createServer(function (req, resp) { 5 | resp.writeHead(200, { 'Content-Type': 'text/html' }); 6 | var q = url.parse(req.url, true).query; 7 | var txt = q.firstname + " " + q.lastname; 8 | resp.end(txt); 9 | }).listen(8081); 10 | 11 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/http/http.4.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var url = require('url'); 3 | var fs = require('fs'); 4 | 5 | http.createServer(function (req, res) { 6 | var q = url.parse(req.url, true); 7 | var filename = "." + q.pathname; 8 | fs.readFile(filename, function (err, data) { 9 | if (err) { 10 | res.writeHead(404, { 'Content-Type': 'text/html' }); 11 | return res.end("404 Not Found"); 12 | } 13 | res.writeHead(200, { 'Content-Type': 'text/html' }); 14 | res.write(data); 15 | return res.end(); 16 | }); 17 | }).listen(8081); 18 | 19 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 404 5 | 6 | 7 |

404 File not found.

8 |

This is about page.

9 | 10 | -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | About 5 | 6 | 7 |

About

8 |

This is about page.

9 | 10 | -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Demo 4 | 5 | 6 |

Demo

7 |

This is demo page.

8 | 9 | -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/basic/lab/favicon.ico -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Home 5 | 6 | 7 |

Home

8 |

This is home page.

9 | 10 | -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/lab1.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | 3 | 4 | http.createServer((req, resp) => { 5 | // Read file demo.html 6 | 7 | }) 8 | .listen(8081); 9 | 10 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/basic/lab/lab2.js: -------------------------------------------------------------------------------- 1 | var http = require("http"); 2 | 3 | 4 | http.createServer((req, resp) => { 5 | // http://127.0.0.1:8081/home.html 6 | // http://127.0.0.1:8081/about.html 7 | 8 | // ./home.html, ./about.html 9 | 10 | // error | 404.html 11 | 12 | }) 13 | .listen(8081); 14 | 15 | console.log("Server running at http://127.0.0.1:8081/"); -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/config/dev.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mongoURI : "mongodb://localhost/shopper" 3 | } -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/config/keys.js: -------------------------------------------------------------------------------- 1 | if (process.env.NODE_ENV === 'production') { 2 | module.exports = require('./prod'); 3 | } else { 4 | module.exports = require('./dev'); 5 | } -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/config/prod.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | mongoURI : "mongodb://admin:12345678a@ds263460.mlab.com:63460/shopper-db" 3 | } -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/models/productModel.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/express-generator/server/models/productModel.js -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/models/userModel.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | // Schema Validation 3 | var userSchema = mongoose.Schema({ 4 | firstname: {type: String, required: true}, 5 | lastname: String, 6 | email: {type: String, require: true, lowercase: true, trim: true}, 7 | age: {type: Number, min: 1, max: 100, default: 15}, 8 | status: {type: String , enum: ["active", "pending"], required: true}, 9 | created_date: {type:Date, default: Date.now} 10 | }); 11 | 12 | var User = mongoose.model('Users', userSchema); 13 | module.exports = User; -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "nodemon ./bin/www" 7 | }, 8 | "dependencies": { 9 | "body-parser": "~1.18.2", 10 | "cookie-parser": "~1.4.3", 11 | "debug": "~2.6.9", 12 | "express": "~4.15.5", 13 | "lodash": "^4.17.5", 14 | "mongoose": "^5.0.10", 15 | "morgan": "~1.9.0", 16 | "pug": "2.0.0-beta11", 17 | "serve-favicon": "~2.4.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/public/stylesheets/style.css: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/routes/indexRoutes.js: -------------------------------------------------------------------------------- 1 | var express = require('express'); 2 | var router = express.Router(); 3 | 4 | /* GET home page. */ 5 | router.get('/', function(req, res, next) { 6 | res.render('index', { title: 'Express' }); 7 | }); 8 | 9 | module.exports = router; 10 | -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/routes/productRoutes.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/express-generator/server/routes/productRoutes.js -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/views/error.pug: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= message 5 | h2= error.status 6 | pre #{error.stack} 7 | -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/views/index.pug: -------------------------------------------------------------------------------- 1 | extends layout 2 | 3 | block content 4 | h1= title 5 | p Welcome to #{title} 6 | -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/views/layout.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html 3 | head 4 | title= title 5 | link(rel='stylesheet', href='/stylesheets/style.css') 6 | link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css') 7 | body 8 | 9 | 10 | block content 11 | 12 | script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js") 13 | script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js") 14 | script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js") -------------------------------------------------------------------------------- /backend/nodejs/express-generator/server/views/products.pug: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/express-generator/server/views/products.pug -------------------------------------------------------------------------------- /backend/nodejs/express/lab/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /backend/nodejs/express/lab/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/express/lab/app.js -------------------------------------------------------------------------------- /backend/nodejs/express/lab/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lab", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.16.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | package-lock.json -------------------------------------------------------------------------------- /backend/nodejs/express/server/error-handling/error.1.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | app.get("/", (req, res) => { 5 | res.send("hello world"); 6 | }); 7 | 8 | app.get("/users/:userId", (req, res) => { 9 | res.send(req.params); 10 | }); 11 | 12 | app.use(function(req, res, next) { 13 | var err = new Error("Page Not Found"); 14 | err.status = 404; 15 | next(err); 16 | }); 17 | 18 | app.use(function(err, req, res, next) { 19 | console.error(err.stack); 20 | res.status(err.status).send(err.message); 21 | }); 22 | 23 | app.listen(3000, () => { 24 | console.log("Server listening on port 3000!"); 25 | }); 26 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/middleware.1.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | var myLogger = function(req, res, next) { 5 | console.log("myLogger| Time:", Date.now()); 6 | next(); 7 | }; 8 | 9 | app.use(myLogger); 10 | 11 | app.get("/", function(req, res) { 12 | res.send("Hello World!"); 13 | }); 14 | 15 | app.listen(3000, () => { 16 | console.log("Server listening on port 3000"); 17 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/middleware.2.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | var mw = require("./my-middleware.js"); 5 | app.use(mw({ option1: "1", option2: "2" })); 6 | 7 | app.get("/", function(req, res) { 8 | var responseText = "Hello World!
"; 9 | res.send(responseText); 10 | }); 11 | 12 | app.listen(3000); -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/middleware.3.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | var requestTime = function(req, res, next) { 5 | req.requestTime = Date.now(); 6 | next(); 7 | }; 8 | app.use(requestTime); 9 | 10 | app.get("/", function(req, res) { 11 | var responseText = "Hello World!
"; 12 | responseText += "Requested at: " + req.requestTime + ""; 13 | res.send(responseText); 14 | }); 15 | 16 | app.listen(3000); -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/my-middleware.js: -------------------------------------------------------------------------------- 1 | module.exports = function(options) { 2 | return function(req, res, next) { 3 | console.log('my-middleware|', options); 4 | next(); 5 | }; 6 | }; -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/views/regular.pug: -------------------------------------------------------------------------------- 1 | h1 regular 2 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/middleware/views/special.pug: -------------------------------------------------------------------------------- 1 | h1 special -------------------------------------------------------------------------------- /backend/nodejs/express/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.16.2", 14 | "pug": "^2.0.0-rc.4" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.1.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | app.get("/", (req, res) => { 5 | res.send("hello world!!!!"); 6 | }); 7 | 8 | // http://127.0.0.1:3000/users?userId=jame // Query Parameter 9 | // http://127.0.0.1:3000/users/jame // URL Parameter 10 | app.get("/users2/:userIdVIP", (req, res) => { 11 | res.send(req.params); 12 | }); 13 | 14 | app.listen(3000, () => { 15 | console.log("Server listening on port 3000!"); 16 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.3.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | app.route("/book") 5 | .get(function(req, res) { 6 | res.send("Get a random book"); 7 | }) 8 | .post(function(req, res) { 9 | res.send("Add a book"); 10 | }) 11 | .put(function(req, res) { 12 | res.send("Update the book"); 13 | }); 14 | 15 | app.listen(3000, function() { 16 | console.log("Server listening on port 3000!"); 17 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.4.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | var users = require('./users'); 5 | app.use('/', users); 6 | 7 | app.listen(3000, () => { 8 | console.log("Server listening on port 3000!"); 9 | }) -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.5.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | // GET method route 5 | app.get("/", function(req, res) { 6 | res.send("GET request to the homepage"); 7 | }); 8 | 9 | // POST method route 10 | app.post("/", function(req, res) { 11 | res.send("POST request to the homepage"); 12 | }); 13 | 14 | app.listen(3000, () => { 15 | console.log("Server listening on port 3000!"); 16 | }); 17 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.6.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | app.get("/users/:userId/books/:bookId", function(req, res) { 5 | res.send(req.params); 6 | }); 7 | 8 | app.listen(3000, () => { 9 | console.log("Server listening on port 3000!"); 10 | }); 11 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.7.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | // path| acd, abcd 5 | app.get("/ab?cd", function(req, res) { 6 | res.send("ab?cd"); 7 | }); 8 | 9 | // path| abcd, abbcd, abbbcd 10 | app.get("/ab+cd", function(req, res) { 11 | res.send("ab+cd"); 12 | }); 13 | 14 | // path| abcd, abxcd, abRANDOMcd, ab123cd 15 | app.get("/ab*cd", function(req, res) { 16 | res.send("ab*cd"); 17 | }); 18 | 19 | // path| /abe, /abcde. 20 | app.get("/ab(cd)?e", function(req, res) { 21 | res.send("ab(cd)?e"); 22 | }); 23 | 24 | app.listen(3000, () => { 25 | console.log("Server listening on port 3000!"); 26 | }); 27 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/route.8.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var app = express(); 3 | 4 | // path| a 5 | app.get(/a/, function(req, res) { 6 | res.send("/a/"); 7 | }); 8 | 9 | // path| butterfly, dragonfly 10 | app.get(/.*fly$/, function(req, res) { 11 | res.send("/.*fly$/"); 12 | }); 13 | 14 | app.listen(3000, () => { 15 | console.log("Server listening on port 3000!"); 16 | }); 17 | -------------------------------------------------------------------------------- /backend/nodejs/express/server/routes/users.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var router = express.Router(); 3 | 4 | router.get("/", (req, resp) => { 5 | resp.send("user router ....."); 6 | }); 7 | 8 | router.get("/:userId", (req, resp) => { 9 | resp.send(req.params); 10 | }); 11 | 12 | module.exports = router; -------------------------------------------------------------------------------- /backend/nodejs/express/server/static/public/images/icons/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/backend/nodejs/express/server/static/public/images/icons/sun.png -------------------------------------------------------------------------------- /backend/nodejs/express/server/static/static.1.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var path = require("path"); 3 | var app = express(); 4 | 5 | // app.use(express.static("public")); 6 | app.use("/asset2", express.static("public")); 7 | 8 | app.get("/", (req, resp) => { 9 | resp.send("Hello world"); 10 | }); 11 | 12 | app.listen(3000, () => { 13 | console.log("Server listening on port 3000"); 14 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/static/static.2.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var path = require("path"); 3 | var app = express(); 4 | 5 | app.use("/asset", express.static("public")); 6 | 7 | app.get("/", (req, resp) => { 8 | resp.send("Hello world"); 9 | }); 10 | 11 | app.listen(3000, () => { 12 | console.log("Server listening on port 3000"); 13 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/template-engines/template-engines.1.js: -------------------------------------------------------------------------------- 1 | var express = require("express"); 2 | var path = require("path"); 3 | var app = express(); 4 | 5 | app.set("views", path.join(__dirname, "views")); 6 | app.set("view engine", "pug"); 7 | 8 | app.get("/", (req, resp) => { 9 | resp.render("index", { title: "Hey OlanLab", message: "Hello there!" }); 10 | }); 11 | 12 | app.listen(3000, () => { 13 | console.log("Server listening on port 3000"); 14 | }); -------------------------------------------------------------------------------- /backend/nodejs/express/server/template-engines/views/index.pug: -------------------------------------------------------------------------------- 1 | html 2 | head 3 | title= title 4 | body 5 | h1= message 6 | p= title -------------------------------------------------------------------------------- /backend/nodejs/npm/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /backend/nodejs/npm/main.js: -------------------------------------------------------------------------------- 1 | var prompt = require('prompt-sync')(); 2 | 3 | 4 | var n = prompt('How many more times? '); 5 | var x = prompt('How many more times? '); 6 | 7 | 8 | console.log(n, x); -------------------------------------------------------------------------------- /backend/nodejs/npm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "npm", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "prompt-sync": "^4.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /frontend/css/cascade.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 23 | 24 | 25 | 26 | 27 |

28 | Specificity is determined by how specific the selector is. 29 | A specific selector wins 30 | over a 31 | more general one. 32 |

33 | 34 | 35 | -------------------------------------------------------------------------------- /frontend/css/cascade.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px sans-serif; 3 | } 4 | span#specific { 5 | background: pink; 6 | } 7 | span { 8 | background: red ; 9 | } 10 | span { 11 | background: yellow; 12 | } 13 | -------------------------------------------------------------------------------- /frontend/css/cascade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 |

10 | Specificity is determined by how specific the selector is. 11 | A specific selector wins 12 | over a 13 | more general one. 14 |

15 |

16 | Order isn't important until there are one or more elements of the same specificity referring to the same element. In which 17 | case, 18 | the last one wins. 19 |

20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/css-comment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/css-including.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 13 | 14 | 15 | 16 | 17 | 18 |

Style Sheet

19 |

Rules

20 |

Selector

21 |

Declaration

22 |
Property
23 |
Value
24 | 25 | 26 | -------------------------------------------------------------------------------- /frontend/css/css-including.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Style Sheet

12 |

Rules

13 |

Selector

14 |

Declaration

15 |
Property
16 |
Value
17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/css/css-including.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

Style Sheet

9 |

Rules

10 |

Selector

11 |

Declaration

12 |
Property
13 |
Value
14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/css/css-rule.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/images/backgrounds/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/images/backgrounds/bg.jpg -------------------------------------------------------------------------------- /frontend/css/images/icons/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/images/icons/sun.png -------------------------------------------------------------------------------- /frontend/css/inheritance.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 14px sans-serif; 3 | color: darkslateblue; 4 | border: 5px dashed darkslateblue; 5 | margin: 10px; 6 | padding: 10px; 7 | text-align: center; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/css/inheritance.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 |

10 | In CSS, some properties are inherited, such as the color, font, and text properties. Other properties, such as border, margin, 11 | and padding, are not inherited, since it wouldn't be practical. 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/css/labs/images/pattern-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pattern-small.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/1.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/2.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/3.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/4.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/5.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/6.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/7.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/8.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/pictures/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/pictures/9.jpg -------------------------------------------------------------------------------- /frontend/css/labs/images/resume-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/images/resume-bg.jpg -------------------------------------------------------------------------------- /frontend/css/labs/lab.2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/lab.2.html -------------------------------------------------------------------------------- /frontend/css/labs/lab.3.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/lab.3.html -------------------------------------------------------------------------------- /frontend/css/labs/lab.4.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/lab.4.html -------------------------------------------------------------------------------- /frontend/css/labs/lab.5.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/labs/lab.5.html -------------------------------------------------------------------------------- /frontend/css/properties/background-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 19 | 20 | 21 | 22 |

23 | The background-image property uses the url() syntax to specify a background-image. The image is tiled along the x-axis and 24 | the y-axis. 25 |

26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/css/properties/background-shorthand.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/properties/box-model-overflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/css/properties/box-model.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /frontend/css/properties/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/properties/cat.png -------------------------------------------------------------------------------- /frontend/css/properties/float-alignment.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 14 | 15 | 16 | 17 | people 18 | people 19 |

20 | The float property is used to force content to wrap around another element. Elements can be floated to the right or the left. 21 |

22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend/css/properties/float-alignment.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 18 | 19 | 20 | 21 | people 22 | people 23 |

24 | The float property is used to force content to wrap around another element. Elements can be floated to the right or the left. 25 |

26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/css/properties/pattern-small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/properties/pattern-small.jpg -------------------------------------------------------------------------------- /frontend/css/properties/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/css/properties/pattern.jpg -------------------------------------------------------------------------------- /frontend/css/properties/tables.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
JillSmith50
EveJackson94
20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
JillSmith50
EveJackson94
26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
JillSmith50
EveJackson94
27 | 28 | 29 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
JillSmith50
EveJackson94
30 | 31 | 32 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
FirstnameLastnamePoints
EveJackson94
20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
FirstnameLastnamePoints
EveJackson94
25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/css/properties/tables.7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
JillSmith50
EveJackson94
29 | 30 | 31 | -------------------------------------------------------------------------------- /frontend/css/selectors/selectors-class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 15 | 16 | 17 |
18 | This is div. It use hilight Class. 19 |
20 |

21 | This is paragraph. 22 |

23 |

24 | This is paragraph. It use 2 Class (hilight and big-text) 25 |

26 | 27 | -------------------------------------------------------------------------------- /frontend/css/selectors/selectors-direct-child.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 10 | 11 | 12 | 13 |

Direct Child Selectors

14 |

15 | The note text is given different styles. To do this another 16 | descendant 17 | direct child 18 | selector is used, this time the selector is 19 | p.note > span.code 20 |

21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/css/selectors/selectors-grouping.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Selectors and Grouping 5 | 12 | 13 | 14 | 15 |

Style Sheet

16 |

Rule

17 |

Selector

18 |

Declaration

19 |
Property
20 |
Value
21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/css/selectors/selectors-id.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 16 | 17 | 18 | 19 |
20 | This is div. ID : hilight 21 |
22 |

23 | This is paragraph. ID : hilight 24 |

25 |

26 | This is paragraph. ID can have only one. 27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /frontend/css/selectors/selectors-universal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 11 | 12 | 13 | 14 | 15 |

Universal Selectors

16 |

17 | Universal selectors are wildcard selectors. 18 |

19 |

20 | When a universal selector is used alone, all elements within a document are selected. 21 |

22 |

23 | Even form elements are selected. 24 |

25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/css/stylesheet.css: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6 { 2 | font-family: sans-serif; 3 | color: maroon; 4 | border-bottom: 1px solid rgb(200,200,200); 5 | } -------------------------------------------------------------------------------- /frontend/googlemap/drawing/markers/images/beachflag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/googlemap/drawing/markers/images/beachflag.png -------------------------------------------------------------------------------- /frontend/googlemap/labs/images/beachflag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/googlemap/labs/images/beachflag.png -------------------------------------------------------------------------------- /frontend/googlemap/labs/lab.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/googlemap/labs/lab.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/googlemap/xml/marker.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | M1 5 |
Chaingmai
6 | 18.7061 7 | 98.9817 8 | 9 | 10 | M2 11 |
Bangkok
12 | 13.7563 13 | 100.5018 14 | 15 | 16 | M3 17 |
Phuket
18 | 7.9519 19 | 98.3381 20 | 21 | 22 | M4 23 |
Khon Kaen
24 | 16.4419 25 | 102.8360 26 | 27 | -------------------------------------------------------------------------------- /frontend/html/audio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

Audio

9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/html/audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/html/audio.mp3 -------------------------------------------------------------------------------- /frontend/html/comment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |

This is a paragraph.

13 | 14 | 15 | 16 | 19 | 20 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /frontend/html/div.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | Hello 9 |
World
10 |

11 |
12 |

London

13 |

London is the capital city of England. 14 | It is the most populous city in the United Kingdom, 15 | with a metropolitan area 16 | of over 13 million inhabitants.

17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/html/form.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

Send Message

9 |
10 | 11 | 12 |

13 | 14 | 15 |

16 | 17 |

18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/html/heading.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 5 | 6 |

This is a heading

7 |

This is a heading

8 |

This is a heading

9 |

This is a heading

10 |
This is a heading
11 |
This is a heading
12 | 13 | -------------------------------------------------------------------------------- /frontend/html/iframe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 5 | 6 | 7 |

IFrame

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /frontend/html/images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | 9 | 10 | Taylor Swift 11 | 12 | 13 | -------------------------------------------------------------------------------- /frontend/html/images/fearless.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/html/images/fearless.jpg -------------------------------------------------------------------------------- /frontend/html/images/speak-now.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/html/images/speak-now.jpg -------------------------------------------------------------------------------- /frontend/html/images/taylor-swift.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/html/images/taylor-swift.jpg -------------------------------------------------------------------------------- /frontend/html/labs/images/resume-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/html/labs/images/resume-bg.jpg -------------------------------------------------------------------------------- /frontend/html/labs/lab.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Online Resume 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /frontend/html/labs/lab.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My Online Resume 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /frontend/html/link.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Document 4 | 5 | 6 | Sanook 7 | Facebook 8 | Kapook 9 | Facebook 10 | 11 | -------------------------------------------------------------------------------- /frontend/html/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

An Unordered HTML List

9 |
    10 |
  • Coffee
    • 11 |
  • Tea
    • 12 |
  • Milk
    • 13 |
14 | 15 |

An Ordered HTML List

16 |
    17 |
  1. Coffee
    2. 18 |
  2. Tea
    3. 19 |
  3. Milk
    4. 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend/html/multipages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | About 4 | 5 | 6 | 20 |

About

21 |

This is About Page

22 | 23 | -------------------------------------------------------------------------------- /frontend/html/multipages/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Contact 4 | 5 | 6 | 20 |

Contact

21 |

This is Contact Page

22 | 23 | -------------------------------------------------------------------------------- /frontend/html/multipages/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Home 4 | 5 | 6 | 20 |

HOME

21 |

This is Home Page

22 | 23 | -------------------------------------------------------------------------------- /frontend/html/multipages/product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Product 4 | 5 | 6 | 20 |

PRODUCT

21 |

This is Product Page

22 | 23 | -------------------------------------------------------------------------------- /frontend/html/paragraphs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

This is a paragraph.

9 |

This is a paragraph.

10 |

This is another paragraph.

11 |

This is another paragraph..

12 |

This is 13 |
a para 14 |
graph with line breaks

15 | 
16 |       My Bonnie lies over the ocean.
17 |       My Bonnie lies over the sea.
18 |       My Bonnie lies over the ocean.
19 |       Oh, bring back my Bonnie to me.
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/html/span.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 | Hello 9 | World 10 | 11 |

My Important Heading

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/html/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Document 5 | 6 | 7 | 8 |

Video

9 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/bom/frames.1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/javascript/browser/bom/frames.1.html -------------------------------------------------------------------------------- /frontend/javascript/browser/bom/history.1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/javascript/browser/bom/history.1.html -------------------------------------------------------------------------------- /frontend/javascript/browser/bom/location.1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/javascript/browser/bom/location.1.html -------------------------------------------------------------------------------- /frontend/javascript/browser/bom/navigator.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /frontend/javascript/browser/bom/screen.1.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/javascript/browser/bom/screen.1.html -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/attr-prop.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/attr-prop.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/attr-prop.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/attr-prop.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Hello
5 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/attr-prop.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | link 5 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/content.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

A paragraph

5 |
A div
6 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/content.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Hello, world!
5 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/content.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |

Headline!

6 |

Martians attack people!

7 |
8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/content.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
Element
6 |
7 | 8 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |
  • The
    • 6 |
  • test
    • 7 |
8 |
    9 |
  • has
    • 10 |
  • passed
    • 11 |
12 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ZIP FILE 5 | LINK 6 | 7 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Contents

5 |
6 |
    7 |
  • Chapter 1
    • 8 |
  • Chapter 2
    • 9 |
10 |
11 | 12 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
First div
5 | 9 | 10 |
Second div
11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
First div
5 | 9 | 10 |
Second div
11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |
  1. 0
    2. 6 |
  2. 1
    3. 7 |
  3. 2
    4. 8 |
9 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
    5 |
  1. 0
    2. 6 |
  2. 1
    3. 7 |
  3. 2
    4. 8 |
9 | 10 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 |
15 | Hi there! You've read an important message. 16 |
17 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
First
5 |
Second
6 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/dom.modify.8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

After one second the contents of this page will be replaced...

5 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Hello for John!

5 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/events.9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Hello from the script!

5 | 6 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |
8 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 10 6 | 20 7 |
8 | 9 |
10 | 30 11 | 40 12 |
13 | 14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
9 | First: Enter in the input field 10 | 11 |
Second: Click "submit": 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 |
8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/form.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Button
5 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | The red text 14 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/javascript/browser/dom/style-class.7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/alert.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/arrays.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/arrays.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/condition-operators.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/console.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/constant.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/datatype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/external.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | 9 |

External scripts

10 | 11 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/external.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | 12 |

External scripts

13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/external.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

External scripts

11 | 12 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/functions.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/helloworld.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Before the script...

5 | 6 | 9 | 10 |

...After the script.

11 | 12 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/js/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/javascript/fundamentals/js/script.js -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/logical-operators.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/loops.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/loops.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/loops.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/main.js: -------------------------------------------------------------------------------- 1 | alert('Hello world'); -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/objects.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/objects.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/objects.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/objects.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/operators.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/operators.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/sample/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/string.1.js: -------------------------------------------------------------------------------- 1 | var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 2 | var sln = txt.length; 3 | 4 | var str = "HELLO WORLD"; 5 | var res = str.charAt(0); 6 | 7 | var str = "Please locate where 'locate' occurs!"; 8 | var pos = str.indexOf("locate"); 9 | 10 | var str = "Please locate where 'locate' occurs!"; 11 | var pos = str.lastIndexOf("locate"); 12 | 13 | var str = "Visit Microsoft!"; 14 | var res = str.replace("Microsoft", "OlanLab"); -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/switch.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/switch.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/javascript/fundamentals/switch.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /frontend/jquery/ajax/employee.json: -------------------------------------------------------------------------------- 1 | {"employees":[ 2 | { "firstName":"John", "lastName":"Doe" }, 3 | { "firstName":"Anna", "lastName":"Smith" } 4 | ]} -------------------------------------------------------------------------------- /frontend/jquery/ajax/employee.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | John 4 | Doe 5 | 6 | 7 | Anna 8 | Smith 9 | 10 | -------------------------------------------------------------------------------- /frontend/jquery/ajax/result.1.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Sara", 3 | "age": "22", 4 | "sex": "female" 5 | } -------------------------------------------------------------------------------- /frontend/jquery/ajax/result.2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Sara", 4 | "age": "22", 5 | "sex": "female" 6 | }, 7 | { 8 | "name": "John", 9 | "age": "25", 10 | "sex": "male" 11 | } 12 | ] -------------------------------------------------------------------------------- /frontend/jquery/ajax/result.html: -------------------------------------------------------------------------------- 1 |

THIS IS RESULT...

-------------------------------------------------------------------------------- /frontend/jquery/animation.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | 15 | 16 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /frontend/jquery/animation.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/jquery/animation.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /frontend/jquery/animation.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 12 | 13 | 14 | 15 | 16 |
Hello World
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /frontend/jquery/animation.5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 19 |
HELLO
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/jquery/attributes.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The jQuery Example 5 | 9 | 10 | 16 | 17 | 18 | 19 |
20 | This is first paragraph. 21 |

This is second paragraph.

22 |
23 | 24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/jquery/attributes.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The jQuery Example 5 | 7 | 8 | 14 | 15 | 16 | 17 |
18 | Sample image 19 | Sample image 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/jquery/attributes.9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Selecter Example 5 | 7 | 8 | 15 | 16 | 21 | 22 | 23 | 24 |

Click following line to see the result

25 |

This is first paragraph.

26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/jquery/css.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The jQuery Example 5 | 7 | 8 | 13 | 14 | 15 | 16 |
17 |
    18 |
  • list item 1
    • 19 |
  • list item 2
    • 20 |
  • list item 3
    • 21 |
  • list item 4
    • 22 |
  • list item 5
    • 23 |
  • list item 6
    • 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /frontend/jquery/images/dog1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/jquery/images/dog1.jpg -------------------------------------------------------------------------------- /frontend/jquery/images/dog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/jquery/images/dog2.jpg -------------------------------------------------------------------------------- /frontend/jquery/jquery.cdn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The jQuery Example 5 | 6 | 11 | 16 | 17 | 18 | 19 |
20 | Click on this to see a dialogue box. 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /frontend/jquery/jquery.install.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The jQuery Example 5 | 6 | 7 | 12 | 13 | 14 | 15 |
16 | Click on this to see a dialogue box. 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/jquery/sample/main.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Selecter Example 5 | 8 | 9 | 10 | 11 | 12 | 17 |
18 |

This is first division of the DOM.

19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /frontend/jquery/traversing.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The JQuery Example 5 | 7 | 8 | 13 | 14 | 19 | 20 | 21 | 22 |

This is 1st paragraph and 23 | THIS IS RED 24 |

25 |

This is 2nd paragraph and 26 | THIS IS ALSO RED 27 |

28 | 29 | 30 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | 'env', 5 | { 6 | loose: true, 7 | modules: false, 8 | exclude: ['transform-es2015-typeof-symbol'] 9 | } 10 | ] 11 | ], 12 | plugins: [ 13 | process.env.ROLLUP && 'external-helpers', 14 | process.env.PLUGINS && 'transform-es2015-modules-strip' 15 | ].filter(Boolean) 16 | }; 17 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | [*.py] 17 | indent_size = 4 18 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.min.js 2 | **/vendor/* 3 | **/dist/* 4 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.gitattributes: -------------------------------------------------------------------------------- 1 | # Enforce Unix newlines 2 | *.css text eol=lf 3 | *.html text eol=lf 4 | *.js text eol=lf 5 | *.json text eol=lf 6 | *.md text eol=lf 7 | *.rb text eol=lf 8 | *.scss text eol=lf 9 | *.svg text eol=lf 10 | *.txt text eol=lf 11 | *.yml text eol=lf 12 | # Don't diff or textually merge source maps 13 | *.map binary 14 | 15 | bootstrap.css linguist-vendored=false 16 | bootstrap.js linguist-vendored=false 17 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore docs files 2 | _gh_pages 3 | _site 4 | 5 | # Ignore ruby files 6 | .ruby-version 7 | .bundle 8 | vendor/cache 9 | vendor/bundle 10 | 11 | # Numerous always-ignore extensions 12 | *.diff 13 | *.err 14 | *.log 15 | *.orig 16 | *.rej 17 | *.swo 18 | *.swp 19 | *.vi 20 | *.zip 21 | *~ 22 | 23 | # OS or Editor folders 24 | ._* 25 | .cache 26 | .DS_Store 27 | .idea 28 | .project 29 | .settings 30 | .tmproj 31 | *.esproj 32 | *.sublime-project 33 | *.sublime-workspace 34 | nbproject 35 | Thumbs.db 36 | 37 | # Komodo 38 | .komodotools 39 | *.komodoproject 40 | 41 | # Jekyll metadata and extra config file for `github` script 42 | docs/.jekyll-metadata 43 | twbsconfig.yml 44 | 45 | # Folders to ignore 46 | node_modules 47 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.hound.yml: -------------------------------------------------------------------------------- 1 | fail_on_violations: true 2 | 3 | stylelint: 4 | config_file: build/.stylelintrc 5 | enabled: true 6 | ignore_file: .houndignore 7 | 8 | eslint: 9 | config_file: js/.eslintrc.json 10 | ignore_file: .houndignore 11 | 12 | scss: 13 | enabled: false 14 | 15 | jshint: 16 | enabled: false 17 | 18 | ruby: 19 | enabled: false 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/.houndignore: -------------------------------------------------------------------------------- 1 | **/*.min.js 2 | **/vendor/* 3 | **/dist/* 4 | js/tests/* 5 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/CNAME: -------------------------------------------------------------------------------- 1 | getbootstrap.com 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | group :development, :test do 4 | gem 'jekyll', '~> 3.6.0' 5 | gem 'jekyll-redirect-from', '~> 0.12.1' 6 | gem 'jekyll-sitemap', '~> 1.1.1' 7 | gem 'jekyll-toc', '~> 0.4.0.rc2' 8 | end 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/breakpoints.yml: -------------------------------------------------------------------------------- 1 | - breakpoint: xs 2 | abbr: "" 3 | name: Extra small 4 | min-width: 0px 5 | container: "" 6 | 7 | - breakpoint: sm 8 | abbr: -sm 9 | name: Small 10 | min-width: 576px 11 | container: 540px 12 | 13 | - breakpoint: md 14 | abbr: -md 15 | name: Medium 16 | min-width: 768px 17 | container: 720px 18 | 19 | - breakpoint: lg 20 | abbr: -lg 21 | name: Large 22 | min-width: 992px 23 | container: 960px 24 | 25 | - breakpoint: xl 26 | abbr: -xl 27 | name: Extra large 28 | min-width: 1200px 29 | container: 1140px 30 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/colors.yml: -------------------------------------------------------------------------------- 1 | - name: blue 2 | hex: "#007bff" 3 | - name: indigo 4 | hex: "#6610f2" 5 | - name: purple 6 | hex: "#6f42c1" 7 | - name: pink 8 | hex: "#e83e8c" 9 | - name: red 10 | hex: "#dc3545" 11 | - name: orange 12 | hex: "#fd7e14" 13 | - name: yellow 14 | hex: "#ffc107" 15 | - name: green 16 | hex: "#28a745" 17 | - name: teal 18 | hex: "#20c997" 19 | - name: cyan 20 | hex: "#17a2b8" 21 | - name: white 22 | hex: "#fff" 23 | - name: gray 24 | hex: "#868e96" 25 | - name: gray-dark 26 | hex: "#343a40" 27 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/grays.yml: -------------------------------------------------------------------------------- 1 | - name: 100 2 | hex: "#f8f9fa" 3 | - name: 200 4 | hex: "#e9ecef" 5 | - name: 300 6 | hex: "#dee2e6" 7 | - name: 400 8 | hex: "#ced4da" 9 | - name: 500 10 | hex: "#adb5bd" 11 | - name: 600 12 | hex: "#868e96" 13 | - name: 700 14 | hex: "#495057" 15 | - name: 800 16 | hex: "#343a40" 17 | - name: 900 18 | hex: "#212529" 19 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/showcase.yml: -------------------------------------------------------------------------------- 1 | - name: Lyft 2 | url: https://www.lyft.com 3 | expo_url: https://expo.getbootstrap.com/2014/10/29/lyft/ 4 | img: lyft 5 | 6 | - name: Vogue 7 | url: http://www.vogue.com 8 | expo_url: https://expo.getbootstrap.com/2014/09/30/vogue/ 9 | img: vogue 10 | 11 | - name: Riot Design 12 | url: https://riot.design/en/ 13 | expo_url: https://expo.getbootstrap.com/2014/03/13/riot-design/ 14 | img: riot 15 | 16 | - name: Newsweek 17 | url: http://www.newsweek.com/ 18 | expo_url: https://expo.getbootstrap.com/2014/02/12/newsweek/ 19 | img: newsweek 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/theme-colors.yml: -------------------------------------------------------------------------------- 1 | - name: primary 2 | hex: "#007bff" 3 | - name: secondary 4 | hex: "#868e96" 5 | - name: success 6 | hex: "#28a745" 7 | - name: danger 8 | hex: "#dc3545" 9 | - name: warning 10 | hex: "#ffc107" 11 | - name: info 12 | hex: "#17a2b8" 13 | - name: light 14 | hex: "#f8f9fa" 15 | - name: dark 16 | hex: "#343a40" 17 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_data/translations.yml: -------------------------------------------------------------------------------- 1 | - name: 中文(繁體) 2 | code: zh-tw 3 | description: Bootstrap 4 繁體中文手冊 4 | url: http://bootstrap.hexschool.com/ 5 | 6 | - name: Chinese 7 | code: zh 8 | description: Bootstrap 4 中文文档教程 9 | url: http://wiki.jikexueyuan.com/project/bootstrap4/ 10 | 11 | - name: Brazilian Portuguese 12 | code: pt-BR 13 | description: Bootstrap 4 Português do Brasil 14 | url: https://bootstrapbrasil.github.io/v4/ 15 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/ads.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/callout-danger-async-methods.md: -------------------------------------------------------------------------------- 1 | {% callout danger %} 2 | #### Asynchronous methods and transitions 3 | 4 | All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**. 5 | 6 | [See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) 7 | {% endcallout %} 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/callout-warning-color-assistive-technologies.md: -------------------------------------------------------------------------------- 1 | {% callout warning %} 2 | #### Conveying meaning to assistive technologies 3 | 4 | Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. 5 | {% endcallout %} 6 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/icons/download.svg: -------------------------------------------------------------------------------- 1 | Download icon 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/icons/import.svg: -------------------------------------------------------------------------------- 1 | Import icon 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/icons/lightning.svg: -------------------------------------------------------------------------------- 1 | Lightning icon 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_includes/icons/menu.svg: -------------------------------------------------------------------------------- 1 | Menu 2 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include header.html %} 5 | 6 | 7 | 8 |
9 | Skip to main content 10 |
11 | 12 | 13 | {% include docs-navbar.html %} 14 | 15 | {% if page.layout == "simple" %} 16 | {{ content }} 17 | {% else %} 18 |
19 | {{ content }} 20 |
21 | {% endif %} 22 | 23 | {% include footer.html %} 24 | {% include scripts.html %} 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include header.html %} 5 | 6 | 7 | 8 |
9 | Skip to main content 10 |
11 | 12 | 13 | {% include docs-navbar.html %} 14 | 15 | {{ content }} 16 | 17 | {% include footer.html %} 18 | {% include scripts.html %} 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_layouts/simple.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 |
7 |

{{ page.title }}

8 |

{{ page.description }}

9 | {% include ads.html %} 10 | {{ content }} 11 |
12 |
13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/_plugins/markdown-block.rb: -------------------------------------------------------------------------------- 1 | module Jekyll 2 | class MarkdownBlock < Liquid::Block 3 | alias_method :render_block, :render 4 | 5 | def initialize(tag_name, markup, tokens) 6 | super 7 | end 8 | 9 | # Uses the default Jekyll markdown parser to 10 | # parse the contents of this block 11 | # 12 | def render(context) 13 | site = context.registers[:site] 14 | converter = site.find_converter_instance(::Jekyll::Converters::Markdown) 15 | converter.convert(render_block(context)) 16 | end 17 | end 18 | end 19 | 20 | Liquid::Template.register_tag('markdown', Jekyll::MarkdownBlock) 21 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/brand/bootstrap-social-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/brand/bootstrap-social-logo.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/brand/bootstrap-social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/brand/bootstrap-social.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/bootstrap-stack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/bootstrap-stack.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/bootstrap-themes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/bootstrap-themes.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/android-chrome-192x192.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/android-chrome-512x512.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/apple-touch-icon.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/browserconfig.xml: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | 7 | 8 | #563d7c 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/favicon-16x16.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/favicon-32x32.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/manifest.json: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | { 4 | "name": "Bootstrap", 5 | "short_name": "Bootstrap", 6 | "icons": [ 7 | { 8 | "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-192x192.png", 9 | "sizes": "192x192", 10 | "type": "image/png" 11 | }, 12 | { 13 | "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-512x512.png", 14 | "sizes": "512x512", 15 | "type": "image/png" 16 | } 17 | ], 18 | "start_url": "/", 19 | "theme_color": "#563d7c", 20 | "background_color": "#563d7c", 21 | "display": "standalone" 22 | } 23 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-144x144.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-150x150.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-310x150.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-310x310.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/assets/img/favicons/mstile-70x70.png -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_anchor.scss: -------------------------------------------------------------------------------- 1 | .anchorjs-link { 2 | font-weight: 400; 3 | color: rgba($link-color, .5); 4 | transition: color .16s linear; 5 | 6 | &:hover { 7 | color: $link-color; 8 | text-decoration: none; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_browser-bugs.scss: -------------------------------------------------------------------------------- 1 | // Wall of Browser Bugs 2 | // 3 | // Better display for the responsive table on the Wall of Browser Bugs. 4 | 5 | .bd-browser-bugs { 6 | td p { 7 | margin-bottom: 0; 8 | } 9 | th:first-child { 10 | width: 18%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Buttons 2 | // 3 | // Custom buttons for the docs. 4 | 5 | .btn-bd-purple { 6 | font-weight: 500; 7 | color: $bd-purple-bright; 8 | border-color: $bd-purple-bright; 9 | 10 | &:hover, 11 | &:active { 12 | color: #fff; 13 | background-color: $bd-purple-bright; 14 | border-color: $bd-purple-bright; 15 | } 16 | } 17 | 18 | .btn-bd-yellow { 19 | font-weight: 500; 20 | color: $bd-yellow; 21 | border-color: $bd-yellow; 22 | 23 | &:hover, 24 | &:active { 25 | color: $bd-graphite; 26 | background-color: $bd-yellow; 27 | border-color: $bd-yellow; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Docs color palette classes 3 | // 4 | 5 | @each $color, $value in $colors { 6 | .swatch-#{$color} { 7 | color: color-yiq($value); 8 | background-color: #{$value}; 9 | } 10 | } 11 | 12 | @each $color, $value in $theme-colors { 13 | .swatch-#{$color} { 14 | color: color-yiq($value); 15 | background-color: #{$value}; 16 | } 17 | } 18 | 19 | @each $color, $value in $grays { 20 | .swatch-#{$color} { 21 | color: color-yiq($value); 22 | background-color: #{$value}; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_examples.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Examples 3 | // 4 | 5 | .bd-examples .img-thumbnail { 6 | margin-bottom: .75rem; 7 | } 8 | .bd-examples h4 { 9 | margin-bottom: .25rem; 10 | } 11 | .bd-examples p { 12 | margin-bottom: 1.25rem; 13 | } 14 | 15 | @media (max-width: 480px) { 16 | .bd-examples { 17 | margin-right: -.75rem; 18 | margin-left: -.75rem; 19 | } 20 | .bd-examples > [class^="col-"] { 21 | padding-right: .75rem; 22 | padding-left: .75rem; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_featured-sites.scss: -------------------------------------------------------------------------------- 1 | .bd-featured-sites { 2 | margin-right: -1px; 3 | margin-left: -1px; 4 | } 5 | .bd-featured-sites .col-6 { 6 | padding: 1px; 7 | } 8 | .bd-featured-sites .img-fluid { 9 | margin-top: 0; 10 | } 11 | 12 | @media (min-width: 768px) { 13 | .bd-featured-sites .col-sm-3:first-child img { 14 | border-top-left-radius: .25rem; 15 | border-bottom-left-radius: .25rem; 16 | } 17 | .bd-featured-sites .col-sm-3:last-child img { 18 | border-top-right-radius: .25rem; 19 | border-bottom-right-radius: .25rem; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_footer.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Footer 3 | // 4 | 5 | .bd-footer { 6 | font-size: 85%; 7 | text-align: center; 8 | background-color: #f7f7f7; 9 | 10 | a { 11 | font-weight: 500; 12 | color: $gray-700; 13 | 14 | &:hover, 15 | &:focus { 16 | color: $link-color; 17 | } 18 | } 19 | 20 | p { 21 | margin-bottom: 0; 22 | } 23 | 24 | @include media-breakpoint-up(sm) { 25 | text-align: left; 26 | } 27 | } 28 | 29 | .bd-footer-links { 30 | padding-left: 0; 31 | margin-bottom: 1rem; 32 | 33 | li { 34 | display: inline-block; 35 | 36 | + li { 37 | margin-left: 1rem; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_responsive-tests.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive tests 3 | // 4 | 5 | // Responsive (scrollable) doc tables 6 | .table-responsive .highlight pre { 7 | white-space: normal; 8 | } 9 | 10 | // Utility classes table 11 | .bd-table th small { 12 | display: block; 13 | font-weight: 400; 14 | color: #999; 15 | } 16 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_skiplink.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-max-id 2 | 3 | #skippy { 4 | display: block; 5 | padding: 1em; 6 | color: #fff; 7 | background-color: $bd-purple; 8 | outline: 0; 9 | 10 | .skiplink-text { 11 | padding: .5em; 12 | outline: 1px dotted; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_team.scss: -------------------------------------------------------------------------------- 1 | .bd-team { 2 | margin-bottom: 1.5rem; 3 | 4 | .team-member { 5 | line-height: 2rem; 6 | color: #555; 7 | } 8 | 9 | .team-member:hover, 10 | .team-member:focus { 11 | color: #333; 12 | } 13 | 14 | .team-member:hover { 15 | text-decoration: none; 16 | } 17 | 18 | .github-btn { 19 | float: right; 20 | width: 180px; 21 | height: 1.25rem; 22 | margin-top: .25rem; 23 | border: 0; 24 | } 25 | 26 | img { 27 | float: left; 28 | width: 2rem; 29 | margin-right: .5rem; 30 | border-radius: .25rem; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/assets/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Local docs variables 2 | $bd-purple: #563d7c; 3 | $bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); 4 | $bd-purple-light: #cdbfe3; 5 | $bd-graphite: #2a2730; 6 | $bd-yellow: #ffe484; 7 | $bd-danger: #d9534f; 8 | $bd-warning: #f0ad4e; 9 | $bd-info: #5bc0de; 10 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/bower.json: -------------------------------------------------------------------------------- 1 | @$% Not a Bower package. Use a better package management tool instead. ^&* -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/build/.htmllintrc: -------------------------------------------------------------------------------- 1 | { 2 | "attr-bans": ["align", "background", "bgcolor", "border", "frameborder", "longdesc", "marginwidth", "marginheight", "scrolling"], 3 | "attr-name-style": false, 4 | "attr-no-unsafe-char": false, 5 | "class-style": "dash", 6 | "doctype-first": true, 7 | "doctype-html5": true, 8 | "fig-req-figcaption": false, 9 | "html-valid-content-model": false, 10 | "id-class-ignore-regex": "(onclick|content|[a-z]+([A-Z][a-z])+)", 11 | "id-class-style": "dash", 12 | "img-req-src": false, 13 | "img-req-alt": false, 14 | "indent-style": "spaces", 15 | "indent-width": 2, 16 | "spec-char-escape": false, 17 | "tag-bans": ["b", "i"], 18 | "title-max-len": false 19 | } 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/build/gcp-key.json.enc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/build/gcp-key.json.enc -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/build/postcss.config.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | module.exports = (ctx) => ({ 4 | map: ctx.file.dirname.includes('examples') ? false : { 5 | inline: false, 6 | annotation: true, 7 | sourcesContent: true 8 | }, 9 | plugins: { 10 | autoprefixer: {} 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/build/workbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "globDirectory": "./", 3 | "globPatterns": [ 4 | "_gh_pages/**/*.{html,css,js,json,png,jpg}" 5 | ], 6 | "swSrc": "./sw.js", 7 | "swDest": "./_gh_pages/sw.js" 8 | } 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/about/translations.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Translations 4 | description: Links to community-translated Bootstrap documentation sites. 5 | group: about 6 | --- 7 | 8 | Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date. 9 | 10 | 15 | 16 | **We don't help organize or host translations, we just link to them.** 17 | 18 | Finished a new or better translation? Open a pull request to add it to our list. 19 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../build/.stylelintrc", 3 | "rules": { 4 | "at-rule-no-vendor-prefix": null, 5 | "comment-empty-line-before": null, 6 | "media-feature-name-no-vendor-prefix": null, 7 | "property-no-vendor-prefix": null, 8 | "selector-no-qualifying-type": null, 9 | "selector-no-vendor-prefix": null, 10 | "value-no-vendor-prefix": null 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/grid/grid.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 2rem; 3 | padding-bottom: 2rem; 4 | } 5 | 6 | h3 { 7 | margin-top: 2rem; 8 | } 9 | 10 | .row { 11 | margin-bottom: 1rem; 12 | } 13 | .row .row { 14 | margin-top: 1rem; 15 | margin-bottom: 0; 16 | } 17 | [class*="col-"] { 18 | padding-top: 1rem; 19 | padding-bottom: 1rem; 20 | background-color: rgba(86,61,124,.15); 21 | border: 1px solid rgba(86,61,124,.2); 22 | } 23 | 24 | hr { 25 | margin-top: 2rem; 26 | margin-bottom: 2rem; 27 | } 28 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/jumbotron/jumbotron.css: -------------------------------------------------------------------------------- 1 | /* Move down content because we have a fixed navbar that is 3.5rem tall */ 2 | body { 3 | padding-top: 3.5rem; 4 | } 5 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/navbar-top-fixed/navbar-top-fixed.css: -------------------------------------------------------------------------------- 1 | /* Show it is fixed to the top */ 2 | body { 3 | min-height: 75rem; 4 | padding-top: 4.5rem; 5 | } 6 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/navbar-top/navbar-top.css: -------------------------------------------------------------------------------- 1 | /* Show it's not fixed to the top */ 2 | body { 3 | min-height: 75rem; 4 | } 5 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/navbars/navbar.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 20px; 3 | } 4 | 5 | .navbar { 6 | margin-bottom: 20px; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/offcanvas/offcanvas.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 'use strict' 3 | 4 | $('[data-toggle="offcanvas"]').on('click', function () { 5 | $('.row-offcanvas').toggleClass('active') 6 | }) 7 | }) 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/album.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/album.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/blog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/blog.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/carousel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/carousel.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/cover.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/dashboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/dashboard.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/grid.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/jumbotron-narrow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/jumbotron-narrow.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/jumbotron.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/jumbotron.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/justified-nav.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/justified-nav.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-bottom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-bottom.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-fixed.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-fixed.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-static.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar-static.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/navbar.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/offcanvas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/offcanvas.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sign-in.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sign-in.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/starter-template.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/starter-template.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sticky-footer-navbar.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sticky-footer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/screenshots/sticky-footer.jpg -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/starter-template/starter-template.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 5rem; 3 | } 4 | .starter-template { 5 | padding: 3rem 1.5rem; 6 | text-align: center; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/examples/tooltip-viewport/tooltip-viewport.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 1200px; 3 | } 4 | .tooltip { 5 | min-width: 250px; 6 | max-width: 500px; 7 | } 8 | .tooltip .tooltip-inner { 9 | min-width: 250px; 10 | max-width: 500px; 11 | min-height: 100px; 12 | text-align: left; 13 | } 14 | .container-viewport { 15 | position: absolute; 16 | top: 100px; 17 | right: 250px; 18 | left: 250px; 19 | height: 300px; 20 | background-color: #eee; 21 | } 22 | .btn-bottom { 23 | position: absolute; 24 | bottom: 0; 25 | left: 0; 26 | } 27 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/extend/approach.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Approach 4 | --- 5 | 6 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/extend/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Extend 4 | --- 5 | 6 | todo: this entire page 7 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/getting-started/best-practices.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Best practices 4 | description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap. 5 | group: getting-started 6 | --- 7 | 8 | We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves. 9 | 10 | {% callout info %} 11 | **Heads up!** This copy is a work in progress. 12 | {% endcallout %} 13 | 14 | ### General outline 15 | 16 | - Working with CSS 17 | - Working with Sass files 18 | - Building new CSS components 19 | - Working with flexbox 20 | - Ask in [Slack](https://bootstrap-slack.herokuapp.com/) 21 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/docs/4.0/utilities/close-icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: docs 3 | title: Close icon 4 | description: Use a generic close icon for dismissing content like modals and alerts. 5 | group: utilities 6 | toc: true 7 | --- 8 | 9 | **Be sure to include text for screen readers**, as we've done with `aria-label`. 10 | 11 | {% example html %} 12 | 15 | {% endexample %} 16 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/bootstrap-4.0.0-beta.2/favicon.ico -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/package.js: -------------------------------------------------------------------------------- 1 | // package metadata file for Meteor.js 2 | 3 | /* global Package:true */ 4 | 5 | Package.describe({ 6 | name: 'twbs:bootstrap', // https://atmospherejs.com/twbs/bootstrap 7 | summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.', 8 | version: '4.0.0-beta.2', 9 | git: 'https://github.com/twbs/bootstrap.git' 10 | }); 11 | 12 | Package.onUse(function (api) { 13 | api.versionsFrom('METEOR@1.0'); 14 | api.use('jquery', 'client'); 15 | api.addFiles([ 16 | 'dist/css/bootstrap.css', 17 | 'dist/js/bootstrap.js' 18 | ], 'client'); 19 | }); 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/robots.txt: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | # www.robotstxt.org/ 5 | 6 | # Allow crawling of all content 7 | User-agent: * 8 | Disallow: 9 | Sitemap: {{ site.url }}/sitemap.xml 10 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap", 3 | "description": "The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.", 4 | "tags": ["bootstrap", "grid", "typography", "buttons", "ui", "responsive-web-design"] 5 | } 6 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/_jumbotron.scss: -------------------------------------------------------------------------------- 1 | .jumbotron { 2 | padding: $jumbotron-padding ($jumbotron-padding / 2); 3 | margin-bottom: $jumbotron-padding; 4 | background-color: $jumbotron-bg; 5 | @include border-radius($border-radius-lg); 6 | 7 | @include media-breakpoint-up(sm) { 8 | padding: ($jumbotron-padding * 2) $jumbotron-padding; 9 | } 10 | } 11 | 12 | .jumbotron-fluid { 13 | padding-right: 0; 14 | padding-left: 0; 15 | @include border-radius(0); 16 | } 17 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: flex; 3 | align-items: flex-start; 4 | } 5 | 6 | .media-body { 7 | flex: 1; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/_root.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // Custom variable values only support SassScript inside `#{}`. 3 | @each $color, $value in $colors { 4 | --#{$color}: #{$value}; 5 | } 6 | 7 | @each $color, $value in $theme-colors { 8 | --#{$color}: #{$value}; 9 | } 10 | 11 | @each $bp, $value in $grid-breakpoints { 12 | --breakpoint-#{$bp}: #{$value}; 13 | } 14 | 15 | // Use `inspect` for lists so that quoted items keep the quotes. 16 | // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 17 | --font-family-sans-serif: #{inspect($font-family-sans-serif)}; 18 | --font-family-monospace: #{inspect($font-family-monospace)}; 19 | } 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/_transitions.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable selector-no-qualifying-type 2 | 3 | .fade { 4 | opacity: 0; 5 | @include transition($transition-fade); 6 | 7 | &.show { 8 | opacity: 1; 9 | } 10 | } 11 | 12 | .collapse { 13 | display: none; 14 | &.show { 15 | display: block; 16 | } 17 | } 18 | 19 | tr { 20 | &.collapse.show { 21 | display: table-row; 22 | } 23 | } 24 | 25 | tbody { 26 | &.collapse.show { 27 | display: table-row-group; 28 | } 29 | } 30 | 31 | .collapsing { 32 | position: relative; 33 | height: 0; 34 | overflow: hidden; 35 | @include transition($transition-collapse); 36 | } 37 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "utilities/align"; 2 | @import "utilities/background"; 3 | @import "utilities/borders"; 4 | @import "utilities/clearfix"; 5 | @import "utilities/display"; 6 | @import "utilities/embed"; 7 | @import "utilities/flex"; 8 | @import "utilities/float"; 9 | @import "utilities/position"; 10 | @import "utilities/screenreaders"; 11 | @import "utilities/sizing"; 12 | @import "utilities/spacing"; 13 | @import "utilities/text"; 14 | @import "utilities/visibility"; 15 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/bootstrap-reboot.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com) 3 | * Copyright 2011-2017 The Bootstrap Authors 4 | * Copyright 2011-2017 Twitter, Inc. 5 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) 7 | */ 8 | 9 | @import "functions"; 10 | @import "variables"; 11 | @import "mixins"; 12 | @import "reboot"; 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_alert.scss: -------------------------------------------------------------------------------- 1 | @mixin alert-variant($background, $border, $color) { 2 | color: $color; 3 | @include gradient-bg($background); 4 | border-color: $border; 5 | 6 | hr { 7 | border-top-color: darken($border, 5%); 8 | } 9 | 10 | .alert-link { 11 | color: darken($color, 10%); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_background-variant.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Contextual backgrounds 4 | 5 | @mixin bg-variant($parent, $color) { 6 | #{$parent} { 7 | background-color: $color !important; 8 | } 9 | a#{$parent} { 10 | @include hover-focus { 11 | background-color: darken($color, 10%) !important; 12 | } 13 | } 14 | } 15 | 16 | @mixin bg-gradient-variant($parent, $color) { 17 | #{$parent} { 18 | background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_badge.scss: -------------------------------------------------------------------------------- 1 | @mixin badge-variant($bg) { 2 | color: color-yiq($bg); 3 | background-color: $bg; 4 | 5 | &[href] { 6 | @include hover-focus { 7 | color: color-yiq($bg); 8 | text-decoration: none; 9 | background-color: darken($bg, 10%); 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin box-shadow($shadow...) { 2 | @if $enable-shadows { 3 | box-shadow: $shadow; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() { 2 | &::after { 3 | display: block; 4 | clear: both; 5 | content: ""; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_float.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @mixin float-left { 4 | float: left !important; 5 | } 6 | @mixin float-right { 7 | float: right !important; 8 | } 9 | @mixin float-none { 10 | float: none !important; 11 | } 12 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_list-group.scss: -------------------------------------------------------------------------------- 1 | // List Groups 2 | 3 | @mixin list-group-item-variant($state, $background, $color) { 4 | .list-group-item-#{$state} { 5 | color: $color; 6 | background-color: $background; 7 | } 8 | 9 | a.list-group-item-#{$state}, 10 | button.list-group-item-#{$state} { 11 | color: $color; 12 | 13 | @include hover-focus { 14 | color: $color; 15 | background-color: darken($background, 5%); 16 | } 17 | 18 | &.active { 19 | color: #fff; 20 | background-color: $color; 21 | border-color: $color; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | // Lists 2 | 3 | // Unstyled keeps list items block level, just removes default browser padding and list-style 4 | @mixin list-unstyled { 5 | padding-left: 0; 6 | list-style: none; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_nav-divider.scss: -------------------------------------------------------------------------------- 1 | // Horizontal dividers 2 | // 3 | // Dividers (basically an hr) within dropdowns and nav lists 4 | 5 | @mixin nav-divider($color: #e5e5e5) { 6 | height: 0; 7 | margin: ($spacer / 2) 0; 8 | overflow: hidden; 9 | border-top: 1px solid $color; 10 | } 11 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_navbar-align.scss: -------------------------------------------------------------------------------- 1 | // Navbar vertical align 2 | // 3 | // Vertically center elements in the navbar. 4 | // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` 5 | // to calculate the appropriate top margin. 6 | 7 | // @mixin navbar-vertical-align($element-height) { 8 | // margin-top: (($navbar-height - $element-height) / 2); 9 | // margin-bottom: (($navbar-height - $element-height) / 2); 10 | // } 11 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_pagination.scss: -------------------------------------------------------------------------------- 1 | // Pagination 2 | 3 | @mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { 4 | .page-link { 5 | padding: $padding-y $padding-x; 6 | font-size: $font-size; 7 | line-height: $line-height; 8 | } 9 | 10 | .page-item { 11 | &:first-child { 12 | .page-link { 13 | @include border-left-radius($border-radius); 14 | } 15 | } 16 | &:last-child { 17 | .page-link { 18 | @include border-right-radius($border-radius); 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @mixin reset-text { 2 | font-family: $font-family-base; 3 | // We deliberately do NOT reset font-size or word-wrap. 4 | font-style: normal; 5 | font-weight: $font-weight-normal; 6 | line-height: $line-height-base; 7 | text-align: left; // Fallback for where `start` is not supported 8 | text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties 9 | text-decoration: none; 10 | text-shadow: none; 11 | text-transform: none; 12 | letter-spacing: normal; 13 | word-break: normal; 14 | word-spacing: normal; 15 | white-space: normal; 16 | line-break: auto; 17 | } 18 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | // Resize anything 2 | 3 | @mixin resizable($direction) { 4 | overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` 5 | resize: $direction; // Options: horizontal, vertical, both 6 | } 7 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | @mixin size($width, $height: $width) { 4 | width: $width; 5 | height: $height; 6 | } 7 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Typography 4 | 5 | @mixin text-emphasis-variant($parent, $color) { 6 | #{$parent} { 7 | color: $color !important; 8 | } 9 | a#{$parent} { 10 | @include hover-focus { 11 | color: darken($color, 10%) !important; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | // CSS image replacement 2 | @mixin text-hide() { 3 | font: 0/0 a; 4 | color: transparent; 5 | text-shadow: none; 6 | background-color: transparent; 7 | border: 0; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_text-truncate.scss: -------------------------------------------------------------------------------- 1 | // Text truncate 2 | // Requires inline-block or block for proper styling 3 | 4 | @mixin text-truncate() { 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_transition.scss: -------------------------------------------------------------------------------- 1 | @mixin transition($transition...) { 2 | @if $enable-transitions { 3 | @if length($transition) == 0 { 4 | transition: $transition-base; 5 | } @else { 6 | transition: $transition; 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/mixins/_visibility.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Visibility 4 | 5 | @mixin invisible($visibility) { 6 | visibility: $visibility !important; 7 | } 8 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_align.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | .align-baseline { vertical-align: baseline !important; } // Browser default 4 | .align-top { vertical-align: top !important; } 5 | .align-middle { vertical-align: middle !important; } 6 | .align-bottom { vertical-align: bottom !important; } 7 | .align-text-bottom { vertical-align: text-bottom !important; } 8 | .align-text-top { vertical-align: text-top !important; } 9 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_background.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | @each $color, $value in $theme-colors { 4 | @include bg-variant(".bg-#{$color}", $value); 5 | } 6 | 7 | @if $enable-gradients { 8 | @each $color, $value in $theme-colors { 9 | @include bg-gradient-variant(".bg-gradient-#{$color}", $value); 10 | } 11 | } 12 | 13 | .bg-white { 14 | background-color: $white !important; 15 | } 16 | 17 | .bg-transparent { 18 | background-color: transparent !important; 19 | } 20 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | @include clearfix(); 3 | } 4 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | @each $breakpoint in map-keys($grid-breakpoints) { 2 | @include media-breakpoint-up($breakpoint) { 3 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); 4 | 5 | .float#{$infix}-left { @include float-left; } 6 | .float#{$infix}-right { @include float-right; } 7 | .float#{$infix}-none { @include float-none; } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_screenreaders.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Screenreaders 3 | // 4 | 5 | .sr-only { 6 | @include sr-only(); 7 | } 8 | 9 | .sr-only-focusable { 10 | @include sr-only-focusable(); 11 | } 12 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | // stylelint-disable declaration-no-important 2 | 3 | // Width and height 4 | 5 | @each $prop, $abbrev in (width: w, height: h) { 6 | @each $size, $length in $sizes { 7 | .#{$abbrev}-#{$size} { #{$prop}: $length !important; } 8 | } 9 | } 10 | 11 | .mw-100 { max-width: 100% !important; } 12 | .mh-100 { max-height: 100% !important; } 13 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/scss/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Visibility utilities 3 | // 4 | 5 | .visible { 6 | @include invisible(visible); 7 | } 8 | 9 | .invisible { 10 | @include invisible(hidden); 11 | } 12 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-4.0.0-beta.2/sw.js: -------------------------------------------------------------------------------- 1 | self.importScripts('/assets/js/vendor/{fileName}') 2 | 3 | const workboxSW = new self.WorkboxSW() 4 | workboxSW.precache([]) 5 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-cdn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /frontend/responsive/bootstrap-install.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /frontend/responsive/components/images/train-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/components/images/train-01.jpg -------------------------------------------------------------------------------- /frontend/responsive/components/images/train-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/components/images/train-02.jpg -------------------------------------------------------------------------------- /frontend/responsive/components/images/train-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/components/images/train-03.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/slides/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/slides/1.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/slides/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/slides/2.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/slides/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/slides/3.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/slides/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/slides/4.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/thumbnails/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/thumbnails/5.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/thumbnails/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/thumbnails/6.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/thumbnails/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/thumbnails/7.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/images/thumbnails/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/responsive/labs/images/thumbnails/8.jpg -------------------------------------------------------------------------------- /frontend/responsive/labs/lab.1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/responsive/labs/lab.2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/responsive/labs/lab.3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/responsive/labs/lab.4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Contact 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /frontend/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/olanlab/web-development/9480e5f59d34b8d24e7b5c85111f0bea12ac4cdc/frontend/video.mp4 --------------------------------------------------------------------------------