Julia Shlykova articles - 28 total
Introduction to TypeScript. Setup
TypeScript is a superset of JavaScript, that means JavaScirpt code is valid code in Typescript. ...
SVG dimension attributes and adaptive icons
Table of contents SVG viewport, viewbox and...
SVG essentials. Embedded image and filter effects
What if we need a shadow for the shape in SVG? If we use CSS box-shadow on SVG elements, it won't...
SVG essentials. Gradients and patterns
Gradient in SVG Each gradient must have id attribute for future reference. Color...
SVG essentials. SVG auxiliary elements and style application
We have seen basic shapes in previous articles and now it's time to move to more complicated ones. ...
SVG essentials. Basic shapes and path
In the previous article, we have seen the flower consisted of a circle at center and paths for...
SVG essentials. Introduction
SVG is an XML-based markup language that stands for Scalable Vector Graphics. As the name suggests,...
Container queries in css
Container queries are fully supported by the main browsers. They work similarly to media queries,...
Subgrid
Table of contents Introduction How to use subgrid Important notes ...
New CSS features (from august 2024)
Check out this Pen I made!
Practical application of grid
After learning theoretical concepts of grid, let's apply our knowledge to real-world examples. ...
Grid Basics. Placing and aligning items
Table of contents Placing children inside a grid container using line numbers Grid...
Grid Basics. Track sizes
Table of contents Fractional unit (fr) Minimum and maximum range (minmax()) Content-based...
Changing your worlds with the power of the imagination
This is a submission for Frontend Challenge v24.07.24, CSS Art: Recreation. Inspiration I...
Simplest theme toggler using checkbox
The easiest way to toggle theme with plain css :)
Trans component in react-i18next. Multilingual website
Tutorial of using react-i18next alongside with documentations can be found here. When first...
Effect of highlighting text with pen
This codepen is inspired by work by Sten Hougaard Preparations Let's create two...
Cheat Sheet for React Bootstrap. Layout and Forms
Table of contents Breakpoints Grid system Container Row Col Stacks Forms Form...
Cheat Sheet for React Bootstrap. Installation and components
Bootstrap Javascript is not recommended to use with React. Thus, React-Bootstrap comes to light. It...
Cheat Sheet for Bootstrap. Utilities and helpers
Table of contents Sizing Spacing Text Background Borders Text...
Cheat Sheet for Bootstrap. Layout
Bootstrap allows to use mobile-first flexbox grid to build layouts of all shapes and sizes. ...
Introduction to Bootsrap
What is Bootstrap? If you haven't heard about CSS frameworks, then imagine that you don't have to...
Landing page
This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration...
Leaving the Earth
This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day. ...
Fast dive into Sass
Table of contents Installation and usage Variables Nesting Modules Mixins Placeholer...
URL path and react-router dynamic segment
Prehistory I have a project in which usernames go as dynamic segment in react-router route...
web API vs web server. REST API
Table of contents Terminology Types of architecture styles for web API REST API When...
CSS perspective and opening book as in 3d
If you read about 3d in CSS and didn’t fully understand how to make 3d in the way you want using...