Welcome to this week's Web-Design SkillSprint!
Building a website is one of the most valuable skills you can learn as a professional website is considered valuable online real estate today. Platforms like Wix have made web design accessible to everyone, allowing anyone to create stunning, professional websites without needing technical expertise.
Beyond boosting your own online presence, this skill can become a lucrative source of income. Many startups and small businesses need affordable, well-designed websites, and with cloud-based no-code tools like Wix, you can deliver exactly that in record time!
In just 2 days, you will learn how to create sleek, professional, mobile-responsive websites using beginner-friendly platforms that require zero coding skills!
Let’s get started.
This weekend's goal: Learn to create a functional, responsive Website with no-code tools.
By the end of this SkillSprint, you’ll have a live website that you designed yourself—showcasing your skills, business, or personal brand.
Level: Beginner.
Prerequisites: No coding skills necessary.
About the BuildThatSkill - SkillSprint Series
SkillSprint is a weekly series of bite-sized micro courses designed to teach you a valuable new skill or elevate an existing one in just a couple of days using hands-on learning and experimentation.
Realistically speaking, you won't become an expert in 2 days, but you will discover new cutting-edge tools and practical resources and gain insights into the latest trends, through experimentation and hands-on exercises.
To truly master it, apply what you've learned in real-world situations, monitor, and seek feedback for continuous improvement.
This SkillSprint will teach you how to create your own functional and visually appealing website using user-friendly, free no-code tools in just one weekend! Not only will you learn a valuable, monetizable skill, but you'll also have a fully functional, live website you can use to enhance your online presence or showcase your brand. Let's go!
DAY 1 : Understanding and Setting Up the Basics
MORNING: Getting Started
Plan your website -- Decide what your website will feature and what goals you would like to achieve out of it. Here are some examples:
A simple informational website.
A personal website showcasing your style, life story, passions, etc.
A personal or professional blog.
A portfolio website to showcase your work.
An e-commerce site where you can sell products, take bookings, or provide services.
A site for a client, brand, or business idea.
The theme and purpose are totally up to you, but I recommend keeping it as simple as possible for your first site.
Now let's get down to business!
TRY A TOOL: Wix.com
Wix is a user-friendly, cloud-based website builder that enables anyone to create stunning, professional websites with customizable templates and powerful drag-and-drop tools, without requiring programming experience.
2. TOOL SETUP: Sign Up on Wix
Visit Wix.com and create a free account.
Choose the "Free Plan" to get started.
Once you've logged in, click the "Create New Site" button. (If you see the following dropdown menu, select "Use Wix Editor". If you don't see this option, no problem. Just continue to the template library).
3. Explore Templates
OPTION 1: As you get started, you will be given the option to use AI to create a template for your website. The AI will ask you a series of questions and make a custom template suited to your preferences, which you can then edit.
Feel free to experiment with this by answering the AI's questions.
OPTION 2 (Recommended): Skip the AI option for now. Clicking on "Skip to Design" or "Set up without Chat" will take you to Wix’s Template library. Don't worry--it won't make your task harder. It will let you start with a design you like. These are professional, pre-designed websites for different themes, ready to tailor to your needs.Browse the templates by using the dropdown menus and select a design that matches your purpose (portfolio, blog, business, etc.).
Hover over a template and click on "View" to preview it or "Edit" if you'd like to choose that one to work with.
Select a template and start customizing.
AFTERNOON: Customizing Your Website
Editing Your Template
Familiarize yourself with the Wix Editor. Use the drag-and-drop interface to:
Replace placeholder text with your own.
Upload images and videos to personalize your site.
Add a logo (if you have one).
Experiment with Layouts
Use Wix’s pre-designed sections on your template to quickly drag and drop to add:
A "Contact Us" form.
Social media links.
A photo gallery or blog section
The template you've chosen will contain most of the essential pages and features you need already pre-designed and set up with placeholder content. All you have to do is customize all these elements to your needs.
Simply drag and drop anything else you want from the menu, and change colors, resize, and reposition elements by dragging and using the very intuitive interface. Right-clicking anything will bring up a list of quick editing options.
Get started and you will see how easy it is to figure out. You don't need to write any code!
Tip: It's best to avoid uploading large-sized files, as this is likely to slow down your site. Make sure any images and videos you upload are less than 2 MB and only use videos where necessary--avoid using them just for aesthetic purposes.
Feel free to use Wix's inbuilt AI tools to create your content. This pop-up should appear when you first start customizing your template. Alternatively, create your own content and replace the placeholder text in each section and page.
Click on the Preview button on the top right of the editor to see how your live site will look.
Hover over the "Save" button and make sure you turn Auto-save on if it isn't already. Wix will auto-save your progress so you won't have to worry about saving it manually or losing your work.
Switch between pages by using the "Page" button on the top left of the editor.
DAY 2: Refining and Launching
MORNING:
Optimize for Mobile
Switch to the Mobile Editor view to ensure your site looks great on smartphones, tablets, and different screen sizes.
Your window will switch to a mobile layout that will show you how your site will look on a mobile phone.
Adjust and scale images, boxes, text, and any other elements that look distorted on mobile. Once you're happy with the way it looks on mobile, you can switch back to Desktop mode and continue editing. As you make changes and adjustments to your website, it's a good idea to toggle to mobile view to make sure everything appears as it should on mobile too.
2. Adding Advanced Features
Enhance Your Website’s Functionality
Visit the Wix App Market by clicking on the "Add Apps" icon on the left menu. (it should look like 4 tiny squares).
Browse the various apps available in the app market, including free ones, and add interactive features like:
A booking form for appointments.
A newsletter subscription popup.
E-commerce tools (optional). You can add a store, booking scheduler, payment gateway, and lots more.
A chat window.
...and other useful tools. Add only what you need.
3. SEO Basics
Go to the "SEO Settings" in the Wix Editor:
Add a site title, description, and keywords.
Use Wix’s SEO Wiz to optimize for search engines.
AFTERNOON: Testing and Publishing
a. Test Your Website
On the top right hand corner, click on "Preview" to see how your site will look live. Don't forget to preview both desktop and mobile modes.
Click through every link in preview-mode to ensure it works as expected. Test your forms, galleries, menus, etc.
To make further changes, simply switch back to edit-mode by clicking "Back to editor".
b. Publish and Share
When you are ready, hit the "Publish" button to make your site live! (Yay!)
Share your website link on social media, LinkedIn, or in email marketing newsletters to gain visibility!
INTEGRATE YOUR SOCIAL MEDIA & EMAIL MARKETING
The aim is drive traffic from social media and email marketing to your website for more information, sign-ups, purchases etc.
Add social buttons from the editor menu. You can display links to your Facebook, Twitter, LinkedIn, Instagram and other social media pages, as well as social ‘share’ buttons so that visitors can share, ‘like’ and follow your content directly from your website.
Congratulations! You’ve built and launched your first website. Great job!
Next Steps
Monitor and Improve
Regularly update your website with fresh content. Just return to the Wix editor to make changes to your live site anytime. Just remember, these changes will not go live until you click "Publish" again.
Use Wix Analytics to track visitor behavior and optimize your site.
You will find plenty of analytics and marketing tools on your site dashboard. Feel free to explore them.
Try a New Tool: Wix AI Site Generator and Wix Studio
Experiment with Wix’s AI to generate additional content or tweak your design automatically.
If you feel confident, try creating an additional site--this time using Wix Studio templates. Wix Studio is a more advanced editor with more features and effects but is slightly less intuitive to use than the standard Wix editor.
OPTIONAL UPGRADE: If you're happy with your design and you'd like to give your site a more professional look and feel, consider upgrading to a Premium plan to add your custom domain name (e.g. www.buythathome,com) and remove the Wix ad banner, among other premium benefits.
Explore Other Platforms
While Wix is a great starting point, you might also explore WordPress, Webflow, or Squarespace to expand your skills. I personally like Wix for its user-friendliness, but I also recommend WordPress for blogging.
If you enjoy design, experiment with tools like Canva and Figma to design sections of your site and import them to Wix.
That brings us to the end of this SkillSprint. This practical SkillSprint has equipped you with the tools and knowledge to design and launch a website that can enhance your online presence and promote your business. I hope you found it useful and will continue to practice and refine your website/s. Good luck!
What do you think?
I’d love to hear about your experiences and any challenges you faced while creating your website. Share your thoughts and any additional tips you have in the comments!
Want to learn a marketable, in-demand skill every weekend? Subscribe to BuildThatSkill.com for a new SkillSprint in your inbox every Friday, and stay updated with the latest trends and tools to future-proof your career. Happy learning!
Comments