DEV Community: CristoferK

I am struggling learning react JSX syntax! can anyone help me?

CristoferK — Sun, 16 Jan 2022 13:33:14 +0000

I recently started learning react, so I can also learn React Native to make apps. But I don't understand JSX syntax! If you learned react can you tell me what should I do, to can understand react JSX?

How could I learn React fast and easy?

CristoferK — Wed, 12 Jan 2022 14:52:43 +0000

How could I learn React fast and easy?arn React fast and easy?

Why is npx create-react-app name-of-app so slow?

CristoferK — Fri, 31 Dec 2021 17:32:23 +0000

Even that I have a very good laptop it takes like 2-4 hours to finish loading. Why? How can I fix this?

I shared my first website!

CristoferK — Sun, 24 Oct 2021 10:12:54 +0000

I shared my first website!
Do you like it?

Site link
https://cristoferk.github.io/catastrofic/

GitHub link
https://github.com/CristoferK/catastrofic

🤔️ | What are the best tools for Programmers? | 🤔️

CristoferK — Fri, 18 Jun 2021 19:52:06 +0000

Hello! Welcome to another post by CristoferK. Before I continue please don't forget to subscribe to My YouTube channel for programming tutorials!

1. Figma

Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows. On figma you can prototype your websites or apps before you started coding.

2. FontAwesome

Font Awesome is a font and icon toolkit based on CSS and Less. As of 2020, Font Awesome was used by 38% of sites that use third-party font scripts, placing Font Awesome in second place after Google Fonts. FontAwesome is very easy to use and I recommend it!

3. Dev.to! 😄️

Dev.to is the best community for programmers. Here you can found interesting articles about the thing what we all love... Programming! You can get help and help other peoples too!

If you have any ideas of other helpful tools write them in the comments so everyone can see them! 😄️

My YouTube
My GitHub

Awesome Toggle Button Animation!

CristoferK — Tue, 11 May 2021 18:12:04 +0000

Please subscribe to my YouTube channel for programming tutorials! https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ

Today I made an awesome toggle animation using HTML and CSS! I hope you will like it too! I know is simple.
Here is the final result:

Code:
Let's start by adding a checkbox in a div named center

<div class="center">
    <input type="checkbox" id="dark-change">
</div>

Now let's set the padding and margin of the page to 0

body {
    margin: 0;
    padding: 0;
    background: #f3f3f3;
    transition: .5s;
}

Let's make the div stay in the center

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Now we can start styling the checkbox!

input[type="checkbox"] {
    position: relative;
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    background: #c6c6c6;
    outline: none;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2); 
    transition: .5s;
}

I will make that when will be pressed it will turn blue

input:checked[type="checkbox"] {
    background: #03a9f4;
}

And now we are ready to make the circle!

input[type="checkbox"]:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0px;
    left: 0;
    background: #fff;
    transition: .5s;
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

Also, we will make that when will be pressed will go to the right

input:checked[type="checkbox"]:before {
    left: 40px;
}

I hope you liked my post! Please heart, Unicorn and Comment!

My Programming YouTube Channel!

CristoferK — Thu, 29 Apr 2021 18:23:21 +0000

My Programming YouTube Channel!

Subscribe https://www.youtube.com/channel/UCFzeA3xC-_i4ZT-XwcwsJxQ

My best videos

My Newest Programming CSS Tutorial!

CristoferK — Wed, 21 Apr 2021 14:58:54 +0000

Hello guys! Welcome back to my channel! In today's tutorial, you will learn how to code a loading button! Before I start, don't forget to Like, Share, Subscribe and leave a comment down below about what would you like to learn in the next tutorial. Let's start! Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see if it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working! Thanks for watching guys! Don't forget to Like, Share, and Subscribe! See you next time!
Font Awesome: https://fontawesome.com/
Google Fonts: https://fonts.google.com/

Simple CSS Animation!

CristoferK — Mon, 19 Apr 2021 16:36:55 +0000

Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working!

Create A Loading Animation Button || CSS for beginners

CristoferK — Sun, 18 Apr 2021 15:17:55 +0000

Let's start by changing the coding language to HTML. Adding the HTML template, and adding a title. I will name this Loading Animation Tutorial. Let's add a button with some text in it. Now let's go to fontawesome.com (the link is in the description) and search for a loading icon. I am gonna choose this icon. If you want you can scroll down and see other icons. Copy the HTML tag, and past it in your HTML file. Save it as HTML.html. Now let's see how it looks. But where is the icon? To can show a font awesome icon you need at the first to make an account and go to kits. And copy the code that they are giving you. After this paste it into the header. Now if we save and reload the page you can see the icon. Now let's start designing. Change the language to CSS. And let's start by removing the default margins. And now let's go to google fonts and choose a font. I will choose Roboto. You can choose whatever font you want. Let's copy this and go to the HTML file and paste this in the header section. Now let's go back to google fonts and copy the font family, and past it in the CSS file. Save this as CSS.css. Now let's add a source tag to our HTML file. Copy the link of the files and paste it in the src section. also, add a link tag with the name of the CSS file. So, now if we refresh the page the margins disappeared. Now let's style the button. I am gonna add 10-pixel padding, set the border and the outline to none. Make the background white. Make the border-radius 10px, the width 200 pixels, and the height 80. I will also add a box shadow of 20px blue. And also position, absolute. Save it and refresh the page. You see that now our button is having a design. But now let's make it to be in the center: top, fifty%, left fifty%. transform, translate -50%, -50%. Font size 25 pixels and cursor pointer. Let's see how it looks. type animation spin 25 linear. To add the animation we need to type keyframes, spin because this is the name of the animation. Zero%, tranform roteate 0deg. And now 100%, transform, rotate three hundred sixty deg. Let's save and refresh the page. Oh! I forgot! We need to make just the icon to be animated! So let's copy the animation. Write fas. If you are using another icon look there to see if it is different. Change from 5 to s and add infinite. Now if we save and refresh, you can see that is working! Thanks for watching guys! Don't forget to Like, Share, and Subscribe! See you next time!
Font Awesome: https://fontawesome.com/
Google Fonts: https://fonts.google.com/

Are you using these Code Editors?

CristoferK — Sun, 18 Apr 2021 09:26:02 +0000

Are you using these Code Editors?

// Nr.3
CodePen.io
CodePen is an online community for testing and showcasing user-created HTML, CSS, and JavaScript programs. It functions as an online code editor and open-source learning environment, where developers can create programs and test them. It was founded in two thousand twelve. CodePen is one of the largest communities for web designers and developers to showcase their coding skills, with an estimated three hundred thirty thousand registered users and over fourteen million monthly visitors.

// Nr.2
Sublime Text
Sublime is a very popular code editor. There you can choose from many programming languages like HTML, CSS, JavaScript, Python, PHP, and much more. I used Sublime Text for a long time. And I can say it is very good and very easy to use. If you need it you can find many plugins for it. Sublime Text contains 23 different visual themes with the option to download additional themes. Sublime Text will offer to complete entries as the user is typing depending on the language being used. It also auto-completes variables created by the user. There is Auto-save too, which attempts to prevent users from losing their hard work. You can download Sublime Text for free for Linux, macOS, and Windows for 32 or 64 bits.

// Nr.1
Visual Studio Code
Visual Studio Code is a source code editor that can be used with a variety of programming languages, including Java, JavaScript, Go, Node.js, Python, and C++. Visual Studio Code is also called VS Code. Do you want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won't slow down your editor. You can download Visual Studio Code Community edition for free or you can buy it.

// End
Don't forget to watch one of these videos, like, share this with your friends and subscribe! See you next time!

Design Social Media Buttons Using CSS!

CristoferK — Fri, 16 Apr 2021 15:11:54 +0000

Here is the tutorial

Don't know what code editor to use or you just want to move to another one? This video will help you to choose

Don't forget to like, share and subscribe!