Andrzej Szandor
Andrzej Szandor
  • 16
  • 6 458
Web Animation Using Css Transition
Hey everyone,
In today's tutorial, I want to cover CSS transition to create micro-interactions on your website, like button hover effects or menu sliders. Most of the time you need to use javascript to create a menu slider to add or remove a class but you can achieve this with simple CSS properties and selectors.
Soon I will be covering more about programming like CSS, Javascript, PhP, Vue and Laravel to explain the logic and concept of parts that are not properly explained by other creators. I prefer to focus on logic than on things that look pretty.
I hope you enjoyed this tutorial and more advanced stuff will come soon, happy coding.
Переглядів: 184

Відео

Custom Splide Slider for your website or next project
Переглядів 27314 днів тому
Hey everyone, Today we are looking at a splide slider making it more custom than a default setup. The code will be available on my GitHub so don't worry but as always is important to understand the logic behind this, if you looking for a quick and easy slider than splide can definitely do the job for you. I would appreciate it if more people could subscribe as there will be more educational con...
Custom Slider Bricks Builder and for any Website
Переглядів 46214 днів тому
Hey everyone, Today I have built a customer slider for bricks builder, make sure you watch the whole video because it's important to understand how the logic works as later you can adjust your own CSS to your own project requirements. Also, I point a few things out about why it's better to build with custom code compared to pge builder and so on. There is a code available for you to use on my G...
2025 SQL crash course part 1
Переглядів 118Місяць тому
Hey everyone, as I mentioned in my previous videos, I have created part 1 of the SQL crash course to give you the basics and fundamentals of SQL. In this tutorial, we cover how to create a database, create tables, insert data, update data, and delete data as well as use some constrains like foreign key constrain. There is too much to cover everything in one video so I will have to split it into...
Understanding WordPress Database Tables and Data
Переглядів 218Місяць тому
Hey everyone, I made a follow-up video about how WordPress database tables work and how you can navigate around it. Understanding how the model works behind the scenes to improve your skills and knowledge is important. Whether you using plugins or custom code, you can see from the example how data gets saved inside the tables like from JetEngine, Yoast SEO, Bricks Builder and many other plugins...
How WordPress Database relationship works
Переглядів 382Місяць тому
Hey everyone, I thought I would make a video on how WordPress database manages its relationship compared to over CMS's, if that is something you want to understand better, nothing too technical, this is for non-devs and devs, some devs don't know fully how the WordPress db works. In the video, I show you how the Foreign key constrain works but I am planning to createan SQL tutorial more in-dept...
How to migrate WordPress website manually, no plugin
Переглядів 527Місяць тому
Hey everyone please make sure you read this description, As promised, this video will walk you step by step on how to migrate your website from a local dev environment to a live server without using a plugin, is super easy and you don't need to be technical. As you can see my editing skills are amazing, I am just trying to protect what I think is sensitive information but let me break this down...
Understanding WordPress - Entry level
Переглядів 52Місяць тому
Hey everyone, I am starting a WordPress series about WordPress to teach non-developers and semi-developers more about WordPress itself. I noticed that there is a lot of ground that hasn't been covered and to learn how WordPress works, is best to start from the beginning and gradually improve your knowledge and skills with WordPress by watching these new series. Remember this is a brief intro to...
How to share WordPress local project with client using live link
Переглядів 2992 місяці тому
Hey everyone, Today I wanted to share with you how you can share you projects that you developing on a local dev environment for WordPress instead of building them on a live server which is not the way is done. You can also use this method to potentially get new clients, a lot of starters won't have projects to share with new potential clients but if you build a demo website then you can share ...
WordPress Blueprint Set-up in 2024
Переглядів 1,2 тис.2 місяці тому
In this tutorial, I wanted to show you how you can set up a blueprint for your WordPress projects so you don't have to keep re-uploading plugins or themes or recreate themes from scratch even with a code. The whole point of having a blueprint is to save you time doing these little small tasks that you have to do every time you create a WordPress project. With a blueprint, you will have everythi...
Loading WordPress Module CSS and JS Code with NPM
Переглядів 1334 місяці тому
In this tutorial, I want to show you have easy it is to load module code on WordPress for your theme, whether you are building custom code or using someone else's theme, WordPress/scripts npm will help you enqueue files using a modular approach without you needed to touch Webpack. This is how as well WordPress builds there block themes and guternberg blocks, this npm is very useful for develope...
GSAP Text Reveal in WordPress
Переглядів 1915 місяців тому
Hi everyone, I'm back with another tutorial to show you how to do a text reveal effect on scroll using GSAP in WordPress. For this example, I am using Bricks Builder and Bricksforge as it's a perfect way to visually teach you how to create an effect on your website. You can create an effect like this with pure vanilla JavaScript and CSS and I could show you how to do it in another tutorial, als...
How to make stackable sections for your WordPress website
Переглядів 2467 місяців тому
In today's tutorial, I am going to show you how you can create a stackable section or it could be used for stackable cards to give that parallax effect without using javascript or any additional plugins. I hope you enjoy this easy and simple tutorial and subscribe to my channel for more where we soon will dive in deeper and build more fun projects in WordPress using VUE or Vanilla JavaScript.
How to make expandable cards on hover and with a click event 2024
Переглядів 3608 місяців тому
In this tutorial I will explain how you can create your own expandable cards on hover and click with code to either coder or add to your page builder like Bricks Builder, Element, Wix and so on, it makes no difference. It is important to watch the full video to understand how this works as I explain everything step by step. Once you understand it, you can easily implement it into your projects ...
How to build hover card effect in Bricks Build or any page builder or WordPress 2024
Переглядів 1,4 тис.8 місяців тому
In this tutorial, we will build together a card hover effect in Bricks Builder. You can apply this in any page builder like Elementor. If you just want to use pure code as I did first in VS Code, and later add to the theme that you developing. This time my audio should be working fine with no background noises or anything. Do let me know in the comments if you like it or what kind of tutorials ...
How to create flip card in Bricks Builder, VS Code or WordPress 2024
Переглядів 3728 місяців тому
How to create flip card in Bricks Builder, VS Code or WordPress 2024

КОМЕНТАРІ

  • @AAABBB-px2ci
    @AAABBB-px2ci 3 дні тому

    Great Vid! The other videos on you channel are also interesting

    • @Pixelyze-tech
      @Pixelyze-tech День тому

      Thanks, there will be more coming soon about programming like understanding concepts, logic etc.

  • @RR-ok4wz
    @RR-ok4wz 19 днів тому

    Beautifully made! Thanks for sharing, mate!

    • @Pixelyze-tech
      @Pixelyze-tech 19 днів тому

      I'm glad you enjoyed it, code is avaliable on my GitHub.

  • @Pixelyze-tech
    @Pixelyze-tech 19 днів тому

    Link to code: github.com/mecenas1/Splide-slider-1

  • @nhson47
    @nhson47 20 днів тому

    awesome!

    • @Pixelyze-tech
      @Pixelyze-tech 20 днів тому

      I'm glad you liked it, Soon more tutorials will come that you can build any custom elements you want without additional plugins.

    • @nhson47
      @nhson47 19 днів тому

      @@Pixelyze-tech thank you.

  • @Pixelyze-tech
    @Pixelyze-tech 20 днів тому

    Link to code: github.com/mecenas1/custom-slider-1

  • @RonnieMbugua
    @RonnieMbugua 23 дні тому

    Thank you so much for this!

  • @SergeRossinski
    @SergeRossinski 27 днів тому

    Perfect, thank you very much for this video!👍 My first question: Do i understood you correctly, that the basic and less elegant solution (as shown after 12:45) doesn't need any code in Bricks (as shown after 11:07)? And second: Could you put the codes into your informations, so one could copy-paste it? Thank you anyway.

    • @Pixelyze-tech
      @Pixelyze-tech 25 днів тому

      I was looking for the code but I must of accidentally deleted it however I am going to do more components soon with cool effect also Custom Bricks Elements. In terms of what you asked, both are good options, all depends what you going to use it for and how you layout is going to be.

  • @sammyabdullkhan4123
    @sammyabdullkhan4123 28 днів тому

    Didn't know about this feature! This is a great feat for my clients

  • @mzvvz
    @mzvvz Місяць тому

    Nice bro!

  • @chrisrussell7954
    @chrisrussell7954 Місяць тому

    Thanks for this. Very useful

    • @Pixelyze-tech
      @Pixelyze-tech Місяць тому

      I'm glad you enjoyed it. There is more to come

  • @WickyDesign
    @WickyDesign Місяць тому

    Nice! Thanks for creating this video!

    • @Pixelyze-tech
      @Pixelyze-tech Місяць тому

      Glad you enjoyed it. Might dive deeper int WordPress db

  • @tobisalami
    @tobisalami Місяць тому

    This was good! Welldone! I appreciated the detail. More about SQL would be appreciated. Welldone!!

    • @Pixelyze-tech
      @Pixelyze-tech Місяць тому

      Thanks, much appricated. I am planning to make that soon to teach people and later will do more on coding.

  • @rookiesmarts
    @rookiesmarts Місяць тому

    Nice 👍

    • @Pixelyze-tech
      @Pixelyze-tech Місяць тому

      I hope you enjoyed it and was easy to follow

  • @LytboxStudio
    @LytboxStudio Місяць тому

    This is one of these vids we gotta have booked marked! Super useful especially when my normal WP tools aren't working (it happens!)

    • @Pixelyze-tech
      @Pixelyze-tech Місяць тому

      Thanks, the migration plugins are pointless when you can manually migrate a site in less than 2 minutes also Steven Spielberg might hire me for my amazing editing skills 😆

  • @clevermissfox
    @clevermissfox 2 місяці тому

    Appreciate this,i had no idea about this feature on local by flywheel

  • @Audulf-of-Frisia
    @Audulf-of-Frisia 2 місяці тому

    You need to be logged in into your Local account otherwise you can't enable the Live Link feature.

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      Yeah, that's what I said, and the project you working it needs to be on as it's your local server, It pretty much works same across different softwares

  • @bob-p7x6j
    @bob-p7x6j 2 місяці тому

    Thanks for this, looking forward to the next one!

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      Hoping to get the one I planned to record it soon

  • @LytboxStudio
    @LytboxStudio 2 місяці тому

    Great video, very clear and easy to understand. I hope to see more! Oh and I subbed 😎

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      I am planning next to do manual migration instead of using plugins.

  • @bob-p7x6j
    @bob-p7x6j 2 місяці тому

    Thanks for the video and interesting to see it go live and what is needed with that. Also, it would be interesting to see any and all modifications you make in the WP backend as well, permalinks etc, and any other changes from the download of WP to when you make it go live. Thanks again!

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      I'm glad this video was helpful. When I do tutorial on migration I will cover all the important parts that you need for making sure is migrated correctly for example database change as you need to update url in db once is migrated.

    • @bob-p7x6j
      @bob-p7x6j 2 місяці тому

      @@Pixelyze-tech Thank You

  • @lucianpascu8445
    @lucianpascu8445 2 місяці тому

    Why "You can use the same blueprint for every project but is better practice to separate your blueprints based on client requirements for example, you can have one blueprint for local businesses and another for WooCommerce."? Because of the database bloat or?

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      No is because if for example you have a website with same layout compare to a website that need something different you would keep them as a separate blueprint same as for ecommerce. Most ecommerce have standard functionality so you can have default blueprint for that and there could be a blueprint for more advanced like a listing directory. You wouldn't want to keep all eggs in the same basket, you would have a blueprint for small local businesses that don't need much complexity compare to a local business that requires more complexity. Untimely is up to you how you setup your process that works best for you.

    • @lucianpascu8445
      @lucianpascu8445 2 місяці тому

      @@Pixelyze-tech Thanks Andrzej :)

  • @lucianpascu8445
    @lucianpascu8445 2 місяці тому

    How do you get along with Local for Windows? Any issues with httpS? :)

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      There are no issues at all. All you have to do is set-up your project and before you open the dashboard, make sure you enable SSL and you be fine.

    • @lucianpascu8445
      @lucianpascu8445 2 місяці тому

      @@Pixelyze-tech I wonder how its working for you because I had a lot of issues with Local until I fixed them god know how :) I tried uninstalling & installing multiple times and did lots of tweaks as explained in their forums. Anyway, I played around with local when they first started and I had the same issues - that time I was on Windows 8 I believe :) Besides that, it seems very slow to work with. Is that the case for you too?

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      I had it issue before but that is because I haven't used it for a while and when I updated it caused confusion so I uninstalled it and installed back up and it's been working fine since than. If you experiencing slow loading, glitches, lagging etc is probably because of your device, you have to clean it from junk files, remove the garbage that is eating your ram etc. It's like a car, if you don't maintain it then it will start to break and long term it will no longer be useful.

    • @lucianpascu8445
      @lucianpascu8445 2 місяці тому

      @ That's understandable but I have a powerful PC. Local sites are my only issues 😀 They are a bit too slow to work with compared to a production site. I now keep my blueprint on local but work on staging subdomains.

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      You need to look into your setup. I don't have most powerful PC and works really good for me.

  • @lucianpascu8445
    @lucianpascu8445 2 місяці тому

    Hi Andrzej. How is this different/main differences compared to Kevin Geary's blueprint video?

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      I don't know about his video and to be honest, is irrelevant because there are dozens of videos on how to create simple web designs or components for your website but it's about if the person watching has learned something and was able to understand it. I saw most videos and was hard for me to learn from them as I couldn't understand 90% of what they were saying or doing, so I decided to make videos more educational and not for the sake of views

    • @lucianpascu8445
      @lucianpascu8445 2 місяці тому

      @@Pixelyze-tech 👍

  • @EliasRise
    @EliasRise 2 місяці тому

    Thanks for the Bricks video! An absolutely necessary topic, which I have not come across. super detailed! keep it up

  • @MortenVestergaard1
    @MortenVestergaard1 2 місяці тому

    Very interesting.. I have a few questions. You mention that you always develop a site on your localhost, but how do you then give your client access to view it? Usually there are things you want to show your client and things they want to see while building the site. Is there a cool way to just push to an online environment (like GitHub for example) or do you need to migrate it every time? Also, will themes and plugins not be outdated in the blueprint after a while? I guess that means that the sites will have outdated plugins too when you create one from a blueprint. Or is there a way that the blueprint site can keep all plugins updated automatically?

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      Yes, I always develop in a local environment because that is the proper way to do it. You can test code or functionality, etc. You shouldn't be doing this on a live server. There is an option to make it available to preview live by activating, and then you would just provide a password for the client. I would do a tutorial on that soon. When it comes to blueprint updates, how it works it's straight forward, when you create a blueprint, it has all the default setup or plugins you more than likely will reuse it. Before you use a blueprint on a new project, make sure everything is up to date. If you already use it on a project, then you need to update it manually on that project. If it's on a live server, then you should have a set-up to automate your updates, but before you do an update of a theme or plugin, create backup and then update it. One thing I forgot to mention on the video is, create generic username and password as you would use the same for projects that has the blueprint, once you migrate project from local to live server, change login credentials for security.

    • @MortenVestergaard1
      @MortenVestergaard1 2 місяці тому

      @@Pixelyze-tech Thank you for that. Gotta look more into it. I usually develop directly on a server - I just password protect it while it's being built. That way I can have more than one person develop on it simultaneously, and it's easy to get feedback from the client. And it's not really that much faster on a localhost. Anyways, that's the proper weay for us to do it :)

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      If you join any Dev Agency or get hired as a developer, you be working on a local environment before project goes to production. To get multiple devs working on single project, they would use git-repo, git-hub and get-kraken. If you only planning to use a builder to make simple project that is small and won't take long to make it, then just throw it on live server and build it in couple days but the proper way is always starting from local dev not production

    • @MortenVestergaard1
      @MortenVestergaard1 2 місяці тому

      ​@@Pixelyze-tech I’m not sure I agree. While using a local environment with Git is standard for heavy coding projects, working directly on a staging site can make perfect sense in many WordPress setups, especially for teams building with visual page builders or focusing on content. With a staging environment, you get real-time collaboration and team members can view each other's changes instantly, which is harder to do with Git because of risks of merge conflicts and delayed visibility. For complex, custom code, local development makes sense, but when the primary work is page building and content updates, staging offers a balance between safety and accessibility without over-complicating the workflow. But thanks for the video. It made me think :)

    • @Pixelyze-tech
      @Pixelyze-tech 2 місяці тому

      @@MortenVestergaard1 Stagging is ok for small project but if you working on Ecommerce than I wouldn't recommend, your hosting provide more than likely would say the same because when it comes to data and migrating database, it can get lost so there is a risk with staggin but small project like for example local cleaning company that might need maybe 3 or 5 pages nothing to fancy then sure. I would say go to different web agencies and see how they have it and what clients they work with then it will give you a good idea, probably best to do it.

  • @cyqot8784
    @cyqot8784 3 місяці тому

    It's amazing tutorial Please upload more Bricks with GSAP 🤩

    • @Pixelyze-tech
      @Pixelyze-tech 3 місяці тому

      @cyqot8784 I'm pleased you liked it. I will soon upload more tutorials. What things are you looking to learn?

  • @wppagebuilders
    @wppagebuilders 6 місяців тому

    Wow, this tutorial on creating a hover effect in Bricks Builder is super detailed! The step-by-step approach makes it so easy to follow along, even for someone who might not be super familiar with coding. I appreciate how you broke down the process of setting up containers and using CSS for the hover effect. The explanation about using relative and absolute positioning for the card content really clarified things for me. Plus, the tip about applying transition delays to create a smooth, staggered appearance of text is gold. Thanks for making this so accessible and easy to understand!

    • @Pixelyze-tech
      @Pixelyze-tech 6 місяців тому

      Thanks for your comment, I'm glad you learned something new, and I'm planning to add more tutorials around programming and designing

  • @Manolito-rh8dt
    @Manolito-rh8dt 6 місяців тому

    this is beautiful

    • @Pixelyze-tech
      @Pixelyze-tech 6 місяців тому

      @@Manolito-rh8dt Thanks, much appreciated it.

  • @Manolito-rh8dt
    @Manolito-rh8dt 6 місяців тому

    awesome!!!!

    • @Pixelyze-tech
      @Pixelyze-tech 6 місяців тому

      @@Manolito-rh8dt Thanks, I'm glad you liked it.

  • @AmitRoy
    @AmitRoy 7 місяців тому

    Able to share this template or code ?

  • @erling5148
    @erling5148 7 місяців тому

    very nice are you willing to share the code?

    • @adultsplaysports
      @adultsplaysports Місяць тому

      Agree. Super cool. The code would be a bonus!

  • @jiutian
    @jiutian 8 місяців тому

    Thanks for your video, it's exactly what I needed

  • @reufjaha123
    @reufjaha123 8 місяців тому

    Great tutorial, thank you for sharing this.

  • @EliasRise
    @EliasRise 8 місяців тому

    Thanks!

    • @Pixelyze-tech
      @Pixelyze-tech 8 місяців тому

      I'm glad you enjoyed the tutorial 😊

  • @icekiller5
    @icekiller5 8 місяців тому

    Great! Thank you Andrzej!