CodemySite_Web development

When you start to study Front-end development, you will learn HTML, CSS, Javascript and then the other frame for easy building such as React, Angular, VUE.  The Javascript knowledge is the basis for a front-end developer. Even when you connect with React for front-end or Node.js for back-end. So I am trying to practice Javascript with small projects to improve my skills. Actually, it's never outdated for these years, the basic knowledge contains in the projects usually. I choose the 10 Javascript projects in 10 hours of Florin Pop, and I can not believe I really spent a whole day doing it. For viewers who would like to get more details. here is his Github  code. And I also will show the code below for easy checking. 1.countdown timer See the Pen countdown timer by Yifang Di ( @diyifang ) on CodePen . 2.Quiz App See the Pen Quiz App by Yifang Di ( @diyifang ) on CodePen . 3. recipe app See the Pen Recipe App by Yifang Di ( @diyifang ) on CodePen . 4....

Not all websites' layouts are obsessed with Bootstrap now. More ways to show the power of CSS nowadays. The grid layout can be done with float ,flexbox or grid. Also some of the browsers don't support flexbox and grid,but the float is always works widely. Here is the responsive grid template with float , which contains most of layouts display. See the Pen grid template with float by Yifang Di ( @diyifang ) on CodePen . And recently I learned flexbox through a fun game. check  here ,it's free.

Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 一次性导入： Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。 <!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） --> <script src="js/bootstrap.min.js"></script> 导入fromCDN <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 单独导入： 为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：    ☑   动画过渡（Transitions）: 对应的插件文件 “transition.js”    ☑   模态弹窗（Modal）: 对应的插件文件 “modal.js”    ☑   下拉菜单（Dropdown）： 对应的插件文件 “dropdown.js”    ☑ ...