I am a CTO with over 5 years of experience in start-up and over 10 years in working at managing position for big companies. I am also a full-stacks developer with over 12 years in system design, product development and technology product deployment. User experience and system security are the things I care about most.
CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS
Before we start. If you want more free content but in video format. Don’t miss out on my Youtube channel where I publish weekly videos on FrontEnd coding. https://www.youtube.com/user/Weibenfalk ———- Are you new to web development and CSS? Have you ever wondered how those nice shapes are made that
How to Use Animations in CSS
Using CSS Animations CSS animations add beauty to the webpages and make transitions from one CSS style to the other beautiful. To create a CSS animation sequence, we have different sub-properties in the animation property in CSS : * animation-delay * animation-direction * animation-duration *
The Hexadecimal Number System Explained
Hexadecimal numbers, often shortened to “hex numbers” or “hex”, are numbers represented in base 16 as opposed to base 10 that we use for everyday arithmetic and counting. In practical terms, this means that each column of a number written in hexadecimal can represent up to 16 values. Digits in
Z Index in CSS: What it Is and What it Does
What is a Z Index? Z Index (z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements (position:absolute, position:relative, or position:fixed). Possible
React Styled Components: Inline Styles + 3 Other CSS Styling Approaches (with examples)
There’s no one right way to style your React components. It all depends on how complex your front-end application is, and which approach you’re the most comfortable with. There are four different ways to style React application, and in this post you will learn about them all. Let’s start with
How to Take the Right Approach to Responsive Web Design
I ran a poll on Twitter awhile ago, and the results surprised me. Not only did I expect the results to be the other way around, I thought that mobile-first would get at least 80% of the vote. Desktop-first wins with more than 61% of the vote!In the replies, some
CSS Background Image Size Tutorial – How to Code a Full Page Background Image
This tutorial will show you a simple way to code a full page background image using CSS. And you’ll also learn how to make that image responsive to your users’ screen size. Making a background image fully stretch out to cover the entire browser viewport is a common task in
How to Use Pure CSS to Create a Beautiful Loading Animation for your App
If you’ve been around the internet lately, you’ve most likely seen a nice subtle loading animation that fills page content before gracefully loading in. Some of the social giants like Facebook even use this approach to give page loading a better experience. How can we do that with just