WordPress Pro recreates Apple.com in 30 minutes 🔥

Рет қаралды 10,773

Күн бұрын

Пікірлер: 105

@newunderthesun7353 8 ай бұрын

You popped in a pre built navigation bar, so as we try to follow along, we do not have that prebuilt navigation, and that would seriously impact your 30 minute build. For us newbies, leaving out those details and flying around the menu options in WP does us no good. If you would speak a little more slowly and explain what you are doing instead "click here" these videos would be a lot more useful. It is not a race. If these videos are meant to be instructive, you need to not skip over the details. But if these are just to show your expertise and speed, and using pre built things we do not have, then sure, you're the best and fastest...

@jamiewp 8 ай бұрын

Great point, it's a difficult balance to strike for sure.. The main purpose of these recreation videos is to inspire people to see what's possible with Gutenberg, with little learning points along the way. They're not meant as step by step guides. I do quite a few step by step tutorials on the channel though 😀

@newunderthesun7353 8 ай бұрын

@@jamiewp I understand it is not a step by step, but it is also not "inspirational". People are not inspired by what they cannot do. You can show me a guy losing 45 pounds and looking ripped, but it does not inspire me when I find out he was taking anavar and deca. You can say you built the Apple site in 30 minutes, but seeing the fast speed video and pre built iitems, and zero explanation is likewise not inspiring. You're just showing me that a beginner cannot do what you did. I tell tutors and instructors this all the time, the worst part of WP is opening a template and seeing a black and white template or other screen that looks nothing like the beautiful template you just purchased. THAT is the biggest obstacle to making or editing a good WP site - getting over that initial screen, going from template, to a usable interface where you can actually edit what you bought. So many instructors overlook that fundamental step in learning WP.

@jamiewp 8 ай бұрын

Honestly, I get lots and lots of people emailing me that this video series has inspired them to try gutenberg and block themes, and these videos get hundreds of likes and shares - so it's certainly working for some people. I've also just been commissioned to make one for Envato (1.8 million KZbin subscribers) so they are working for many people :) Sorry you find them frustrating, but i have made over 100 videos on Gutenberg on my KZbin channel that are step by step. I made this one last week which goes into great detail to try and explain things for beginners kzbin.info/www/bejne/nqfHZ5uVh9V5gK8si=K3Lp4EhiGDheSy5X and these are a big focus going forward. fyi that prebuilt navigation bar, the only thing i did was to publish the pages first. Everything else i showed i think. @@newunderthesun7353

@newunderthesun7353 8 ай бұрын

@@jamiewp I am certainly not questioning your skill or your good intentions, and I am a subscriber that appreciates your work. My critique is more from the standpoint of a frustrated designer and educator looking for resources and other teaching methods for my students, who just do not have an iota of an attention span. When you do your Envato series, just please speak more slowly and deliberately. If you watch your videos, AFTER your instructional portion you slow down your speech considerably. Same with your white board, you speak much more directly, but as soon as that mouse gets in your hand you hit the accelerator. Just observations, my friend, no worries. Wish you well.

@jamiewp 8 ай бұрын

👍@@newunderthesun7353 thanks very much for the feedback

@jdccool 7 ай бұрын

Enjoy these rebuilds, bigly. Thanks Jamie.

@jamiewp 7 ай бұрын

Cool and thanks 🙏

@DenisonCarlosMS 8 ай бұрын

Jamie, congratulations!!! The way you approach construction with the Block Editor is completely simple and intuitive. You make it seem like it's possible to create anything with the Block Editor and this gives us another point of view on how Gutenberg is frowned upon and maligned among admirers of Page Builders like Elementor, Beaver Builder and others. Keep up the informative and inspiring work!!! My like is guaranteed!

@jamiewp 8 ай бұрын

Thanks so much Denison, its great to hear that these are useful 👍

@jeosbeavadra9270 2 ай бұрын

Great video. If we could get a link to the ressources in order to imitate you, it'll be amazing. Please think about it next time.

@Whatreally123 Ай бұрын

Hi Jamies, This was good. Makes it very simple. However, I see you didn't add the 'Search' functionality in the header for this site. Well the core Gutenberg Search block severely lacks any design customisation. And I am not finding any other viable Search block. Can you recommend good Search blocks from other developers which have just a magnifying glass icon like on the Apple website and opens a drop down search field like on the Apple site?

@jamiewp Ай бұрын

Thanks - there is actually an option to just have an icon with the core Gutenberg search block

@LaraGough 4 ай бұрын

This was really useful. I recreated the site with you. In the apple site though you can click on the images and you will go to a page. Is this possible using cover images. Can you add a link to a cover image so that when clicked you will go to a new page? Thanks!

@jamiewp 4 ай бұрын

Hi Lara - yes it is 👍 check out this video kzbin.info/www/bejne/r3OkaatpprFmaK8si=83MAGG82vF6WsarV

@nickm1049 7 ай бұрын

This Apple site design is pretty basic, key is the high quality photos and graphics, something some clients don't always realize for their own site

@jamiewp 7 ай бұрын

Yup great point

@Wpespresso 8 ай бұрын

Really great job on this one, I still would like to see some tutorials on the mobile version if possible, there is any way you would be able to customize the breakpoints? How you manage that for your clients by custom code? Thanks 😊

@saikirolab 4 ай бұрын

Thanks for this, Jamie. I have a question : how can I reproduce the icon inside the button ?

@jamiewp 4 ай бұрын

There’s an option to add a inline image (in the floating toolbar)

@Drivingralle 8 ай бұрын

Love this type of video

@jamiewp 8 ай бұрын

Thanks Ralf ☺️

@VictoriaAlfredSmythe 7 ай бұрын

godaddy’s 365 is THE WORST.

@sevencaye 7 ай бұрын

Jusr commenting for the algo

@akrapovic09 6 ай бұрын

what im really confused by is that you're doing all of this on the template and not the page? You say in this video kzbin.info/www/bejne/iKSpfnuXm9-IsJY not to put content into your template!!! What the hell am i missing???

@jamiewp 6 ай бұрын

You are correct - i did this in the template for demo purposes so i could show the header design and page design in one video. But yes, ideally put content in pages.

@WhiteError37 7 ай бұрын

Is there really any difference going from default to astra. Looking at redesigning my current website and trying to determine if astra is going to be more of a hindrance. Using Gutenberg blocks but do a lot in the raw html

@jamiewp 7 ай бұрын

It really depends on the project - if you are comfortable with a block theme then great.

@jporiginal 8 ай бұрын

I've been enjoying your videos on website development and am interested in creating a website using the free version of the Astra theme, with a focus on affiliate marketing. Could you recommend any beginner-friendly videos that guide through setting up a blog grid on the homepage and essential features for affiliate marketing with Astra? Your insights would be incredibly helpful for newcomers like me.

@gunnar9542 8 ай бұрын

There is so much in this video that you can learn from it

@jamiewp 8 ай бұрын

thanks for watching 😀

@tsxpneo 7 ай бұрын

Hey, just a quick note. I like your "this all only takes minutes" to create/recreate videos and watch most of the time, but I'm afraid they may give some people (potential clients who would be served well with a simple block theme) the wrong impression of the effort it takes to create even a simple website in WordPress from scratch (just think of the work that a navigation block needs to actually "work"). Think small business owners who see your videos and then think they're being ripped off with agency/freelancer quote for, say, 2 workdays for hosting setup/ installation, simple "design" and content curation for, say, a local barbershop page who's just got a logo and potentially a colorscheme in terms of design assets.

@jamiewp 7 ай бұрын

Thanks and i hear you - it's a complex issue for sure, especially with the advent of AI tools that are now doing this in a few clicks (i have a Kadence AI coming out soon where my daughters try to build a website in 10 minutes). In my latest recreation video i recreated the NASA home page in 30 minutes but gave more context to how complex the overall project was. I'll try to do more of this in the future as I think it helps set the context better. Here's a link if you want to take a look at the introduction kzbin.info/www/bejne/Y5LJfoBurtCYo9ksi=BNr-esNYSNQcNLq1 . Let me know what you think.

@tsxpneo 7 ай бұрын

@@jamiewp Hey thanks for the amazingly quick reply, you keep in style with your fast videos ;) I looked at the Nasa video, and yes, you're right that it helps set the context better, but it mainly does so with respect to the scale of the integration, something which has its own challenges. As you say, more context would help, as a similarly looking website can cost 300 USD or 3000, 30K, or even more, like Nasa's, or Apple's which may, including all work hours of everyone involved potentially have cost 7 figures, including hosting at scale. My point is more that a lot ot the stuff needed for even simple websites (responsiveness, editor curation, pattern creation, etc) isn't mentioned because it's not relevant to your videos. Which is fair enough. But as you apparently agree, the context matters - so yeah, would be great if you mentioned it from time to time. I'm mentioning this today because I recently had a conversation of about 20! minutes explaining a fairly intelligent friend the difference between a domain and webspace when she wanted to hire someone to create a simple website for a relative's small business.

@jamiewp 7 ай бұрын

@@tsxpneo Yup it's a really interesting space atm. Last week I covered Canva's website building which is almost completely frictionless for a complete beginner. You got me thinking :)

@aaron2273 3 ай бұрын

Love your tutorials. They are great!! One aspect of the Apple website that would be great to do is that the whole of each section is clickable. Is it possible to do this in Wordpress?

@jamiewp 3 ай бұрын

Thanks Aaron - check out this video kzbin.info/www/bejne/r3OkaatpprFmaK8

@aaron2273 3 ай бұрын

@@jamiewp That is perfect. Thank you.

@jamiewp 3 ай бұрын

@@aaron2273 👍

@Tutman 7 ай бұрын

Great! Inspiring and educational. It goes beyond the possible scope of these videos of course, but Apple's top menu is a really nice mega menu. Tricky to do with FSE, I think, and I would really appreciate a few tips there. Also, it seems Apple has managed to make that mega menu sort of accessible to screen readers, using some special magic.

@jamiewp 7 ай бұрын

Thank you, there is hope that mega menus might be possible with WordPress 6.5 , but let's see :)

@robinerik7351 8 ай бұрын

Nice video! Can you please make a video/tutorial when you make a complete niche site/blog site? Would be amazing to see!

@jamiewp 8 ай бұрын

Any ideas on what niche? or is there a famous one i could base it on (that would make an interesting story)

@SuttonsNest 4 ай бұрын

I really enjoyed this video, that was a lot of fun. Nice work! I’ll be watching this one a few more times I think. 😊

@jamiewp 4 ай бұрын

Thanks Andrew :)

@bradburyrobinson 8 ай бұрын

Great video Jamie, it goes to show what can actually be done with the Gutenberg block editor. It also shows that the big brands out there aren't really doing anything overly fancy to sell their products. Granted, Apple's website will probably have a hell of a lot more going on in the background in terms of the technology used, but for average users, small businesses, etc. then the results are perfectly acceptable for a website.

@jamiewp 8 ай бұрын

Great point, i think most of the success of a website will come down to great design and storytelling.

@tomcha75 7 ай бұрын

If you create it as a template, then you always need to update the front page using the Appearance > Editor? How about for regular pages? Do you create them just regularly and edit them using Gutenberg (is that the same as block editor? I'm so confused) or do you create all of them with the editor and create them as templates??

@jamiewp 7 ай бұрын

Hi , great questions :) Yes with regular pages you create them in the normal way and edit using the Block Editor (which is also known as the Gutenberg Editor).

@tomcha75 7 ай бұрын

Thanks very much for the quick reply. Is there a reason you use the Appearance > Editor to make the front pages as a template instead of just editing them in the Pages section?

@jamiewp 7 ай бұрын

@@tomcha75 in this case it just makes for an easier demo and so i could show the navigation and the page being built together. Ideally you would want templates keep separate from content 👍

@tomcha75 7 ай бұрын

@@jamiewp Thanks. So I can just use the template section for building headers and footers, and use the Pages to build the rest of the pages. Having too many options are confusing. I guess I can use the template section to build templates for pages or posts if I don't like the theme's default templates?

@jamiewp 7 ай бұрын

@@tomcha75 yes exactly right 👍

@iconictemplates 8 ай бұрын

This is great! Thank you for this. I'm going to have my designer and dev use this as inspiration for our FSE transition this year.

@jamiewp 8 ай бұрын

Fab, tks for commenting :)

@epowelson 7 ай бұрын

Fantastic video. I would LOVE a video where you take what you've created here and properly build out Apple's mega menu. IMO it really is the star of the page. It's beautifully minimalistic, with some elegant subtleties that I can't find anywhere else. e.g. dropdown speed is perfect and not jarring, text columns in mega menu populate top to bottom AND left to right, page (background) blurs as menu expands, and as you scroll, the header is not only a semi-transparent layer (os opposed to opaque) that also has a blur effect that keeps background text/objects from being too visible when scrolling through that plane.

@jamiewp 7 ай бұрын

Thank you and yes that's is on my list, but I'm waiting to be able to do this in WordPress core which is coming (but I'm not 100% clear on the eta)

@epowelson 7 ай бұрын

@@jamiewp that's exciting to hear! *Subscribed*!

@wally1979 7 ай бұрын

HI! First of all thank you so much, no wasting of time, directly to the point. But how do I keep the sticky menu, when I open other page? Please :)

@jamiewp 7 ай бұрын

Hi, at the moment one way is to edit the other templates in the same way.

@wally1979 7 ай бұрын

Thank you so much@@jamiewp . done!

@douglasallen5243 8 ай бұрын

Love these videos! Interesting that you build the page as a template? Seems to be the approach twenty twenty four took as well. I have been creating a page template with header, content and footer then go into the page to build it???

@jamiewp 8 ай бұрын

Thanks Douglas - your approach is great. For these quick videos i try to keep things as simple as possible. Thats always a balance thats quite hard to get right, but hopefully they inspire some people to give gutenberg and blocks themes a try .

@visualmodo 7 ай бұрын

Excellent content :))

@jamiewp 7 ай бұрын

Thank you!

@cholo2605 8 ай бұрын

Hi Jamie , I'm using a group on each of my sections in the page, do you think is unnecessary wrapping all of my section in a group, thanks in advance

@jamiewp 8 ай бұрын

So you are not using cover blocks?

@cholo2605 8 ай бұрын

@@jamiewp I'm sorry Jamie ii i wasn't very clear, I'm talking generally not about this theme, it's just i have this doubt when i'm developing my block theme i always wrap all my sections in a group, even if it ' is columns, rows, etc.. and i don't if it is a got practice. thanks for answering 🙏

@sandyshade9749 8 ай бұрын

Your demonstration was easy to follow. This looks a lot more fun than the previous versions. Thank you!

@jamiewp 8 ай бұрын

thanks Sandy

@oliverreese272 8 ай бұрын

Thanks for your super Input. I love it.

@jamiewp 8 ай бұрын

Thanks Oliver

@yashancientbeast 7 ай бұрын

i was looking for something like this. thank you so much!!!

@jamiewp 7 ай бұрын

Great to hear 👍

@derek-hanson 8 ай бұрын

Love the carousel block! Used it on several client websites.

@jamiewp 8 ай бұрын

Yup it's cool

@kaeden2088 8 ай бұрын

Can you put in word to get a carousel naturally built into Gutenberg! Btw love the videos

@jamiewp 8 ай бұрын

thank you 😀 for me carousels feel like they should stay as plugins (i think)

@kaeden2088 8 ай бұрын

@@jamiewp if you don’t mind, why?

@jamiewp 8 ай бұрын

Good question 👍@@kaeden2088 Because the vast majority of sites won't ever use a carousel - that's always my guide on whether something should go into core or not. But it's always a balance to strike for the gutenberg dev team for sure and I can see both sides of the argument.