Hey everyone!

I've just uploaded a comprehensive tutorial on how to create the classic "Four In A Row" game using JavaScript, HTML, and CSS. Whether you're a beginner looking to dive into game development or someone who's interested in honing your JavaScript skills, this tutorial is for you!

🔗 Watch the full tutorial here: Four In A Row Game Tutorial

What You'll Learn:

• Project Setup: Step-by-step guide to setting up your environment and files.
• HTML & CSS: Designing the game layout and styling it for a professional look.
• JavaScript Game Logic: Learn how to handle game mechanics, player turns, and game state.
• Adding Features: Implement sound effects, animations, and more!
• Problem Solving: Tips on debugging and improving your code.

Why Watch This Tutorial?

• Beginner-Friendly: Perfect for those who are new to JavaScript and game development.
• Hands-On Learning: Follow along with real-time coding and explanations.
• Community Support: Join the discussion, ask questions, and share your progress.

Join the Discussion:

I'd love to hear your feedback, see your creations, and answer any questions you might have. Let's build and learn together!

Feel free to share your thoughts and let me know what other projects you'd like to see in the future. Your support and feedback are invaluable.

Happy coding! 🚀

Hi everyone!

I am working on a project, and I am trying to allow multi-language.

A part of my (HTML) code looks like this:

<div
  class="class1 class2"
  v-if="condition1"
>
  <span v-if="condition2">Some sentence</span>
</div>

And then, the CSS part:

&.class2 span {
 # Some other CSS properties here
 &:before {
  content: "My text";
 }

Here it works perfectly. When we are hover this element, we see the text "Some sentence", with on the left, "My text".

​

What I am trying to do now is replace this content, "My text", by a variable, so this string will change according to the language used by the user. The variable is locale.fileA.myText. And if I use it in the HTML part, the text works perfectly, but I cannot make it in CSS.

I tried content: locale.fileA.myText, :content: "locale.fileA.myText", content: "{{ locale.fileA.myText}}, but no one work.

So, what is the good syntax?

Thanks in advance.

Hi everyone!

I am creating two buttons. Each of these buttons contains both a span and an img (this way I can have both a text and an image).

​

https://preview.redd.it/gw9x7zyroilc1.png?width=657&format=png&auto=webp&s=c6d76bbf7a07084c3bfd39b48fa07596c11d03ba

I will change some things (font size, button's height), but there is one point I wanna change and I tried without success.

I wanna have the spans at the (vertical) middle of the button (instead to be at the top).

And, ideally, I'd like to have them, for the horizontal alignment, at the middle of the free space (so middle without taking account the picture). For this point, I am pretty sure I can easily solve it with a text-align: center;

But so, how can I make the vertical alignment?

Thanks in advance for answers.

Don't know how to describe this well.

White box on top, black box on bottom. Picture in center needs show part on the top and show part on the bottom.

Don't know what to call this to google it. How is this done?

Example

feature number

feature number

feature number

feature number

I have a bold span on them, but then I can't get them to line up properly. I have tried flex, margin, padding.

I'm using Bootstrap CSS and Bootrap Icons to build an avatar component, but I'm facing a problem with centering the icon, I can't get the icon centered perfectly. Please can someone help me to fix this problem? This is the codepen

Thank you in advance.

https://www.youtube.com/watch?v=-mN6kN3vggg&ab_channel=NaturalFrontend

https://preview.redd.it/y38asmv8vt2b1.jpg?width=1711&format=pjpg&auto=webp&s=2cfd02d768d5e4cb49f71d2f8593479aa2ca9f9f

Learn how to create attractive letter-by-letter text animation using HTML5, CSS3, and JavaScript. In this tutorial, we'll go through the code step by step to understand how to wave each letter individually. Watch as we demonstrate how to implement the animation and provide a detailed explanation of the HTML, CSS, and JavaScript code involved. Get ready to add eye-catching text effects to your web projects!

https://www.youtube.com/watch?v=6F3BthSbZyY&ab_channel=NaturalFrontend

https://www.youtube.com/watch?v=1QoNuri_Wes&ab_channel=NaturalFrontend

Please check it out and tell me what you think. Thanks.