A naukri.com initiative
Dev
1M
411
Image Credit: Dev
Creating a live HTML, CSS and JS displayer
- This article discusses how to build a live HTML, CSS and JavaScript displayer using codepen.io as a source of inspiration. The article explains the basic concepts of HTML, CSS, and JavaScript while explaining the code used to create the displayer. The article covers HTML tags, selectors, properties & values, Flexbox, Transitions, Dark Mode styling, Specific Selectors, event listeners, functions, variables, and debouncing. The displayer features an editor area, editor header, code area, and preview area.
- The article defines HTML as the skeleton of a website, CSS as the decorator, and JavaScript as the electrical wiring that controls the interactive elements of the site. The article goes on to explain how each of these languages works together to create a functional web page.
- The displayer is built by selecting various HTML elements using their IDs and classes in JavaScript so that they can be later manipulated. A function is defined to update the preview page, which utilizes the user's inputted code to render a webpage. Another function is defined to handle the debounce effect when the user types in the text box area, and the editor header is set up to show line numbers and allow the user to switch between HTML, CSS, and JavaScript tabs.
- The full-screen view is built to toggle when the user clicks the button and changes the inner text of the fullScreenToggle element to either compress or expand the window. A theme toggle button is also included, which switches the styles of elements from light to dark.
- Key concepts discussed in the article include DOM manipulation, event listeners, functions, variables, and debouncing.
- In conclusion, the article is an excellent resource for anyone interested in building a live HTML, CSS, and JavaScript displayer while learning the basic concepts of these languages.
Read Full Article
24 Likes
For uninterrupted reading, download the app