CodemySite_Web development

  The project should have yarn installed. under the directory of your project: npm install -g yarn you can get the latest version like 1.22.17 2.  yarn set version berry this will enable the version 2+ But! When I check after this, my yarn version didn’t change. berry doesn’t work,orz so I use  yarn set version 3.1.0 And the version changed. And also I tried  yarn set version latest 3. rm -fr node_modules remove modules to set to v3 project 4. run  yarn there is a cache file. And yarn v3 creates a file .yarnrc.yml includes the yarn path inside. the No d eLinker will appear in the yarnrc.yml file 5. yarn add . yarn commit -m “yarn upgrade to v3” Commit the changes 6.run  yarn install  to migrate the lockfile More info check: The  official document

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

Free Weather API   in Rapid-API All you need is click “test terminal” to registrate the API, there will be your own  API Key  showing below automatically. And select the language you use , it will generate the code ,only thing you do is copy paste. This is the fetch code,now we need get the  latitude  and l ongitude  throngh window. Then try to fetch the data from API (copy the code in rapid-API) replace the key in the quote Parse the data into json and select. the  data Object  in the console: the location is “data.name” temperature is” data.weather[0].temp” description is “data.weather[0].description” weather icon  is a unique number represented different icons. The url looks like  http://openweathermap.org/img/wn/10d@2x.png more about  icon condition  So replacing the image source here: icon.src = `http://openweathermap.org/img/wn/${data.weather[0].icon}.png`;

 The Chrome extension seems a mystry tech until I watched the tutorial video from Brad Traversy. It's so fun to get to know something web related new. I followed the video step by step. You get your own Chrome extention only with html and css,no Javscript suprisingly. Github file To build the small site,we need a html file. the body structure has two parts: header and content the header is a logo included the content has four icon link in my demo, while you can add as many as you want. For the fonts, I normally use Google Fonts. For the icon,  Font Awesome icon is the first choice. So the html links added in the head. Next , css to layout the box. Then we can upload to Chrome extension. Open three dots in the right side of browser-->more tools-->extension Turn on the developer mode and load unpacked Manifest.json Required to set the manifest-version,name and version you can set the version of your work and number higher when you update icons contains all the icons you ...

  The simple desktop view always catch our eyes, which is popular nowadays.  It can be live in your browser. You may know some Google extentions related which have some functions like clock,to-do list,quotes or bookmarks.  The project's idea is from Brad Traversy tutorial.  I kinda add something more. The site shows the digital clock, editable user name, background changing based on the time, and a random quote with API. Github code HTML Google Font named  Darker Grotesque Three sections: time,h1for greeting name and h2 for quotes The name should be editable with " contenteditable=true " CSS Center box in the page.  Add  a underline to second part.  JAVASCRIPT select the DOM needed with id Get the digital time with new Date() If the hour shows more than 12, adding "PM",or else "AM" If the minutes and seconds show single number,adding zero ahead showTime function runs every second with setTimeout Checking the hour,if less than 12 which means mornin...

You never know the power of CSS! With the development of tech, the CSS became more creative and powerful, even though it’s the basic knowledge when you step into the developer’s field. Making it 3D! When mention about 3D, the language always comes to my mind is “three.js” which is popular and dramatically powerful with Javascript knowledge needed. Yeah, it definitely needs work to follow up. But the CSS one is the easiest way to make the screen live. Live demo First comimg with the structure of the building, the html part. The book is the box of the playground. The four sides of the book vertically is inside the div named span tag. The top is the side of the book as we can see.Btw, I ignored the bottomside of the book, because we can’t see it when animated,right? :) Then the most important part is CSS. The font is from goole online font. And the basic setting for centring the book. The book positioned with the angles , the “transform ” rotates the sides of book. For the infin...

 Three fun use of ::before and ::after 1.filter background 2.mixed-color background 3.gradient shadow Learn from Kevin Powell