WOW! I rebuilt TechCrunch.com in 30 mins with WordPress 🔥
Vložit
- čas přidán 30. 07. 2024
- In today's video I try to recreate the techcrunch.com/ website in just 30 minutes using WordPress and no plugins.
👉 Sign up for my newsletter: www.pootlepress.com/sign-up-t...
👉 Join my Club: clubpootle.com/
👉 Contact me at: jamie@pootlepress.com
Video summary
The video demonstrates rebuilding the TechCrunch website using WordPress in 30 minutes.
Topics covered include creating a sticky navigation, designing pro post layouts, altering global styles, understanding image ratios in WordPress 6.3, and content placement in page templates.
The demonstration begins with a blank WordPress site with the 2023 theme, which is compared to the original TechCrunch site.
Columns and the query loop block are used to design the front page layout, mimicking the post and image structure of TechCrunch.
Additional tweaks involve setting font sizes, adjusting padding, and customizing navigation elements. - Krátké a kreslené filmy
We need many more of these "rebuilt" tutorials. I can't thank you enough. Always impressed.
Thanks Eric - if there are any sites you would like me to recreate let me know 👍
Glad to see Vivaldi in use!
👍
Thank you for using our browser! 😊
Thank you for making it ❤️🙏
0:20 big fan of the whiteboard overview of content. Very helpful to know if the content is what im looking to learn
Good to hear the investment in the technology wasn’t wasted 😃😉
It is crazy this channel has only 14k subscribers. I love these "rebuilt" tutorials.
Thank you - the channel is growing, but i agree 😉
A few more core wordpress updates should change that. People are still not convinced, although there are a few really good channels with videos now.
I've been following him for a long time, and he is one of the outstanding and not stingy wordpress content creators. Thanks Sir. 🙏🙏🙏🍵
Thank you 🙏
By the way, Jamie, that multi-select technique you used to group multiple blocks? Genius! Until this very moment, I've always first added the Group block and then placed all the required child blocks within it. That multi-select approach is my go to method from here on. I also played around with the new Group block sticky positioning. In my case, the client site has a fixed header bar and, while I was happy to see the addition of the Group block position attribute (default or sticky), I was surprised that the setting doesn't also expose the position "top" setting. In lieu of that, top defaults to zero which works just fine in your TechCrunch site example since the left-hand sidebar will stick to the top of the page (top = 0) as needed in that example. If your page has a fixed header bar and you're using position sticky on some particular Group on the page, you need that Group to stick somewhere below that header bar. So, for example, if your header bar is 75px in height, you need to be able to set the position sticky top attribute to 75px plus, say, 25px as a gap between the Group block and the Header block. In css, you'd just set "top:100px;" for "position:sticky;". That's a curious omission to the position sticky block attribute (what you can do is create a css class like "sticky-top-position" and give it a non-zero top setting value and then add that class to the sticky Group to change the vertical stick point).
Thank you and thanks for the great comment as well 💪
An interesting thing I've found with setting column widths (as you discussed at around the 2:30 min mark in the video) is, if you have two columns, you need only specifically indicate the column width for the first one and leave the second column width blank (or blank it out if it has a value). Apparently, that second column will then just fill the remaining space (100% minus whatever width you set for the first column). This is handy if you're playing around with column widths for your two-columnar layout because you need only fiddle with just the first column width setting and the second (non width-specified) column will automatically play along. I presume that you could do this vice versa (set the second column width and let the first column width float) but it probably makes more sense to set the first. Haven't tried this lazy technique on a more-than-two-columnar layout but I'm guessing more than one blank column width is equivalent to saying "split these non width-specified columns evenly," e.g., if you have three columns and you set the first to 20% width but don't specify the width for the other two, they'll default to 40% each.
Yes great points - that's the power of flexbox 💪
I've been a huge fan of TechCrunch's design aesthetic and have been trying to implement some of those ideas and spinning my wheels. You showed how easy it can be and revealed the more practical uses of Group which was mystery to me. Thank you sir.
Great to hear Alan - glad it helped 👍
My favorite videos! They inspire me to play in the block editor and test out new designs and layouts. Great stuff!
Thanks Derek 👍
Thanks to you, sir, I've been able to finally grasp how the block editor works.
This channel alone has provided the perfect content to allow me to finally be able to edit my WP websites without still relying on the old approach that required lots of plugins, and CSS hacks.
Keep up the good work!
That’s so amazing to hear - thank you for taking the time to write
Hey Jamie, thank you so much for this rebuilt video and for the notice in the beginnning as it helps the watcher know what they will learn.
The one question/thing I am a bit confused about is the way to work with templates as templates. In your beginner mistakes video, you mentioned that pages are not supposed to be built in templates. Yet, I didn't manage to find a video that shows the workflow of that. (correct me if I am wrong) Since most of the rebuilds are of the front page which is done in the way of putting the content in the template, and that makes it tempting to do the forbidden action of putting the content in the template..
Great question- I’ll try to get a video together about that 👍
@@jamiewp Did you get around to do this?
Very nice. I'm slowly getting to grips with WordPress, but it's a huge learning curve.
Coming from a WP Pro: Awesome!
Thank you 🙏
I'm learning more about how to build websites with Gutenberg with as little plugin as possible. Thanks for the videos!
Great to hear!
*Thank you very much! Jamie with you there is always something new and valuable to learn!*
*
Cool 😎
Well done Jamie! Excellent rebuild. 😀
Thanks James
Super helpful and fun to follow along. I was using Ollie so some of the little things were different but that was also helpful to learn Ollie.
Great to hear it was useful 👍
Don't forget to create a blank theme with the "Create Block Theme" plugin and show us all how to create a complete theme from the ground up to a usable site.
👍
Please make it from scratch ❤
@@rummandsr7903 i did
@@jamiewp Have you created a video on making a theme like this?
Great tutorial Jamie, you never disappoint!👍
Thanks for watching Jim
Very useful! Thanks so much for sharing.
Thanks Matthew
Excellent, Jamie, excellent. TY
Glad you enjoyed it!
Thanks for the video, nice job and tut. Gutenberg is getting better all of the time, but it is the little details that drive me crazy... and the lack of simple controls when needed. I appreciate your video, especially the loop feature. Soon I will give this one a try. Cheers!
Cheers Joe
Great demo Jamie... Just goes to show what you can achieve with WordPress out of the box now. I also think your iteration of Tech Crunch looks cleaner compared to the "real" one (even though that's also made in WordPress)
thanks Richard, 🙏 I should have mentioned that Techcrunch was built in WordPress 🙈
@@jamiewp your version still looks better mate 🤣
🔥@@RichardWadeUK
Encouraging
I love this series!
thank you 🙏
Love these Jamie, I've learned so much from these
Thanks Jon, this was a fun one to make, with some challenging stuff and lots of useful learnings (hopefully)
@@jamiewp Yes - it's great how you don't repeat the same things each time - I am using the past videos often as I push on and learn full site editing. I saw someone else replicate a home page and it was a 2 1/4 hour video. A bit long! Away from CZcams, I've had a good go at replicating sites in the same way you do. Not as beautifully, but it's a start!
Wow... This was really helpful... Subscribed !!!..
I wonder why I don't have all those useful block styling settings available in my wp 😞
Great to have you as a subscriber Mauricio 👍
Very good content! =D
I always learn new things here...
Great to hear
This was an amazing video, I really didn't like the Site Editor but now I (almost) swear by it. Now that Twenty Twenty Four is out, could you rebuild The Verge ? Asking for a friend 😬
Actually The Verge is on my list 👍
@@jamiewp When can we expect that? :)
Thanks for this tutorial.
My Question is about the header that was created. It means every individual pages will require that you add the header into them manually and whenever you want to update them, you have to do it manually???
Hi, the header can be created as a template part so it's managed in one place , and updated in one place - check out today's video if still unclear czcams.com/video/hvd6h_RpFJM/video.htmlsi=woGgNAqOp406rfrh
I watched this on 2x speed, and you did it in 15mins.
😂
As a plugin developer, this video now has me looking differently at Gutenberg.
That’s great to hear
Amazing
thanks for watching 🙏
Jamie Marsland in few words: The Legendary Gutenberg Man
Wow thank you 🙏 😀
@jamiewp : Loved the video. We have replicated it on our website to the extent you showed in the video. But, can't figure out how to insert the excerpt, which you mentioned doing in the last 2 minutes. Also, how do we replicate the layout throughout the website, like on individual pages and posts? Do we need to repeat the process? Or is there a simple way? Please share pointers. :)
ok i'm impressed. impressive for native gutenberg. so, why use a page builder?
Great question 👍
When you add padding etc, this is being added as a block CSS style, right? Because it’s a global template? I’ve seen other site builders that add way too much inline CSS but I hope this FSE does not do that.
Thanks jamie. At 5:40 where do the patterns come from?
Hi James - from the theme (is this case Ollie)
@@jamiewp thanks Jamie. The pattern designs from Ollie theme? Just checked the Ollie site
@@jamesmarsh4047 yup 👍
Vivaldi, eh? That's what I use on my non-chromebook / android devices instead of Chrome. I only use Chrome on Chrome-native devices.
cool !
WordCrunch?
nice :)
Still a long way to go. In terms of fine-tuning and responsive controls. Intrinsic design is no match for proper responsive controls.
Are there any specific mobile controls you need ? Eg css grid controls ?