WordPress Pro recreates Apple.com in 30 minutes 🔥

Поделиться
HTML-код
  • Опубликовано: 7 сен 2024

Комментарии • 107

  • @DenisonCarlosMS
    @DenisonCarlosMS 7 месяцев назад +5

    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
      @jamiewp  7 месяцев назад +1

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

  • @jdccool
    @jdccool 6 месяцев назад +3

    Enjoy these rebuilds, bigly. Thanks Jamie.

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

      Cool and thanks 🙏

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

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

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

      thanks Sandy

  • @gunnar9542
    @gunnar9542 7 месяцев назад +1

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

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

      thanks for watching 😀

  • @SuttonsNest
    @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
      @jamiewp  4 месяца назад

      Thanks Andrew :)

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

    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.

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

    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
      @jamiewp  7 месяцев назад

      Fab, tks for commenting :)

  • @saikirolab
    @saikirolab 3 месяца назад

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

    • @jamiewp
      @jamiewp  3 месяца назад +1

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

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

    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 😊

  • @derek-hanson
    @derek-hanson 7 месяцев назад

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

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

      Yup it's cool

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

    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
      @jamiewp  6 месяцев назад

      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
      @epowelson 6 месяцев назад

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

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

    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.

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

    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
      @jamiewp  7 месяцев назад

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

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

    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
      @jamiewp  2 месяца назад

      Thanks Aaron - check out this video ruclips.net/video/yBA8x3qL32M/видео.html

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

      @@jamiewp That is perfect. Thank you.

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

      @@aaron2273 👍

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

    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
      @jamiewp  6 месяцев назад +1

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

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

      Thank you so much@@jamiewp . done!

  • @LaraGough
    @LaraGough 3 месяца назад

    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
      @jamiewp  3 месяца назад

      Hi Lara - yes it is 👍 check out this video ruclips.net/video/yBA8x3qL32M/видео.htmlsi=83MAGG82vF6WsarV

  • @Whatreally123
    @Whatreally123 15 дней назад

    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
      @jamiewp  14 дней назад

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

  • @Drivingralle
    @Drivingralle 7 месяцев назад +3

    Love this type of video

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

      Thanks Ralf ☺️

  • @Tutman
    @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
      @jamiewp  7 месяцев назад

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

  • @newunderthesun7353
    @newunderthesun7353 7 месяцев назад +4

    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
      @jamiewp  7 месяцев назад

      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
      @newunderthesun7353 7 месяцев назад +1

      @@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
      @jamiewp  7 месяцев назад +1

      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 RUclips subscribers) so they are working for many people :)
      Sorry you find them frustrating, but i have made over 100 videos on Gutenberg on my RUclips channel that are step by step.
      I made this one last week which goes into great detail to try and explain things for beginners ruclips.net/video/hvd6h_RpFJM/видео.htmlsi=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
      @newunderthesun7353 7 месяцев назад +1

      @@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
      @jamiewp  7 месяцев назад

      👍@@newunderthesun7353 thanks very much for the feedback

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

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

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

      Great to hear 👍

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

    Love this Jamie!

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

      thank you

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

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

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

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

  • @juts_sama
    @juts_sama 7 месяцев назад +4

    You be shaking up the WP community. Why use builders or agencies when you can go solo.

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

    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
      @jamiewp  6 месяцев назад

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

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

    Thanks for your super Input. I love it.

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

      Thanks Oliver

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

    Another great video! Thank you!

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

      Thanks Brad

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

    Excellent content :))

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

      Thank you!

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

    Love this Jamie!

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

      Thank you 🙏

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

    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
      @jamiewp  6 месяцев назад

      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
      @tomcha75 6 месяцев назад

      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
      @jamiewp  6 месяцев назад +1

      @@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
      @tomcha75 6 месяцев назад

      @@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
      @jamiewp  6 месяцев назад +1

      @@tomcha75 yes exactly right 👍

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

    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
      @jamiewp  7 месяцев назад

      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 .

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

    THANK YOU!!! :)

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

      You're welcome!

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

    great job!

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

      Thank you 🙏

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

    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
      @jamiewp  7 месяцев назад

      So you are not using cover blocks?

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

      @@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 🙏

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

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

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

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

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

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

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

      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.

  • @muhibul-haque
    @muhibul-haque 7 месяцев назад

    Awesome 🥰

    • @jamiewp
      @jamiewp  7 месяцев назад +1

      Thanks 🙏

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

    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
      @jamiewp  6 месяцев назад

      Yup great point

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

    Jusr commenting for the algo

  • @tsxpneo
    @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
      @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 ruclips.net/video/-afMM8ykemw/видео.htmlsi=BNr-esNYSNQcNLq1 . Let me know what you think.

    • @tsxpneo
      @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
      @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 :)

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

    Another home run. Twenty Twenty Four is so much fun.

    • @jamiewp
      @jamiewp  7 месяцев назад +1

      Wait til you see what is coming in WordPress 6.5 - it could be mega (menu). :)

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

      @@jamiewp Custom fields?!?!

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

      Font Library updates!@@jamiewp

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

      Yup and maybe mega menus hopefully@@CarlMadsen

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

    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 ruclips.net/video/RsFMHafzUz4/видео.html not to put content into your template!!! What the hell am i missing???

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

      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.

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

    🫡🫡

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

      Thanks for watching

  • @VictoriaAlfredSmythe
    @VictoriaAlfredSmythe 7 месяцев назад +1

    godaddy’s 365 is THE WORST.