Watch me rebuild the official Tom Cruise website in just 15 minutes 🔥

Today, I embarked on a mission to recreate the Tom Cruise website in just 30 minutes. Spoiler alert: I did it in half the time!💪👇

Video summary

What You’ll Learn:

1. Setting up block theme templates the right way.
2. Creating beautiful custom grids using core Gutenberg blocks.
3. Accessing and using global styles in block themes.
4. Styling shortcodes effectively.

The Process:

• Setting Up the Structure:
  • I began with a freshly pressed version of WordPress, running the 2023 theme.
  • I set up the front page template, ensuring only the content of my homepage would be pulled in, excluding the header and footer.
• Designing the Homepage:
  • I used the cover block for the hero section, adjusting its width, depth, and text positioning.
  • After publishing the page, I set it as the front page of my website.
• Building the Three Columns:
  • I used a neat trick with the columns block, starting with a two-column layout and then duplicating it to create a three-column layout.
  • I adjusted the block spacing and margin for precision and ensured it was mobile-responsive.
• Footer Creation:
  • I used the group block, transforming it into a row block, which uses Flexbox.
  • I added the necessary text and social icons, adjusting the spacing and padding for a perfect fit.
• Final Touches:
  • I addressed the issue of excessive white space at the top by adjusting the padding in the 2023 theme.
  • I incorporated a pop-up feature using the WP Video Lightbox plugin, which played the trailer when clicked.
  • Lastly, I adjusted the minimum height of each cover block to align more with Tom’s website.