PinnedPublished inJavaScript in Plain EnglishStyling React Forms with CSSYour React Form works! congrats but now what. All the div boxes are stacked next to each other horizontally. It looks ugly as hell. Users…Apr 7, 2021Apr 7, 2021
From JPG to WEBP: Image Resizing and Conversion Made Easyconvert images from .jpg to .webp extensionOct 18, 2024Oct 18, 2024
CSS KP 09 — NavLet’s build a hamburger menu button for mobile responsiveness so users can open and close the navigation. We will also learn how to add…Oct 9, 2024Oct 9, 2024
CSS KP 08 — display: flex, text-align: center;, max-width: 50ch;, place-items: center…display: flex; text-align: center; max-width: 50ch; place-items: center; place-content:center; row-gap: 10%; align-item:end;Sep 26, 2024Sep 26, 2024
CSS KP 07 — responsiveness-mobile-first approach designnotice body’s reset’s min-height: 100vh;Sep 24, 2024Sep 24, 2024
CSS KP 06 — Homepage, grid-template-columns: 2em minmax(0, 60rem) 2em;-display: inline-grid;Sep 24, 2024Sep 24, 2024
CSS KP 03 — Nav hover over indicatorUtilizing our utility classes(previous blog) that we built already, we can directly go to our html and add our styling.Sep 23, 2024Sep 23, 2024
CSS KP 03 — Utility Classes 02— spacingWe can also add spacing classes to our utility classes. To reduce the extra space caused by selecting all elements, we utilize the…Sep 22, 2024Sep 22, 2024
CSS KP 02 — Utility Classes 01 -flex, grisr, color, typographyUtility ClassesSep 21, 2024Sep 21, 2024