For years, I told myself, “This is the year I’ll finally learn to code.” I’d get all hyped up, bookmark some tutorials, and maybe even sign up for a course or two. But then life would sneak in — work, chores, Netflix — and that motivation? Gone in a week.

Sound familiar? Yep, That’s me and probably you too :)

It wasn’t that I didn’t want to learn programming. I just couldn’t stick with it. I always thought I needed hours of free time or some magical burst of discipline. Does this sound familiar to you? But in one moment, I figured out something that changed everything:

👉 You don’t need to do a lot. You just need to do a little — consistently.

And that’s where Coddy.tech (aff) came in.

Drowning in Options, Going Nowhere

When you’re a beginner, learning to code feels like standing in front of a massive buffet with no plate. So many platforms, tools, and “must-learn” languages — it’s easy to freeze up and do… nothing.

I kept bouncing between YouTube tutorials, free courses, and Reddit threads. I knew what a variable was, but I didn’t know how to keep going. I never built a habit. I never felt progress.

The Tiny Habit That Stuck

Then my friend (experienced programmer) told me about Coddy.tech, and I figured I’d give it a try. I wasn’t expecting much — just another site with lessons, right?

Wrong.

Coddy.tech (aff) hit differently.

It wasn’t about cramming hours of video or taking tests. It was about showing up daily, solving quick hands-on exercises, and building a rhythm. Just me, the code, and 30 focused minutes (sometimes even more, depending on my mood :)). That’s it.

What really hooked me? It felt fun. The design is sleek. The tasks are short but satisfying. And the platform is AI-oriented, so it adapts to how you’re doing.

Now? I look forward to it. Every morning, coffee in hand, I knock out a few coding tasks before work. And it feels amazing.

Why I Recommend Coddy.tech (Especially If You’re New to Coding)

• Super beginner-friendly — No overwhelming jargon.
• AI-powered and smart — Adapts as you learn.
• Time-respectful — 5 to 10 minutes daily is OK, but if you have 30 minutes, then it’s the best.
• Built for habits — Keeps you consistent without pressure.

I’ve been using it for over half a year now. Not once did I feel burnt out or lost. That’s a first for me.

Final words

If you’ve been stuck in the cycle of starting and stopping, I feel you. But here’s the truth: you don’t need to grind for hours. You just need to find something that helps you show up every day.

Coddy.tech helped me finally break through.

👉 Try it out here — Coddy.tech (aff ) use this link and promo code — codingforweb20 you will get a 20% discount, btw coddy.tech also has a free version too

No pressure. But if you’ve been looking for a sign to start learning programming and actually stick with it — this might be it.

Thank you for reading me.

Hi, my name is Ziv and I am a programmer with 10 years of experience. Today I would like to tell you about one of the coolest sites I have ever come across for learning programming, namely Coddy.tech

In this digital age, where coding has become as fundamental as reading and writing, Coddy.tech is becoming a beacon for both newbies and experienced programmers. This innovative online platform is not just a learning center, it is a dynamic ecosystem designed to make coding accessible, fun, and enjoyable for everyone.

Why Coddy.tech is so amazing?

In my opinion, Coddy.tech breaks down the traditional barriers of learning to code by integrating cutting-edge generative AI technology. This innovation allows for a personalized learning experience, adapting in real-time to the user’s skill level and learning pace. Whether you’re a beginner or an experienced coder, Coddy.tech offers a range of courses across different programming languages, including Python, JavaScript, C++, and many more, making it a one-stop shop for all your coding learning needs.

👉 Check more about Coddy.tech (aff) 🔗 https://www.coddy.tech/

Practice, Practice, and more Practice

At Coddy.tech, the ethos is clear: learn by doing. The platform offers a “Practice-Driven” approach where theoretical knowledge meets hands-on practice. Each course is peppered with challenges and projects that simulate real-life programming issues, ensuring learners not only understand the concepts but are also ready to implement them in real-life projects.
And how it works? Coddy.tech turns learning into a gamified experience. Collect points, track your learning streaks, and climb the leaderboards as you master new skills. This gamified approach not only makes learning more enjoyable but also more memorable.
Also, you will become a part of a growing community of coders. Coddy.tech encourages collaboration and peer learning through daily challenges and community forums, where you always can share your knowledge and innovative ideas and also bugs, we all have bugs — !false 😀

AI, what is it used for on this site?

You can harness the power of Artificial Intelligence while learning to code. The Coddy.tech platform uses AI to create customized content and exercises, ensuring that your learning experience is always fun, productive, and up-to-date. It was one of the main reasons why I started to use this site to learn and update my programming skills.

👉 Check more about Coddy.tech (aff)🔗 https://www.coddy.tech/

In Summary

This site helped me a lot in learning and updating my knowledge of programming. During my experience, I have tried many learning methods and the learning process that Coddy offers is one of the best of which I have used in the past. Especially with the support of AI.

Coddy.tech has both a paid and a free version, I studied for a very long time on the free one. By the way, in the paid version I received a promo code from the Instagram account — CodingForWeb which gives a 20% discount and I will share it with you too. Promo code — codingforweb20
Use, learn, and practice your skills.

Introduction

In the constantly evolving landscape of web design and development, finding a platform that seamlessly merges aesthetics with functionality can feel like searching for a needle in a haystack. Enter Webflow: a powerful, intuitive tool that has been making waves among web professionals. This post delves into the reasons why Webflow stands as an unparalleled choice for web designers and developers, offering an unmatched blend of flexibility, power, and efficiency.

The Allure of Visual Design and Code Precision

Webflow transcends traditional boundaries by offering a visual design interface that generates precise, clean code. This unique feature caters to both designers and developers, allowing for the creation of sophisticated, responsive websites without the need for manual coding. The platform’s design-first approach does not compromise on code quality, ensuring that the final product is both visually stunning and technically robust.

Streamlined Workflow for Faster Turnaround

Time is of the essence in web development projects, and Webflow understands this better than anyone. The platform streamlines the entire workflow, from conception to deployment, significantly reducing development time. This efficiency is a game-changer for professionals juggling multiple projects, enabling them to meet tight deadlines without sacrificing quality.

Empowerment Through Customization

Webflow’s visual editor is a dream come true for those who crave creative freedom. It offers an extensive range of customization options, allowing users to tweak every aspect of their site’s design. More experienced developers have the option to dive into the code, making custom tweaks to HTML, CSS, and JavaScript. This level of customization ensures that every website created with Webflow is as unique as the creator’s vision.

Integrated CMS for Dynamic Content

One of Webflow’s standout features is its integrated CMS, which simplifies the process of managing and updating content. The CMS is designed to be intuitive for non-technical users, making it easy for clients to make updates post-launch. This feature is particularly beneficial for developers and designers who create sites for clients who need to manage their content independently.

Robust Hosting and Security

Webflow offers hosting solutions that boast enterprise-grade reliability and security. The platform ensures that websites are fast, secure, and scalable, with global CDN, SSL certificates, and automatic backups. This robust hosting environment means developers can focus on creating exceptional websites without worrying about performance and security issues.

Collaborative Environment

The platform promotes a collaborative environment where designers and developers can work together seamlessly. Webflow’s team features facilitate real-time collaboration, making it easier to share feedback, iterate designs, and ensure that the final product aligns with the project’s vision. This collaborative approach streamlines the development process and enhances the quality of the work produced.

Continuous Learning and Community Support

Webflow is committed to empowering its users through education and support. Webflow University offers a wealth of resources, from tutorials to courses, designed to help users master the platform. Additionally, the vibrant Webflow community is a treasure trove of knowledge, offering support, inspiration, and networking opportunities for professionals.

Conclusion

Webflow stands out as a beacon of innovation in the web design and development arena. Its blend of design flexibility, code generation, and comprehensive features make it an irresistible choice for professionals looking to push the boundaries of what’s possible on the web. Whether you’re a seasoned developer or a designer eager to bring your visions to life, Webflow offers the tools, community, and support to turn your ideas into reality. It’s not just a platform; it’s a movement towards a more integrated, efficient, and creative future in web development.

If you decide to use Webflow, please use one of the aff links from this story,
it won't cost you any penny but will help me to write more posts for you guys, thank you in advance.

JavaScript has become one of the most widely used programming languages in the world, and it’s no wonder that there are so many frameworks built on top of it. Frameworks allow developers to build web applications faster and more efficiently, by providing pre-written code and structure to build upon. In this post, we’ll take a look at some of the most popular JS frameworks currently in use.

1. React

React is a JavaScript library for building user interfaces. It was created by Facebook and has since become one of the most popular and widely used frameworks in the world. React is used by companies such as Netflix, Airbnb, and Dropbox. It allows developers to build web applications using a component-based architecture, making it easier to manage and maintain complex applications. React also provides excellent performance, thanks to its Virtual DOM, which allows it to update the UI more efficiently.

2. Angular

Angular is a TypeScript-based framework for building dynamic web applications. It was created by Google and has become very popular in recent years. Angular provides a complete framework for building web applications, including a templating engine, two-way data binding, and dependency injection. Angular also has a powerful CLI tool, which makes it easier to create and manage projects. Angular is used by companies such as Microsoft, IBM, and Nike.

3. Vue

Vue is a progressive JavaScript framework for building user interfaces. It was created by Evan You and has gained a lot of popularity in recent years. Vue is lightweight, fast, and easy to learn, making it an excellent choice for small to medium-sized projects. It also has a rich set of features, including a templating engine, two-way data binding, and component-based architecture. Vue is used by companies such as Alibaba, Xiaomi, and Wizz Air.

4. Ember

Ember is a JavaScript framework for building scalable and ambitious web applications. It was created by Yehuda Katz and Tom Dale and has been around since 2011. Ember provides a complete framework for building web applications, including a templating engine, two-way data binding, and a powerful CLI tool. Ember also has a strong community and ecosystem, with many add-ons and plugins available. Ember is used by companies such as LinkedIn, Square, and Intercom.

5. Svelte

Svelte is a radical new approach to building user interfaces. It was created by Rich Harris and has been gaining a lot of popularity in recent years. Svelte takes a different approach than other frameworks, by compiling components into highly optimized vanilla JavaScript code. This results in faster load times and smaller file sizes. Svelte also provides a rich set of features, including reactive statements, animations, and transitions. Svelte is used by companies such as Spotify, The New York Times, and Toyota.

Conclusion

Choosing the right framework for your project is an important decision. Each of the frameworks we’ve looked at has its own strengths and weaknesses, and the choice ultimately depends on your specific requirements. React, Angular, Vue, Ember, and Svelte are just a few of the many frameworks available to developers today. Regardless of which framework you choose, each of them provides a powerful set of tools and features to help you build fast and efficient web applications.

Thank you for reading. For more interesting posts join my
Instagram account.

JavaScript has made significant progress over the past few years. If you are new to JavaScript or have some experience and want to quickly get comfortable with the most commonly used features of modern JavaScript, this post is for you.

In this article I will cover four main features in JS ES6:
1.Arrow Functions
2.Destructuring
3.let and constvariables
4.Template literals

All these new/old/renewed features are natively supported in all modern browsers. You can check it on Can I use. For better understanding, I advise you to test the code snippets below and write more code. Only with more code writing experience, you will get the necessary knowledge!

So, let’s move! Fewer words more code…

Arrow Functions

One of the most usable ES6 features. Arrow functions give you a clean and concise syntax for writing function expressions. For Example:

Function expression in ES5:

var test = function(a) { 
   return a * 4; 
}

Arrow Function in ES6:

const test = (a) => { 
   return a * 4; 
}

Arrow functions allow us to write shorter function syntax, we get rid of the function keyword and put a fat arrow => between the parameters and the body of the function.

Next example is the one-liner function that returns the value:

const test = (a) => a * 4;

Here we can drop the return keyword and curly braces too.
It’s a cleaner code, right?

And what If our arrow function includes only a single parameter? Then we can even drop the parenthesis…

const test = x => x * number;

I love it. We getting really clean code here.
What if our arrow function doesn’t have any parameters? Then we need to use a pair of parenthesis:

const test = () => {console.log('Test Me');};

More arrow function examples:

An empty arrow function returns undefined
let test = () => {};

Immediately Invoked Function Expression
(() => 'test')();
// Returns "test"

If/Else Statement with arrow function
var simple = a => a > 21? 15 : a; 
simple(25); // 15
simple(20); // 20

Browser compatibility

As you can see, arrow functions are very useful and give us an option to write clean and understandable code. The next topic is Template Literals.

Destructuring

What is Destructuring? Destructuring simply implies breaking down a complex structure into simpler parts. In JavaScript, this complex structure is usually an object or an array. With the destructuring syntax, you can extract smaller fragments from arrays and objects. The destructuring syntax can be used for a variable declaration or variable assignment. You can also handle nested structures by using nested destructuring syntax.

Fewer words and more examples. Let’s say we have some object like this:

const cat = { 
   name: 'Murzik',
   age: 3,
   address: '111 Find this st'
};

Now, somewhere else we need to access these properties and store their values in a bunch of variables:

const name = cat.name;
const age= cat.age; 
const address = cat.address;

We have this repetitive code over and over: “cat” repeated n times. Object destructuring gives us a short and clean syntax to extract the value of multiple properties in an object:

const { name, age, address} = cat;

That’s it! This code is exactly equivalent to the snippet above. We use curly braces on the left to destructure the cat object. Inside the braces, we’re defining 3 variables: name, age, and address. Their values will be extracted from the corresponding properties in the address object.

Note that we don’t have to list all the properties in the address object. Maybe we’re interested only in the age property:

const { age } = cat;

The array destructuring has very much similar functionality with Object destructuring. It’s using square brackets ([]) instead of curly braces ({}).

Let’s see how it works. For example, we have an array and we want to store items from this array in different variables:

// ES5 Old Structure
const colors = ['red', 'green', 'blue'];
const first = colors[0]; (gets 'red')
const second = colors[1]; (gets 'green')
const third = colors[2]; (gets 'blue')

With destructuring, we can re-write the above code like this:

// ES6 The New One with Array Destructuring
const colors = ['red', 'green', 'blue']; 
const [color1, color2, color3] = colors;
 
console.log(`tone: ${color1}, grass: ${color2}, sky: ${color3}`); 
//Result: tone: red, grass: green, sky: blue

Cool, isn’t it.

let and const variables

With JavaScript (ES6), we got 2 new ways to define variables: let and const. Prior to ES6, we used the var keyword. What the difference? vardeclarations are globally scoped or function scoped and can be updated and re-declared within its scope. let and const are block-scoped. letvariables can be updated but not re-declared. constvariables can neither be updated nor re-declared. Let’s take a closer look at them:

Here are some examples for var keyword:

function test() {
   for (var x = 0; x < 10; x++) { 
      // Technically, x should only be scoped to this block because this is 
      // where we have defined x. 
   }   // But it turns out that x is available here as well! 
   console.log(x); // 10
}

That’s not how most if not all other programming languages behave! Variables defined within a block should be scoped to that block only. In this example, x should not be accessible outside of the for block.

Another issue with the var keyword is that if you use it at the top level outside of a function, it creates a property on the global object:

var test = 10; 
console.log(window.test); // 10

Let’s check examples with: let and const

function test() {
   for (let x = 0; x < 10; x++) { 
      // With the "let" keyword, now x is only accessible in this block.
   }   // x is out of the scope here
   console.log(x); // x is not defined  
}

As I said above with const we can define a constant. So we cannot reassign it later:

const test = 1; 
test = 2; // throws "Assignment to constant variable."

One more important thing to know is, unlike the var keyword, let and const don’t create a property on the global object if you use them at the top level:

let test = 10; 
console.log(window.test); // undefined

From my experience:

• With ES6 I am trying to use the var keyword as less as possible, and to use only let or const.
• I am using let only if I need to re-assign the identifier. Otherwise, I prefer to use const to prevent accidentally re-assigning a constant.

Template Literals

Before ES6, we had to deal with these ugly string concatenations:

Old Code version:
var name = 'Codingforweb'; 
var message = 'Hi ' + name + ',';

Now, with template literals (previously called template strings), we can define a string with placeholders and get rid of all those concatenations:

ES6 code:
var name = 'Codingforweb'; 
var message = `Hi ${name},`;

Pay attention I’m using the back-tick character here. ES 6 comes up with a new type of string literal, using the back-tick as the delimiter. These literals do allow basic string interpolation expressions to be embedded, which are then automatically parsed and evaluated. Back-tick character you can find before number 1 on your keyboard.

To add a placeholder in a template literal, we use the ${expression} syntax. You can replace “expression” with any JavaScript expressions. Here, we are adding the name variable there. You can also call a function or pass any JavaScript expressions that result in a value.

Another benefit of using template literals is that they can expand multiple lines. They are particularly useful when composing email messages:

var message = `Hi ${name},Thank you for joining. Happy coding, Codingforweb`;

This is only a small part of the improvements from ES6. Just check them, and if you are still not using them, then start to do it as soon as possible.

That’s all for now. Feel free to join my Telegram channel and Instagram. Thank you for reading and see you later.

Happy Coding

Best JavaScript (ES6) Features, that’s can be used in 0b11111100100 (2020). was originally published in Analytics Vidhya on Medium, where people are continuing the conversation by highlighting and responding to this story.

Начнем с того что поймем что же такое Instagram? Зачем нужны подписчики и лайки? Неужели это и есть виртуальные деньги будущего? Что вообще происходит в этом мире?

Instagram — это приложение для обмена фотографиями и видеозаписями с элементами социальной сети, позволяющее снимать фотографии и видео, применять к ним фильтры, а также распространять их через свой сервис и ряд других социальных сетей (взято из Wikipedia).

Целью Instagram в самом начале была возможность делиться между пользователями фотографиями, в принципе эта цель существует и посей день, многие люди только это и делают, но незаметно для себя люди стали втягиваться в это все больше и больше и внешнее внимание приобрело для них иной смысл, люди стали обращать внимание на свой контент, на то сколько лайков оно получает и как много подписчиков за ними следуют. Часто доходит до маразма, приходишь в ресторан с девушкой, и тут вместо того чтобы насладиться блюдом, она начинает снимать это блюдо со всех сторон, чтоб выложить(похвастаться) в инсте. Ну блин, как тут не сказать давай до свидания, но с другой стороны я понимаю что мы живём в цифровом веке, так что пусть фоткает, а я со своей стороны наслажусь поеданием блюд в горячем виде :)

Лайки и Подписчики, а зачем они вообще нужны? — Спросите вы. Вопрос в точку, не занимаясь продвижением в Instagram, я бы сказал: — да чёрт его знает зачем они нужны, но есть одно но, с недавних пор а именно год назад я начал сам продвигать свою страницу в Instagram (@codingforweb ). Так что ответ я знаю, они нужны для всеобщего признания и зарабатывания денег на своем аккаунте. Кстати в данной статье речь пойдет не о моей странице. Я постараюсь передать вам свои знания того как это происходит, на что надо обращать внимание и что стоит игнорировать. Я не буду делать слишком длинные статьи, по своему опыту знаю, что в какой-то момент читая статью ты начинаешь теряться из-за того что всё напичкано в одном месте. Поэтому я и решил поделить свой рассказ про мои познания об Instagram на несколько частей. Оно будет состоять из:
1. Instagram — Начало
2. Instagram — На что стоит обращать внимание, как продвинуть свой блог, и каких ошибок избегать
3. Instagram — Полезные аппликации для фото редактирования и видео монтажа
4. Instagram — Монетизация вашего аккаунта. Или как делать денюжку из ваших стараний.

Я буду стараться писать с использованием как можно более легкого языка без навороченных терминов, чтобы вы не бегали у меня и не искали понятия разных выражений, а смогли сосредоточиться на понимании того, что же это за зверь — Instagram и, как набрать больше подписчиков и возможно даже заработать.
Спасибо что дочитали. Интересно? Похлопайте :)

Presented by Ziv Peer

We all have different learning preferences: Some like videos and others like books. Some of us like a little of both, but if we want to become a true expert in web development we need to do it by learning from our predecessors, same as to do a lot of practice. For this, we need to know what to read and which blogs to follow. If we do it right, then our life will much easier.

Whether you new into the world of web development or have been in the industry for years, there are always will new things to learn. New technologies, libraries, and techniques are continuously emerging and if you want to stay on top of all these changes you will need to immerse yourself in groups, communities, and conferences all revolving around web development. Another great way to stay on top is understanding of how web development works are to read well-known blogs.

“STAY HUNGRY, STAY FOOLISH” — Steve Jobs

Here I’ve compiled a list of the top web development blogs that will help us to find your footing and acquire essential skills in the modern web dev world. This list will help both beginners and professional developers.
Let’s start:

1. CSS-Tricks

CSS-Tricks is really about building websites and all that entails, mostly from a front-end perspective. They have staff writers and loads of guest authors, so the content you find there will be as diverse as they are.

Visit website

2. CodePen Blog

Read blogs, experiment and show your code instantly on the website (CodePen), you as well can learn how to code from examples of other developers.

Visit website

3. Creative Bloq

Creative Bloq may tout itself as an art and design blog, but it’s just as detailed as any other web developer blog. It’s awesome for discovering how grid systems, CSS animation, Big Data, etc all play roles in real-world web design.

Visit website

4. Smashing Magazine

On Smashing Magazine you can learn about coding, design, UX, mobile development and CMS frameworks. Visit this resource for level up your front end skills.

Visit website

5. Free Code Camp

One of the best resources to learn and improve your skills for free. They as well have an awesome channel on YouTube. Highly recommend.

Visit website

6. Envato Tuts+

Envato Tuts+, you can read their blog posts for free, in addition, if you subscribe you will get an option to watch tutorials and to use Envato library.

Visit website

7. Codrops

Codrops features blogs with topics ranging from UI design and page animations to image formatting and general JavaScript practices. It also includes a handy CSS reference, a web development experiment playground, and tutorials.

Visit website

8. CSS Autor

Do you want to find a great place to pick up new tricks and inspiration? Then CSS Author is a great place for you. Check this resource for general CSS articles and technique roundups. As well it includes a number of PSD design tools and other freebies.

Visit website

9. Scotch.io

This place is good for both novice and expert developer. You can find their video courses, tutorials, last trend news and they have excellent community section.

Visit website

10. Hongkiat

From useful tech how-tos and tutorials to design inspiration and freebies, Hongkiat has everything that designers and developers look for. Doesn’t matter if you are novice or expert, this blog will help you equally.

Visit website

Conclusion

Now you know more about some of the most useful modern web development blogs, and I believe that’s you already added a few of them to your favorites list. Check them up occasionally and read their latest posts. Always update your knowledge, and don’t forget to follow me for more new stories in the future. Also, you can join my Telegram channel and Instagram.
One more thing, if you have in your favorites list interesting websites for web developers, feel free to share them with us in the comments below.
If you like my selection of the top 10 blogs for web developers, then please do some claps. Enjoy! 😉

Very often, in order to live, we must do some changes in our life, sometimes this process is accompanied by pain, fear, doubts …

At the age of 40, the eagle’s claws become too long and flexible and it cannot grab prey by them. His beak becomes too long and curved and does not allow him to eat. Feathers on the wings and chest become too thick and heavy and make it difficult to fly. Now the eagle faces a choice: either death or a long and painful period of change, lasting 150 days …

He flies into his nest, located on the top of the mountain, and there he beats for a long time on the rock until the beak breaks and peels off … Then he waits until a new beak grows, with which he tears his claws … When new claws grow, the eagle pulls out his too heavy plumage on the chest and wings … And then, after 5 months of pain and torment, with a new beak, claws, and feathering, the eagle is reborn and can live for another 30 years…

Very often, in order to live, we have to change, sometimes this process is accompanied by pain, fear, doubts … We get rid of memories, habits, and traditions of the past … Only release from the burden of the past allows us to live and enjoy the present and prepare ourselves for the future.

Alas, for many “today” represents that “tomorrow”, about which they were worried “yesterday.” Remember to live “today”.

Like?
Enjoy and stay motivated.

Some general characteristics of CSS3 2D Transforms

CSS3 transform property can change size, shape, and position of an element on a web page. It converts the element without affecting other elements on the page, i.e. other elements do not move relative to it. By default, the transformation is relative to the center of the element. There are two types of CSS3 transforms — 2D and 3D. In this article we will go through the most frequently used methods of CSS3 2D transform.

2D transformations transform elements in two-dimensional space. In the code, there are four basic two-dimensional transformation methods: rotate, scale, skew and translate. Other methods like scaleX/scaleY, skewX/skewY, translateX and translateY transform an element in one dimension.
We can to combine 2D transform methods with transition and animation properties, so we can create animated elements and interfaces that rotate, “dance” and scale.

rotate() method

This method rotates an element around its beginning by an angle indicated around the point where the transformation starts. If transform:rotate(45deg) is positive, the item will turn clockwise on 45 degrees, and with a negative transform:rotate(-45deg), it will rotate counterclockwise. Example:

The transform: rotate() method can take values in angle units. Corner units are defined by the CSS module of values and units of level 3. These can be deg (degrees), rad (radians), grad (gradians), or turn (units of turnover). One full turn is equal to 360deg, 6.28rad, 400grad or 1turn.

For example: the value of the method transform: rotate(), exceeding one turn 360deg. transform: rotate(540deg) or transform: rotate(1.5turn), statically displaying according to their residual value. In other words, 540deg will be displayed in the same way as 180deg (540deg-360deg), and 1.5turn as .5turn (1.5–1). If we will use on rotate(540deg) method, some animation or transition property, then it will turn this element 1.5 times with animation effect on it.

scale(), scaleX(), и scaleY() methods

With the scale() method, we can increase or decrease the displayed element size in the X-dimension scaleX(), Y-dimension scaleY(), or both of them scale(). The example of this method is illustrated below, where the dotted border indicates the original size of the element, and the + sign denotes its center point.

As an argument, the scale() method can take any positive or negative number. Percentage values are not supported. A positive value greater than 1 increases the size of the element. For example, scale(1.5) increases the size of an element in the X and Y directions by 1.5 times. Positive values between 0 and 1 reduce the size of the element.

Values less than zero will also cause the element to increase or decrease in size and create a reflection effect.

Important to know: If we will use scale(0) it will cause the element to disappear.

Using scale(1) does not change the element. Same situation with scale(-1), but a negative value will cause the effect of the reflection element. Although the element does not change, it still launches the new stacking context and contains a block.

A swell you can use scale() and put to there two parameters — for the horizontal and vertical size change, respectively.

For example: transform: scale(1.5, 2). The following code will increase the scale of the element one and a half times horizontally and two times vertically. Another example is when we want to reflect an object only along the X axis, using transform: scale(-1, 1).
If scale has only one value, transform: scale(1.5), it will change the element based on this value in both directions equally.

translateX(), translateY(), and translate() methods

Next methods we consider are translateX() and translateY(), they are allow you to move an object along the X axis — right / left or Y axis — up / down.

For example: if an element is located with zero pixels on the left, then using transform: translateX(50px) will move it 50 pixels to the right of its starting position and transform: translateY(50px) will move the element vertically 50 pixels down.

translateX(), translateY() andtranslate(x,y) methods— may take a unit length such as px, em, rem and viewport units (vw and vh).

We also can use translate(x,y), it’s the shorter version, in one method we can put two parameters with X and Y axis. The example of this method is illustrated below transform: translate(120%, -50px), where the left green square occupies the original position, and the right green square is shifted by 120% horizontally and -50px vertically from its original position.

Moreover, if we specify only one value in translate(x, y), then it will automatically be used as the value of translateX(), and translateY() will receive the value zero.
For example: transform: translate(-50px) will move the element by 50px to the left, and in Y axis it’s won’t be changed.

It’s also important to note that with a positive value of the translateX() argument, the element is shifted to the right horizontally, and translateY() is downward along the vertical. Conversely, with a negative value, translateX() shifts the element horizontally to the left, and translateY() up vertically.

We can use translate() method for:
- move the elements left and right, up and down and vice versa
- align elements on the center of the page (most frequently)

skew(), skewX(), and skewY() methods

The transform method: skew() specifies the bevel of the element, thereby converting it from a rectangle to a parallelogram. The bevel is carried out around the point specified by the transform-origin property (by default it is the center of the element). Below is an example of how this method works.

Methods — skew(), skewX(), and skewY()—same as rotate()support such angular values of the argument as: deg, grad, rad (valid) and turn (not valid).

skew() can take one or two parameters. If there are two parameters — the first parameter sets the bevel horizontally, and the second — vertically. If the parameter is one, then it behaves like skewX(), sets the bevel horizontally, and not on both sides. For example:

skewY sets the bevel of the element vertically. Below is an example of how this transform works: transform: skewY(30deg). The points to the right of the default position are shifted down with positive values and up if these values are negative transform: transform: skewY(-30deg).

CSS3 2D Transforms browsers support:

Conclusion

In conclusion, I would like to say that together with the transform we got a lot of new opportunities to make our web page more beautiful and modern. And most importantly, it made life easier for web developers. Thanks to CSS3 2D Transforms.

For more useful information and links feel free to join my Telegram channel and Instagram. See you later :)

Общие характеристики CSS3 2D Transforms

Свойство transform в CSS3 может изменять размер, форму и положение элемента на веб-странице. Оно преобразовывают элемент, не затрагивая остальные элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него. По умолчанию трансформация происходит относительно центра элемента. В сочетании с transition и animation мы можем создавать элементы и интерфейсы, которые вращаются, “танцуют” и масштабируются. Существуют два вида CSS3-трансформаций — 2D и 3D. В данной статье мы пройдёмся по самым часто-используемым методам CSS3-трансформаций — 2D.

2D-трансформации преобразовывают элементы в двумерном пространстве. В коде существуют четыре основных метода двумерного преобразования это: rotate, scale, skew, иtranslate. Остальные методы преобразовывают элемент в одном измерени, речь идёт об scaleX/scaleY, skewX/skewY,translateX и translateY.

Метод 2D Transform: rotate()

Данный метод вращает элемент вокруг его начала на угол, указанный вокруг точки начала преобразования. При положительном значении rotate(45deg) элемент повернется по часовой стрелке на
45 градусов, а при отрицательном значении rotate(-45deg) оно повернётся против часовой стрелки. Пример:

Метод rotate() может принимать значения в единицах угла. Угловые единицы определяются модулем CSS значений и единиц измерения уровня 3. Это могут быть deg (градусы), rad (радианы), grad (gradians), или turn(единицы оборота). Один полный оборот равен 360deg, 6.28rad, 400grad или 1turn.

Например: значения метода rotate(), превышающие один оборот (скажем, rotate(540deg) или rotate(1.5turn)), отображаются статично в соответствии с их остаточным значением. Другими словами, 540deg отображается так же, как 180deg (540deg-360deg), а 1.5turn получается таким же, как .5turn (1,5-1). Ну а если мы хотим анимировать данный метод, то нам необходимо добавить к нашему коду в CSS, transition или animation эффекты. В данном случае (rotate(540deg)), анимация прокрутила бы элемент в полтора раза.

Методы 2D Transform: scale, scaleX, и scaleY

С помощью метода scale()мы можем увеличить или уменьшить отображаемый размер элемента в X-размерности (scaleX), Y-размерности (scaleY) или обоих (scale). Работа данного метода проиллюстрирована ниже, где пунктирная граница указывает на исходные границы элемента, а знак + обозначает ее центральную точку.

В качестве аргумента метод scale()может принимать любое положительное или отрицательное число. Процентные значения не поддерживаются. Положительное значение, превышающие 1, увеличивают размер элемента. Например, scale(1.5) увеличивает размер элемента в направлениях X и Y в 1,5 раза. Положительные значения между 0 и 1 уменьшают размер элемента.

Значения, меньше нуля, также будут приводить к тому, что элемент будет увеличиваться или уменьшаться по размеру и создавать эффект отражения (flip).

Примечание: Использование scale(0) приведет приведет к визуальному исчезновению элемента.

Использование scale(1) никак не масштабирует элемент. scale(-1) так же не изменит размер элемента, но отрицательное значение вызовет эффект отражения элемента(flip). Несмотря на то, что элемент не изменяется, он по-прежнему запускает новый контекст стекирования и содержит блок.

Для более произвольного масштабирования можно указать два параметра — для горизонтали и вертикали соответственно. Например: scale(1.5, 2). Следующий код увеличит масштаб элемента в полтора раза по горизонтали и в два раза по вертикали. Мы могли бы так же, например, отразить объект только по оси Х, используя scale(-1, 1). А если scale будет иметь только одно значение, то это изменит элемент исходя из этого значения в оба направления одинаково.

Методы 2D Transform: translateX, translateY, and translate

Следующим методом, который мы рассмотрим это будет translate(x,y), которая позволяет двигать объект по оси X — вправо/влево и Y—вверх/вниз.

Например: если элемент расположен с нулевыми пикселями слева, то использование transform: translateX (50px) сдвинет его положение на 50 пикселей вправо от его начальной позиции,
а transform: translateY (50px) сдвинет элемент по вертикали на 50 пикселей вниз.

Методы translateX(), translateY() и translate(x,y) — могут принимать такие единицы длины как пиксели px, em, rem и viewport units (vw и vh).

С translate(), мы также можем изменять позицию элемента горизонтально и вертикально используя только один метод. В данном случае можно использовать два аргумента: X translation значение и Y translation значение. На примере внизу вы можете видеть квадрат на котором было использован метод transform: translate(120%, -50px), где левый зелёный квадрат занимает оригинальную позицию, а правый зелёный квадрат смещён на 120% горизонтально и -50px вертикально от её оригинальной позиции.

Вместо translateX() и translateY() по отдельности можно использовать translate(x,y) это более короткий вариант данного метода. Как я уже указывал выше X — будет отвечать за горизонтальный сдвиг, а Y — за вертикальный. Более того, если мы в translate(x,y) укажем только одно значение, то оно автоматический будет использоваться как значение translateX(), а translateY() получит значенье 0.
Например: transform: translate(-50px); сдвинет элемент влево по оси X на 50px, а по оси Y оно останется на месте со значением 0.

Важно так же отметить, что при положительном значении аргумента translateX(), элемент сдвигается вправо по горизонтали, а translateY() вниз по вертикали. И наоборот при отрицательном значении translateX() сдвигает элемент влево по горизонтали, а translateY() вверх по вертикали.

Зачастую метод translate() используют:
- чтоб сдвигать элементы вправо-влево, вверх-вниз и наоборот
- для выравнивания элементов по центру страницы
- они служат одной из составляющих вместе с animation или transition для создания анимаций на странице и позволяют двигать элементы без какого-либо использования Java Script.

Методы 2D Transform: skew, skewX, and skewY

Метод transform: skew задает скос элемента, превращая тем самым его из прямоугольника в параллелограмм. Скос осуществляется вокруг точки, задаваемой свойством transform-origin (по умолчанию это центр элемента). Ниже приведён пример, о том как именно работает данный метод

Методы— skew, skewX, and skewY—так же как и rotate() поддерживают такие угловые значения аргумента как: deg, grad, rad (valid) и turn(not valid).

skew может принимать один или два параметра. Если параметров два — первый параметр задает скос по горизонтали, а второй — по вертикали. Если параметр один, то оно ведет себя как skewX, задает скос по горизонтали (а не по обеим сторонам!!!) Пример:

skewY задаёт скос элемента по вертикали. Ниже приведён пример того как это работает transform: skewY(30deg). Точки справа от позиции по умолчанию сдвигаются вниз с положительными значениями и вверх если эти значения отрицательные transform: skewY(-30deg).

Обратите внимание на то, что при любых трансформациях transform, другие элементы будут вести себя так, будто мы не трансформировали элемент, и он даже могут налезать друг на друга.

Немного о поддержке браузерами методов CSS Transforms

Заключение

В заключении хотелось бы сказать что вместе с transform мы получили уйму новых возможностей сделать наш сайт более красивым и современным. И что самое главное это намного облегчило нам веб девелоперам жизнь. Спасибо CSS3. Отпишитесь ниже в комментариях, как вам статья и о чём бы вы хотели чтоб я написал в следующий раз. Спасибо что дочитали и до следующей встречи на страницах Medium.