- Видео 35
- Просмотров 56 096
Frontend Hero
Великобритания
Добавлен 10 окт 2016
Frontend Hero is about all things HTML, CSS & JavaScript*
*With some other bits and bobs thrown in for good measure.
*With some other bits and bobs thrown in for good measure.
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...
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
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
Thanks for this!
Funcionó bien gracias, muy util para hosting compartidos, pude hacer deploy en dos ramas separadas, test y producción
Can I create a google maps page which I and other people pin favored local stores
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
Code used in this video can be downloaded here: frontendhero.dev/download/mcdonalds-fries/
That's very usefull video, but how to do this with new Advanced Markers?
What are advanced markers?
Which Google api do you think would be best to use if I wanted to guide people using my customized map?
developers.google.com/maps/documentation/directions/overview
Thank You Very Much Team , this video is awesome it helps me lot and I resolve my issue with Elementor Contact Form
Great Video !! But I want to Apply this functionality with Elementor Contact Form , how it is possible
Thank you! I’m sorry I don’t have much experience with Elementer
@@FrontendHero Please try with this , It is the problem of many user , it can give you new boost
@user-my7mq4dz7g you can probably use this tutorial with this? wordpress.org/plugins/ht-contactform/
file not uploaded but folder created how to fix this issue?
Is it possible to do the opposite (upload from ftp server to the github repo) ?
greatt video, can you make a google map marker clustering too?
Can We Use your Maps API key?
Afraid not 😃
HE IS A SCAMMER !!!
Are you ok?
would it not be better calling it prod or production
Whatever works for you ✌🏻
Code is available here www.frontendhero.dev/download/stylish-google-map/ ✌🏻
Thanks for this! There's a typo in the second-last line of index.html. "<script dfer" instead of "<script defer"
Ah great spot, thanks so much Clay 🙏
Woow nice
Hi, at 0:23, what program did you open to begin doing this. Sorry I am a complete beginner in wordpress and coding
Hi there - I used Dreamweaver in this tutorial but Id recommend VS Code instead as it’s more powerful, and free.
@@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?
I still don't know how to style the A-Z php we just created?
Does the Github repo need to be Public?
Nope, private repos should work fine
Exactly what I was looking for - 1. Create Pins 2. Dynamically generate pin popups 3. Style the map F-Mint 👍
Appreciate the comment ❤️
Btw, is there somewhere to copy the code from?
Sure thing: frontendhero.lemonsqueezy.com/buy/7cff9507-2a71-4c20-8a76-07d546604afe
does it also work on VPS servers?
Yep 👍🏻
@@FrontendHero Thanks but I don't know why it is not working, it was working well with the previous shared server.
@@FrontendHero I just entered IP address in the server attribute
@sabeeli7814 check if the ftp details are correct first I reckon?
@@FrontendHero yes I am able to access through these details on Cyberduck
how can I code the API key, if I want to publish my website?
How do you mean ‘code’ the API key?
@@FrontendHero I think he meant 'encrypt ' or 'encode'
Can you setup different servers for different branches ?
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
Good help my friend! Thanks! Do you know about dynamic fields or conditional fields... I used but it's a little confussed
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
I’ll do my best to get some up. Thanks for the comment 🙏
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?
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.
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
Hi, not sure I understand your question?
Thank you for this lesson!
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.
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.
products?
Hi, are you asking if this can be used with woocommerce products? Yes if so, you just need to tweak the WP_Query options.
can we get spinner gif
Hi, included in the download in the description. Thanks.
is this code only compatible for that theme? or any theme? i also have a few questions
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.
@@FrontendHero how do you put the code in the wordpress, i dont see it in the video how to do it
@@KevinSatron0:22
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!
Thanks so much for being apart of the channel ❤️
Waiting for the remaining videos.
This is awesome and its also better you share the code as well initially.Thank you !!
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.
@@FrontendHero Thank you
Nice one ☝️
Good one keep up the good work rolling bro !!
Thanks so much for the support, Raja 🙏
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..
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.
Dhanyawad ❤ from India❤
🙏
Brilliant
Keep up the good work man!
Thanks so much
Thanks for this, how do I integrate this to a Wordpress menu? 🧐
Good question, I might make a little video on this in the future 🙂
Dreamweaver CC .... respect
😂
Hi, can a paywall be installed in squarespace? Let me know, I need help
The demo link doesn't work...
Excellent video and very well explained! Big respect from Italy 🇮🇹
Many thanks for the words of encouragement 😊
nice
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 ?
Magical person👏
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?
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?
it means if isset($block['className']) end null then asign " " to $class_name instead of returning an error
@@carltongordon ah, thank you!