Frontend Hero
Frontend Hero
  • Видео 35
  • Просмотров 56 096
Creating a McDonald's Fries Animation
My attempt at recreating the loading screen of the #mcdonalds app 😅
If you'd like to support me, and are interested in downloading the code used for this tutorial: frontendhero.dev/download/mcdonalds-fries/
_______________________________________
Music I use: Bensound
'As Your World Grows Smaller' by Diffie Bosman.
License code: UEMDHBTHQH8JL62B
'Sunset Reverie' by Tomas Novoa.
License code: OFGFZHXY5RMJN9DS
'Prism' by Theatre Of Delays.
License code: AXZQ7CRPHTTA0IQC
'Embracing the Sky' by Nick Petrov.
License code: ZWZLVATHV8GUQGRW
'Sunlit Depths' by Sound EGO.
License code: LKHHDKJ3ZQ5QJ5HJ
'Hearty' by Aventure.
License code: O5J7GZ1SUDJ7IRDF
'Against All Odds' by Nick Petrov.
License code: GFRVYE8DXWP...
Просмотров: 90

Видео

Dynamic Recipient Email Address Based on Dropdown Menu With Contact Form 7
Просмотров 79511 месяцев назад
In this WordPress & Contact Form 7 tutorial, we will look at sending contact form submissions to specific email addresses, depending on the enquiry type. Support Me 🛟 💻 www.frontendhero.dev/ 🤝 www.patreon.com/frontend_hero ☕️ ko-fi.com/frontendhero
11. Footer | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 6611 месяцев назад
This is the thirteenth part in my series on creating a corporate HTML/CSS/JS website from scratch. In this video, we'll be creating the footer, with an area for our contact information, some links, and a newsletter. Support Me 🛟 💻 www.frontendhero.dev/ 🤝 www.patreon.com/frontend_hero ☕️ ko-fi.com/frontendhero Videos In the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part...
10. Testimonials Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 9711 месяцев назад
This is the twelfth part in my series on creating a corporate HTML/CSS/JS website from scratch. In this video, we'll be creating a testimonials block where we will display a photo and quote from our customers. Support Me 🛟 💻 www.frontendhero.dev/ 🤝 www.patreon.com/frontend_hero ☕️ ko-fi.com/frontendhero Videos In the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | ...
09. Our Team Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 17311 месяцев назад
This is the eleventh part in my series on creating a corporate HTML/CSS/JS website from scratch. In this video, we'll be creating a Team block where we will list all of our team members of our company. Support Me 🛟 💻 www.frontendhero.dev/ 🤝 www.patreon.com/frontend_hero ☕️ ko-fi.com/frontendhero Videos In the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project ...
08. Pricing Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 96Год назад
This is the tenth part in my series on creating a corporate HTML/CSS/JS website from scratch. In this video, we'll be creating a pricing table to show potential customers our three different pricing packages on offer. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD76aKjs/видео.html Part 03 | Top Bar: ruclips.net/...
07. Our Clients Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 191Год назад
This is the ninth part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be showcasing some of our clients in its own little section on the homepage. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD76aKjs/видео.html Part 03 | Top Bar: ruclips.net/video/heONZq0zjRg/видео.html Part 04 | He...
06. Services Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 110Год назад
This is the eight part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be creating the services section today that will include a background colour, and all of the services that we offer. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD76aKjs/видео.html Part 03 | Top Bar: ruclips.net/v...
05. Hero Section | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 109Год назад
This is the seventh part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be creating the hero section today that will include an background image, an SVG cut out overlaying the background image, and some call to action text, and a link. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD7...
04. Header - Part 3 | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 153Год назад
This is the sixth part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be continuing on finishing up the global header area, making the primary navigation area responsive, and adding in a hamburger button for mobile view. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD76aKjs/видео.htm...
Build a Stylish Custom Google Map With The Google Maps API
Просмотров 11 тыс.Год назад
In this week’s Frontend Hero tutorial, we will be creating a custom google map, generating our API key, using custom markers, using snazzy maps to generate a light color scheme, and we will centre everything within the bounds of our markers. Download code: frontendhero.lemonsqueezy.com/buy/7cff9507-2a71-4c20-8a76-07d546604afe Support Me 🛟 💻 www.frontendhero.dev/ 🤝 www.patreon.com/frontend_hero ...
04. Header - Part 2 | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 215Год назад
This is the fifth part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be continuing on creating the global header area, making the search area and logo responsive, and adding in a hamburger button for mobile view. There will be one final part for this header area. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Se...
04. Header - Part 1 | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 151Год назад
This is the fourth part in my series on creating a corporate HTML/CSS/JS website from scratch. We'll be creating the global header area, with the logo and primary navigation inside. Videos in the Series 🎥 Part 01 | Intro : ruclips.net/video/ru_UxV80r3U/видео.html Part 02 | Project Setup: ruclips.net/video/O5xwD76aKjs/видео.html Part 03 | Top Bar: ruclips.net/video/heONZq0zjRg/видео.html Part 04...
03. Top Bar | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 211Год назад
03. Top Bar | Building a Corporate HTML/CSS/JS Website From Scratch
02. Project Setup | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 266Год назад
02. Project Setup | Building a Corporate HTML/CSS/JS Website From Scratch
01. Intro | Building a Corporate HTML/CSS/JS Website From Scratch
Просмотров 240Год назад
01. Intro | Building a Corporate HTML/CSS/JS Website From Scratch
How to Create a Scrolling Call to Action Marquee Button With HTML, CSS, & JavaScript
Просмотров 593Год назад
How to Create a Scrolling Call to Action Marquee Button With HTML, CSS, & JavaScript
Building a Pomodoro Timer From Scratch | HTML, CSS, JavaScript Project
Просмотров 2,1 тыс.Год назад
Building a Pomodoro Timer From Scratch | HTML, CSS, JavaScript Project
Building a Slick Navigation Menu With Animated Indicator | HTML, CSS, Vanilla JS
Просмотров 415Год назад
Building a Slick Navigation Menu With Animated Indicator | HTML, CSS, Vanilla JS
Create an A-Z Filter For Your Wordpress Posts
Просмотров 1,2 тыс.Год назад
Create an A-Z Filter For Your Wordpress Posts
How I FTP Commits to My Host via Github
Просмотров 5 тыс.Год назад
How I FTP Commits to My Host via Github
Build a Creative Animated Hero with CSS Keyframes
Просмотров 403Год назад
Build a Creative Animated Hero with CSS Keyframes
Adding Dropdown Arrow Indicators With Font Awesome
Просмотров 6 тыс.4 года назад
Adding Dropdown Arrow Indicators With Font Awesome
Create a Recent Posts Gutenberg Block with Advanced Custom Fields
Просмотров 2,4 тыс.4 года назад
Create a Recent Posts Gutenberg Block with Advanced Custom Fields
Create a responsive overlay menu
Просмотров 7205 лет назад
Create a responsive overlay menu
Mask text with an image in CSS
Просмотров 7245 лет назад
Mask text with an image in CSS
Show/hide header on scroll detection
Просмотров 4,7 тыс.6 лет назад
Show/hide header on scroll detection
Create a staggered animated menu with CSS
Просмотров 4837 лет назад
Create a staggered animated menu with CSS
Sprite Animation With CSS
Просмотров 8157 лет назад
Sprite Animation With CSS
Creating CSS only bullet points
Просмотров 1,3 тыс.7 лет назад
Creating CSS only bullet points

Комментарии

  • @J.DickJones
    @J.DickJones Месяц назад

    Thanks for this!

  • @GonzaloGuevaraFreire
    @GonzaloGuevaraFreire Месяц назад

    Funcionó bien gracias, muy util para hosting compartidos, pude hacer deploy en dos ramas separadas, test y producción

  • @justreddit2074
    @justreddit2074 2 месяца назад

    Can I create a google maps page which I and other people pin favored local stores

    • @FrontendHero
      @FrontendHero 2 месяца назад

      Hi, yep you can: www.google.com/earth/outreach/learn/visualize-your-data-on-a-custom-map-using-google-my-maps/#collaborate-with-colleagues-5-3

  • @FrontendHero
    @FrontendHero 2 месяца назад

    Code used in this video can be downloaded here: frontendhero.dev/download/mcdonalds-fries/

  • @vladyslav8362
    @vladyslav8362 4 месяца назад

    That's very usefull video, but how to do this with new Advanced Markers?

    • @FrontendHero
      @FrontendHero 4 месяца назад

      What are advanced markers?

  • @mari5258
    @mari5258 5 месяцев назад

    Which Google api do you think would be best to use if I wanted to guide people using my customized map?

    • @FrontendHero
      @FrontendHero 5 месяцев назад

      developers.google.com/maps/documentation/directions/overview

  • @VikashShekhawat-y9v
    @VikashShekhawat-y9v 5 месяцев назад

    Thank You Very Much Team , this video is awesome it helps me lot and I resolve my issue with Elementor Contact Form

  • @VikashShekhawat-y9v
    @VikashShekhawat-y9v 5 месяцев назад

    Great Video !! But I want to Apply this functionality with Elementor Contact Form , how it is possible

    • @FrontendHero
      @FrontendHero 5 месяцев назад

      Thank you! I’m sorry I don’t have much experience with Elementer

    • @VikashShekhawat-y9v
      @VikashShekhawat-y9v 5 месяцев назад

      @@FrontendHero Please try with this , It is the problem of many user , it can give you new boost

    • @FrontendHero
      @FrontendHero 5 месяцев назад

      @user-my7mq4dz7g you can probably use this tutorial with this? wordpress.org/plugins/ht-contactform/

  • @mostafijurrahman4195
    @mostafijurrahman4195 5 месяцев назад

    file not uploaded but folder created how to fix this issue?

  • @pierrebonnet2916
    @pierrebonnet2916 5 месяцев назад

    Is it possible to do the opposite (upload from ftp server to the github repo) ?

  • @FunQuizzy88
    @FunQuizzy88 5 месяцев назад

    greatt video, can you make a google map marker clustering too?

  • @karanarora7386
    @karanarora7386 6 месяцев назад

    Can We Use your Maps API key?

  • @turkisultan8078
    @turkisultan8078 6 месяцев назад

    HE IS A SCAMMER !!!

  • @dotnetdevni
    @dotnetdevni 6 месяцев назад

    would it not be better calling it prod or production

    • @FrontendHero
      @FrontendHero 6 месяцев назад

      Whatever works for you ✌🏻

  • @FrontendHero
    @FrontendHero 6 месяцев назад

    Code is available here www.frontendhero.dev/download/stylish-google-map/ ✌🏻

    • @ClayRavin
      @ClayRavin 13 дней назад

      Thanks for this! There's a typo in the second-last line of index.html. "<script dfer" instead of "<script defer"

    • @FrontendHero
      @FrontendHero 12 дней назад

      Ah great spot, thanks so much Clay 🙏

  • @getRekt1234
    @getRekt1234 6 месяцев назад

    Woow nice

  • @johnjohnjman
    @johnjohnjman 7 месяцев назад

    Hi, at 0:23, what program did you open to begin doing this. Sorry I am a complete beginner in wordpress and coding

    • @FrontendHero
      @FrontendHero 7 месяцев назад

      Hi there - I used Dreamweaver in this tutorial but Id recommend VS Code instead as it’s more powerful, and free.

    • @johnjohnjman
      @johnjohnjman 7 месяцев назад

      ​@@FrontendHero Thanks, yes I end up using VS Code for my local site. But I don't know how to get the files for my online site. Also at 2:49, I don't know where to insert the code for the styling. I don't see a header called "A-Z Filter" in the style.css file. How do I get to the right place?

    • @johnjohnjman
      @johnjohnjman 6 месяцев назад

      I still don't know how to style the A-Z php we just created?

  • @tulasimohanmolli5857
    @tulasimohanmolli5857 7 месяцев назад

    Does the Github repo need to be Public?

    • @KeithDonegan
      @KeithDonegan 7 месяцев назад

      Nope, private repos should work fine

  • @deivids47
    @deivids47 7 месяцев назад

    Exactly what I was looking for - 1. Create Pins 2. Dynamically generate pin popups 3. Style the map F-Mint 👍

    • @FrontendHero
      @FrontendHero 7 месяцев назад

      Appreciate the comment ❤️

    • @deivids47
      @deivids47 7 месяцев назад

      Btw, is there somewhere to copy the code from?

    • @FrontendHero
      @FrontendHero 7 месяцев назад

      Sure thing: frontendhero.lemonsqueezy.com/buy/7cff9507-2a71-4c20-8a76-07d546604afe

  • @sabeeli7814
    @sabeeli7814 7 месяцев назад

    does it also work on VPS servers?

    • @FrontendHero
      @FrontendHero 7 месяцев назад

      Yep 👍🏻

    • @sabeeli7814
      @sabeeli7814 7 месяцев назад

      @@FrontendHero Thanks but I don't know why it is not working, it was working well with the previous shared server.

    • @sabeeli7814
      @sabeeli7814 7 месяцев назад

      @@FrontendHero I just entered IP address in the server attribute

    • @FrontendHero
      @FrontendHero 7 месяцев назад

      @sabeeli7814 check if the ftp details are correct first I reckon?

    • @sabeeli7814
      @sabeeli7814 7 месяцев назад

      @@FrontendHero yes I am able to access through these details on Cyberduck

  • @MrBurns-fx2li
    @MrBurns-fx2li 8 месяцев назад

    how can I code the API key, if I want to publish my website?

    • @FrontendHero
      @FrontendHero 8 месяцев назад

      How do you mean ‘code’ the API key?

    • @karthikeyanv661
      @karthikeyanv661 7 дней назад

      ​@@FrontendHero I think he meant 'encrypt ' or 'encode'

  • @ninefx9724
    @ninefx9724 8 месяцев назад

    Can you setup different servers for different branches ?

    • @tomasberezny2082
      @tomasberezny2082 2 месяца назад

      I didnt try this, but hes made main.yml file, so i thing if you try to create in with your branch name, it can work

  • @fervic27
    @fervic27 8 месяцев назад

    Good help my friend! Thanks! Do you know about dynamic fields or conditional fields... I used but it's a little confussed

  • @farelganlaky1536
    @farelganlaky1536 8 месяцев назад

    can u do a whole playlist about google maps api please? directions API, places API, routes API, etc.... Your explanations are so greattttt. I would be more than grateful

    • @FrontendHero
      @FrontendHero 8 месяцев назад

      I’ll do my best to get some up. Thanks for the comment 🙏

  • @dariakosicka5376
    @dariakosicka5376 9 месяцев назад

    Hi, do you know if I can import the data from a custom Google "My Maps" that I created, into Google Maps API. I want all the custom locations and layers I entered into My Maps to be accessible in my Google Maps API map. Is that possible?

    • @FrontendHero
      @FrontendHero 9 месяцев назад

      Hey there 👋🏻 I don’t think you can without modifying the code and manually adding the data in. How many locations are there? I could help with this if you’d like to email me.

  • @Hey-jv3zv
    @Hey-jv3zv 9 месяцев назад

    hi sir, can i ask if a customized map is applicable for it, we’re planning to make a site or a building blueprint map for our campus but I don’t know how to, thank you

    • @FrontendHero
      @FrontendHero 9 месяцев назад

      Hi, not sure I understand your question?

  • @zherebetskyi
    @zherebetskyi 9 месяцев назад

    Thank you for this lesson!

  • @DamianEngelhardt-m7v
    @DamianEngelhardt-m7v 10 месяцев назад

    Thank you for your great video. But is it also possible to do have like three different output options instead of only two? I need one for the option displayed in the form and one for the email recipient as shown in the video. But the Subject should be different from the options shown in the Contact Form.

    • @FrontendHero
      @FrontendHero 10 месяцев назад

      Hi there. How do you mean exactly? ‘Three different output options’? Shoot me an email and I might have some time tomorrow to look into it.

  • @elbertjosesalasbrochero6318
    @elbertjosesalasbrochero6318 11 месяцев назад

    products?

    • @FrontendHero
      @FrontendHero 11 месяцев назад

      Hi, are you asking if this can be used with woocommerce products? Yes if so, you just need to tweak the WP_Query options.

  • @angela_u1
    @angela_u1 11 месяцев назад

    can we get spinner gif

    • @FrontendHero
      @FrontendHero 11 месяцев назад

      Hi, included in the download in the description. Thanks.

  • @KevinSatron
    @KevinSatron 11 месяцев назад

    is this code only compatible for that theme? or any theme? i also have a few questions

    • @FrontendHero
      @FrontendHero 11 месяцев назад

      Hi Kevin. You can use this for any theme by tweaking the WP_QUERY ARGS to suit what posts/category you would like to filter.

    • @KevinSatron
      @KevinSatron 11 месяцев назад

      @@FrontendHero how do you put the code in the wordpress, i dont see it in the video how to do it

    • @FrontendHero
      @FrontendHero 11 месяцев назад

      @@KevinSatron0:22

  • @nanaquashie
    @nanaquashie Год назад

    New subscriber! I'm a recent Computer Science graduate with interest in frontend. I hope to continue my journey with you. Keep up the good work!

    • @FrontendHero
      @FrontendHero Год назад

      Thanks so much for being apart of the channel ❤️

  • @OmNamahShivay53
    @OmNamahShivay53 Год назад

    Waiting for the remaining videos.

  • @Dampdolphin
    @Dampdolphin Год назад

    This is awesome and its also better you share the code as well initially.Thank you !!

    • @FrontendHero
      @FrontendHero Год назад

      Thank you - I've got a few videos in the works, and just trying to find time to edit each one. I'll sort out open sourcing the code when I'm further along.

    • @Dampdolphin
      @Dampdolphin Год назад

      @@FrontendHero Thank you

  • @darioamade6040
    @darioamade6040 Год назад

    Nice one ☝️

  • @rajap8630
    @rajap8630 Год назад

    Good one keep up the good work rolling bro !!

    • @FrontendHero
      @FrontendHero Год назад

      Thanks so much for the support, Raja 🙏

  • @jismislakhotia3564
    @jismislakhotia3564 Год назад

    hi, i've been following your tutorial, but have hit a problem that i'm not sure how to solve. (important context: i am simply filtering through a list of titles, not a list of posts). the moment that i use .addClass('show'), the buttons are somehow deactivated and don't work anymore. For example, if the first letter that comes up is 'c', then the page will show all 'c' results, but will not let me click any other active letter. not sure what is causing this..

    • @FrontendHero
      @FrontendHero Год назад

      Hi there, hard for me to say - is there any error in the console? Contact me via email if you still have this issue and I'll take a quick look.

  • @rajkumargupta6791
    @rajkumargupta6791 Год назад

    Dhanyawad ❤ from India❤

  • @darioamade6040
    @darioamade6040 Год назад

    Brilliant

  • @gamers_hub_yt
    @gamers_hub_yt Год назад

    Keep up the good work man!

  • @EmmaCollis-m7r
    @EmmaCollis-m7r Год назад

    Thanks for this, how do I integrate this to a Wordpress menu? 🧐

    • @FrontendHero
      @FrontendHero Год назад

      Good question, I might make a little video on this in the future 🙂

  • @thefonsotube
    @thefonsotube Год назад

    Dreamweaver CC .... respect

  • @joemelara502
    @joemelara502 2 года назад

    Hi, can a paywall be installed in squarespace? Let me know, I need help

  • @MaksymMinenko
    @MaksymMinenko 2 года назад

    The demo link doesn't work...

  • @esasrl3384
    @esasrl3384 3 года назад

    Excellent video and very well explained! Big respect from Italy 🇮🇹

    • @FrontendHero
      @FrontendHero 3 года назад

      Many thanks for the words of encouragement 😊

  • @gam1ng1s4l1fe
    @gam1ng1s4l1fe 3 года назад

    nice

  • @BIHtrinify
    @BIHtrinify 3 года назад

    Is there any way to make the same functionality but with a category selection and do it as a slider ? Any tutorials on that or github examples ?

  • @LofiWurld
    @LofiWurld 3 года назад

    Magical person👏

  • @zensukai
    @zensukai 3 года назад

    Awesome tutorial, thanks for that. Question: We are controlling how many posts are display based on the grid layout (ACF option), but how can we also control how many posts are shown? As we are using the variable [posts_per_page] already?

  • @LeCreepzter
    @LeCreepzter 3 года назад

    can anyone explain the $class_name = isset($block['className']) ? $class_name : ""; line ? I understand the ternary operator part, but im confused as the ? $class_name Doesn't this assign the variable to itself?

    • @carltongordon
      @carltongordon 3 года назад

      it means if isset($block['className']) end null then asign " " to $class_name instead of returning an error

    • @LeCreepzter
      @LeCreepzter 3 года назад

      @@carltongordon ah, thank you!