Do you want to make a website for yourself, your company, or a client but don’t know where to begin?

In this beginner-friendly tutorial, I’ll show you how to use the Astra theme and Elementor to create a beautiful, professional-looking website from scratch.

I’ll cover everything you need to know, from getting a domain name and hosting to creating global styles, a header and footer, a contact page, and more.

So if you’re a complete WordPress beginner or just looking to improve your website design skills, this tutorial is perfect for you.

So, let’s dive in and create a website that you can be proud of!

Video: Make A Free WordPress Website in 2023

Here are the links as mentioned in the video:

✅ Download the website launch checklist

✅ Download tutorial files

🔔 Get Elementor BootCamp Course (50% OFF)

🔵 Get Your Domain at Hostinger

🔵 Get Web Hosting at Cloudways

✅Get Elementor Pro

✅Get Astra theme

✅Get Premium Addons

Header Menu Background CSS

/**
 Add green background with border radius, margin and padding
**/
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
  background-color: #228b22;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  margin-left: 250px;
  padding-right: 50px;
}



/* Media Query for low resolution  Tablets, Ipads */
 @media (min-width: 481px) and (max-width: 767px) {
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
    border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: 350px;
  padding-right: 15px;
  }
}



/* Media Query for Mobile Devices */
 @media (max-width: 480px) {
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
    border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: 20px;
  padding-right: 10px;
  }
}

Hide Header Menu Background on Mobile Devices

/**
 Hide green background, remove border radius, margin and padding on mobile devices
**/
@media screen and (max-width: 767px) {
.site-header-primary-section-right.site-header-section.ast-flex.ast-grid-right-section {
  background-color: #ffffff;
	border-radius: 0px;
  margin: 0px;
	padding: 0px;
  }
}

Also read: How To Choose A Web Design Agency

Conclusion

And there you have it! By following this tutorial, you’ve learned how to create a stunning WordPress website using the Astra theme and Elementor, with no previous experience required.

Whether you’re creating a website for your personal brand, a business, or a client, these skills are invaluable and can help you stand out in the online world.

And don’t forget to download your free website launch checklist to ensure that your website is ready to go live and impress your audience.

If you have any questions or feedback, feel free to leave a comment below. And if you found this tutorial helpful, be sure to share it with others who might benefit from it as well.

Thank you for following along, and I wish you all the best in your website-building journey!