Back to vanilla JavaScript basics before React(ing) reflection

Toni T Diep
Dec 3, 2021

Is definitely the way to go with practicing CSS styling and solidifying vanilla JS projects, as a Bootcamp grad. Pick whatever app that piques your passion and curiosity to learn and build— i.e. a calculator. If interested, here is the tutorial to code-along with. The direct communication between the styles.css (for CSS and styling) and index.html (for HTML) files is vital to seeing any frontend execution process on the browser for the initial setup; furthermore, we will need script.js for the entirety of our JavaScript.

This is the calculator to be built. Learned how to set up the grids and buttons in the file of index.html. From here, then style our classes in stylex.css. Screenshot of Wed Dev Simplified’s calculator tutorial.
Learned to manipulate and style classes and their elements. i.e. grid-column, alight-items, padding, flex-direction. We do not want the display of numbers and their calculations to be on edge and stuffy without the necessary padding and styling customizations. Screenshot of Wed Dev Simplified’s calculator tutorial.
Strategically naming class’ name to concise styling. Screenshot of Wed Dev Simplified’s calculator tutorial.

Resources

--

--

Toni T Diep

multilingual Software Engineer, always learning and growing.