Wordpress 101: How to Build Your First Website from Scratch

Building your own website doesn’t have to be overwhelming! WordPress is one of the most popular website-building platforms, and with the right tools, you can create a professional-looking website without needing to know how to code.

In this beginner-friendly tutorial, I’ll walk you through the process of setting up WordPress on your computer, choosing a theme, customizing your website’s appearance, and building your homepage.

We’ll start with a FREE local WordPress installation, which means you’ll be able to build and experiment with your website privately on your own computer before publishing it online.

Whether you’re creating a website for a small business, personal brand, blog, or creative project, these steps will help you get started.

What You’ll Need Before Getting Started

Before installing WordPress, there are a few tools you’ll want to have ready.

1. A Computer

You’ll need a computer where you can install and run your local WordPress website. This tutorial uses a desktop computer, but the general process is similar on both Windows and Mac.

2. Local

Local is a free application that allows you to create and manage WordPress websites directly on your computer. Instead of purchasing hosting or making your website publicly accessible right away, you can build everything locally first.

Website: https://localwp.com/

3. WordPress

WordPress is the content management system (CMS) we’ll use to build the website. Local makes installing WordPress much easier, so you won’t need to download and configure it manually.

4. A WordPress Theme

A theme controls much of your website’s overall appearance, including its layout, colors, typography, and design elements.

For this project, I’m using the free Kadence theme.

Website: https://www.kadencewp.com/

5. Helpful WordPress Plugins

Plugins add extra features and functionality to WordPress. We’ll use a few to make designing and managing the website easier.

Some of the tools we’ll be working with include:

Kadence Blocks: Adds additional design and layout blocks to the WordPress editor.
Kadence Starter Templates: Provides pre-designed website layouts that you can import and customize.
Rank Math: Helps with search engine optimization (SEO).

You don’t need to install every plugin immediately. We’ll add the tools as we work through the setup.

Part 1: Installing Local on Your Computer

The first step is installing Local, which will allow us to create a WordPress website without purchasing hosting or making it available to the public.

Visit https://localwp.com/.
Select the download option.
Choose the version for your operating system.
Download and install the application.
Open Local once the installation is complete.

Follow any installation prompts that appear on your computer.

Once Local opens, you’ll see a dashboard where you can create and manage your local WordPress websites.

Part 2: Creating Your First Local WordPress Website

Now that Local is installed, it’s time to create your first WordPress website.

Open Local.
Select the option to create a new site.
Enter a name for your website.
Continue through the setup process.

Local may suggest a default site domain and local website path. These settings determine how your website is identified and where its files are stored on your computer.

Choosing Your Site Name

Choose a name that makes sense for your project. You can use your business name, blog name, or another name that helps you identify the website.

For this project, I’m using Monica Hacks.

Choosing Your Environment

Local provides options for configuring your WordPress environment. If you’re just getting started, the preferred or default environment is generally a good choice.

These settings control the software versions and server configuration used to run your local website.

Unless you have a specific technical reason to change them, you can usually leave the recommended settings as they are.

Setting Up Your WordPress Login

Next, Local will ask you to create your WordPress administrator account.

You’ll need to enter:

Username: The username you’ll use to sign in to WordPress.
Password: A strong password for your administrator account.
Email address: The email address associated with your WordPress account.

Keep your login information somewhere secure. You’ll need it whenever you want to access the WordPress dashboard.

Once you’ve completed these steps, Local will install WordPress and create your website.

Part 3: Opening Your WordPress Dashboard

After the installation is complete, you’ll see your new website listed inside Local.

Local gives you a few useful options for managing your website.

Start Site: Starts your local WordPress website.
Stop Site: Stops the website when you’re finished working.
Open Site: Opens the website in your browser so you can preview it.
WP Admin: Takes you directly to your WordPress login and dashboard.

Select WP Admin to open the WordPress dashboard.

The WordPress dashboard is where you’ll manage almost everything related to your website, including pages, posts, media, themes, plugins, and settings.

Getting Familiar With the WordPress Dashboard

The navigation menu on the left side of the screen contains the main areas you’ll use.

Here are some of the most important sections:

Dashboard: Your main WordPress administration screen.
Posts: Create and manage blog posts.
Media: Upload and manage images, videos, and other files.
Pages: Create and manage website pages such as Home, About, and Contact.
Comments: Manage comments submitted by visitors.
Appearance: Customize your theme, menus, and website design.
Plugins: Install and manage additional website functionality.
Users: Manage website users and administrator accounts.
Tools: Access various WordPress management tools.
Settings: Configure general website settings.

You don’t need to learn everything at once. We’ll use several of these sections as we build the website.

Part 4: Installing Your WordPress Theme and Plugins

Before designing your website, we’ll install the theme and plugins that will help us create the layout and appearance we want.

Installing the Kadence Theme

A WordPress theme provides the foundation for your website’s design.

For this tutorial, I’m using Kadence because it offers a modern, flexible design and works well with the WordPress block editor.

To install it:

In your WordPress dashboard, go to Appearance → Themes.
Select Add New Theme.
Search for “Kadence.”
Find the Kadence theme.
Select Install.
Once installed, select Activate.

Your website will now use the Kadence theme.

Activating a theme changes the appearance of your website, but it doesn’t automatically create all of your pages and content. We’ll take care of that next.

Installing Kadence Starter Templates

Starter templates are pre-designed website layouts that give you a starting point for your website.

Instead of designing every section from scratch, you can import an existing layout and customize it with your own colors, images, text, and branding.

To install the starter template tools:

Go to Plugins → Add New Plugin.
Search for Kadence Starter Templates.
Install the appropriate starter template plugin.
Activate it.

You may also want to install Kadence Blocks, which provides additional design blocks and layout options for the WordPress editor.

Installing Rank Math

Rank Math is an SEO plugin that helps you optimize your website content for search engines.

SEO stands for search engine optimization. It involves making your website easier for search engines to understand so your pages and posts have a better opportunity to appear in relevant search results.

To install Rank Math:

Go to Plugins → Add New Plugin.
Search for Rank Math SEO.
Select Install.
Select Activate.

You can complete its setup wizard when you’re ready to configure your website’s SEO settings.

Remember that installing an SEO plugin doesn’t automatically guarantee search rankings. You’ll still need helpful content, descriptive page titles, good website structure, and other SEO best practices.

Part 5: Choosing and Importing a Starter Website

Now comes one of the fun parts: choosing a design for your website!

Kadence Starter Templates provides pre-designed layouts that you can use as a starting point.

Open the starter template library from the WordPress dashboard and browse the available designs.

Choosing a Template

Look for a template that has a layout and structure similar to what you want your finished website to look like.

For this project, I selected the SEO Skills starter website as my starting point.

Don’t worry if the template doesn’t have the exact colors, images, or wording you want. We’ll customize those later.

Choosing Your Colors and Fonts

Depending on the template and import options available, you may be able to select a color palette and typography combination before importing.

These settings help establish the overall look and feel of your website.

When choosing colors, think about your brand and the experience you want visitors to have.

For Monica Hacks, I’m using a combination of pink, black, white, and neutral colors.

Try to choose a small group of colors that work well together rather than using too many competing colors.

The same applies to fonts. Two complementary font styles are often enough to create a clean, professional appearance.

Importing the Starter Website

Once you’ve selected your template and design preferences, follow the import prompts.

Depending on the template, the import process may add:

Website pages
Homepage layouts
Header and footer designs
Images and other media
Navigation menus
Theme customization settings
Additional design elements

Allow the import process to finish before navigating away.

Once it’s complete, open your website in a browser to see the starter design.

You now have a working website layout that you can begin making your own!

Important: Starter templates are only a starting point. You’ll want to replace the sample text, images, links, and branding before publishing your website.

Part 6: Understanding the WordPress Customizer

Now that your starter website is installed, it’s time to customize the design.

Kadence includes a theme customization area where you can make changes to your website’s global appearance.

To open it:

Go to Appearance → Customize.
Wait for the Customizer to load.
Explore the available settings in the left-hand panel.

The Customizer allows you to make changes to your website while previewing those changes.

Some settings apply globally, meaning they affect multiple pages and sections throughout your website.

This is especially helpful when you want your entire website to have a consistent appearance.

Understanding Global Colors

One of the first things I recommend customizing is your global color palette.

Global colors are reusable colors that you can apply throughout your website.

Instead of manually choosing a color every time you add a button, heading, or background, you can select from your established palette.

This makes it much easier to maintain consistent branding.

For example, your palette might include:

Primary brand color
Secondary brand color
Accent color
Heading color
Body text color
Light background color
Dark background color

For Monica Hacks, pink is one of the main accent colors, with black, white, and neutral shades helping balance the design.

When choosing your palette, make sure your text has enough contrast against its background so visitors can read it comfortably.

Setting Up Global Typography

Typography refers to the fonts and text styles used throughout your website.

Within the Customizer, look for the typography settings.

You may see options for:

Base or body font
Heading font
Font size
Font weight
Line height
Letter spacing

Your body font is used for most of the regular text on your website, while heading fonts help distinguish titles and section headings.

Choose fonts that are easy to read and work well together.

You can also adjust heading sizes so your page titles, section headings, and smaller headings have a clear visual hierarchy.

A consistent typography system makes your website feel more polished and easier to navigate.

Part 7: Adding Your Logo and Website Branding

Your logo is one of the most recognizable parts of your website.

To add or change your logo, open the Customizer and locate the site identity or header branding settings.

Depending on the Kadence version and configuration, these options may be located within the Header settings.

Upload your logo from your computer or select an existing image from the Media Library.

Choosing the Right Logo

For your website, it’s helpful to have a logo that works well in both large and small spaces.

You may want to create:

A primary horizontal logo
A compact or stacked logo
A simplified icon or symbol
A favicon for browser tabs

A favicon is the small image that appears beside your website name in a browser tab.

Once you’ve uploaded your logo, adjust its size and spacing so it looks balanced in your header.

Preview the website at different screen sizes to make sure the logo isn’t too large or too small.

Part 8: Customizing Your Website Header

The header is the area at the top of your website.

It typically contains your logo, navigation menu, and sometimes buttons or other important links.

Kadence provides a Header Builder that allows you to arrange different elements within your header.

You can access these options through the Customizer under Header.

Depending on your configuration, you’ll see areas for desktop and mobile header layouts.

Adding and Arranging Header Elements

The Header Builder allows you to organize elements such as:

Site logo
Primary navigation
Search
Buttons
Social links
Mobile navigation trigger

You can move elements into different positions to create the layout you want.

For example, a simple desktop header might include your logo on the left and your navigation menu on the right.

Keep your header organized and avoid adding too many elements. Visitors should be able to quickly recognize your brand and find the main sections of your website.

Customizing Header Colors and Spacing

You can adjust the header’s background, text colors, spacing, and other styling options.

Make sure the header colors coordinate with your global palette.

Also pay attention to the amount of space around your logo and navigation. A little breathing room can make the entire design feel cleaner.

Part 9: Customizing Your Homepage Hero Section

The hero section is the large introductory area visitors typically see near the top of your homepage.

It’s one of the most important sections because it helps visitors immediately understand what your website is about.

A good hero section should communicate:

Who you are
What your website offers
Who your content is for
What visitors should do next

For Monica Hacks, the homepage introduces the website with the heading:

MONICA HACKS TIPS, TRICKS & TUTORIALS

The hero area also includes a portrait image and introductory messaging.

Updating the Hero Text

Open your homepage in the WordPress editor.

Find the hero section and select the text blocks you want to change.

Replace the sample heading and paragraph text with your own website messaging.

Think about what someone visiting your website for the first time needs to know.

Keep your main heading clear and easy to understand. You can use the smaller paragraph underneath to explain your content in more detail.

Replacing the Hero Image

If your starter template includes a sample image, you’ll want to replace it with an image that represents your brand.

You can upload a new image or choose one from your Media Library.

Make sure the image is appropriately sized and cropped for the layout.

After replacing the image, preview the section to make sure the text and image work well together.

Adding a Call-to-Action Button

A call to action (CTA) is a button or link that encourages visitors to take a specific action.

Examples include:

Explore Tutorials
Learn More
View Resources
Get Started
Contact Me

For my homepage, I’m using a button labeled EXPLORE ALL TUTORIALS.

The button should link to the page or section where visitors can find the content promised by the button.

Use a color that stands out from the surrounding section so visitors can easily recognize it as something they can click.

Part 10: Editing Homepage Content With the WordPress Block Editor

The WordPress block editor is where you’ll build and edit the actual content of your pages.

Each piece of content is represented by a block.

For example:

Paragraphs are paragraph blocks.
Titles are heading blocks.
Images are image blocks.
Buttons are button blocks.
Columns and layouts can be created with layout blocks.

To edit your homepage, go to Pages → All Pages, locate your Home page, and select Edit.

You can also open the homepage while logged in and choose the edit option from the WordPress toolbar.

Understanding the Block Editor

When you select a block, WordPress displays editing options.

Depending on the type of block, you may be able to change:

Text
Alignment
Font size
Colors
Background
Spacing
Borders
Other styling options

The toolbar above the selected block provides quick editing options, while the settings panel on the right provides additional controls.

Using List View

One of the most helpful features in the WordPress editor is List View.

List View displays the blocks and sections on your page in a structured list.

You can open it using the List View icon in the editor toolbar.

This is especially useful when your page has several sections, columns, images, and buttons.

Instead of trying to click directly on a small element in the page preview, you can locate it in List View and select it from there.

You can also use List View to:

See how your page is organized
Select individual blocks
Expand and collapse sections
Move blocks into a different order
Find elements that are difficult to select on the page

As your website grows, List View can save you a lot of time.

Adding and Editing Homepage Sections

Your homepage should provide visitors with a clear overview of what your website offers.

You might include sections for:

An introduction to your website
Featured tutorials
Helpful resources
Popular topics
About information
Links to other important pages

When editing your homepage, replace the sample content with your own wording and links.

For example, a section introducing your website might explain that Monica Hacks shares practical tips, tutorials, and resources to help people explore technology, design, websites, and creative tools.

You can also use buttons to direct visitors to related pages.

Try to keep each section focused on one main idea. This makes the page easier to scan and helps visitors find the information they’re looking for.

Part 11: Adding Images to Your Website

Images help make your website more engaging and visually interesting.

You can add images directly through the WordPress editor or upload them to your Media Library first.

Replacing Images in Your Starter Template

When you import a starter template, it may include sample photographs or graphics.

To replace one:

Open the page in the WordPress editor.
Select the image you want to change.
Use the image block’s toolbar or settings.
Choose the option to replace the image.
Upload your new image or select one from the Media Library.

Depending on the block or layout, the image may be controlled through a background setting rather than a standard image block.

If you can’t select the image directly, try using List View to locate the section or block containing it.

Understanding the Media Library

The Media Library stores the images and files you upload to WordPress.

You can access it by going to Media → Library.

From here, you can:

View uploaded images
Upload new files
Edit image details
Find existing images
Manage media used throughout your website

It’s a good idea to use descriptive file names before uploading images.

For example, instead of uploading an image named IMG_1234.jpg, rename it to something more descriptive, such as monica-hacks-homepage.jpg.

Organizing your media files makes it easier to find what you need later.

Adding Alt Text to Images

Alt text, short for alternative text, describes an image.

It is important for accessibility because screen readers can use it to communicate what an image represents to visitors who cannot see it.

Alt text can also help search engines understand the content of an image.

To add alt text:

Open the Media Library.
Select the image.
Locate the Alternative Text field.
Enter a short, descriptive explanation of the image.
Save your changes if prompted.

For example, if an image shows a laptop displaying a website design, your alt text might be:

“Laptop displaying a website design on a desk.”

Keep alt text descriptive and relevant. You don’t need to stuff it with keywords or describe every tiny detail.

If an image is purely decorative and adds no meaningful information, it may be appropriate to leave its alt text empty when the image is used in the page.

Part 12: Using Kadence Blocks to Create Page Layouts

Kadence Blocks adds additional layout and design options to the WordPress editor.

One particularly useful feature is the Row Layout block.

A Row Layout allows you to create sections with columns, giving you more control over how content is arranged.

Creating a Row Layout

To add a Row Layout:

Open your page in the WordPress editor.
Select the plus (+) button to add a block.
Search for Row Layout.
Select the Kadence Row Layout block.
Choose the column structure you want.

Depending on the layout you select, you can create sections with one, two, three, or more columns.

For example, a two-column layout might have text on the left and an image on the right.

A three-column layout could be useful for displaying featured resources or tutorials.

Customizing Columns

After adding your layout, select the individual columns or blocks to customize them.

You can add:

Headings
Paragraphs
Images
Buttons
Icons
Other blocks

You can also adjust the spacing, background colors, alignment, and other design settings.

Adjusting Responsive Layouts

A layout that looks great on a desktop computer may not look as good on a phone.

Kadence provides responsive settings that allow you to adjust how sections and columns behave at different screen sizes.

For example, a two-column desktop layout may stack vertically on a mobile device.

You can adjust settings such as:

Column widths
Padding
Margins
Alignment
Image sizing
Content spacing

Always preview your layout at different screen sizes after making changes.

Part 13: Customizing Your Website Footer

The footer is the area at the bottom of your website.

It’s a useful place to include information and links that visitors may need but that don’t necessarily belong in your main navigation.

Common footer elements include:

Copyright information
Contact links
Social media links
Privacy Policy
Terms and Conditions
Important website pages

Kadence includes a Footer Builder that allows you to customize the footer layout.

Open the Customizer and locate the Footer settings.

Understanding Footer Rows and Columns

The Footer Builder allows you to arrange different elements into footer rows and columns.

Depending on your layout, you may see several footer widget areas.

You can add content to these areas and customize how it appears.

For example, you might use one area for a short website description, another for navigation links, and another for social media links.

Editing Footer Widgets

Footer widgets allow you to add content to designated areas of your footer.

You can add blocks such as:

Paragraphs
Headings
Buttons
Navigation links
Social icons

Select the footer area you want to edit and add or customize its content.

You can also adjust the text and button styling to match your website’s branding.

Adding Copyright Information

Your footer should include a copyright notice.

For Monica Hacks, I’m using:

You can customize the wording and year to match your website.

Remember to check your footer on both desktop and mobile devices to make sure the content is readable and properly arranged.

Part 14: Setting Up Mobile Navigation

More and more people browse websites using their phones, so your mobile navigation is just as important as your desktop navigation.

Kadence provides separate mobile header settings that allow you to customize how the header and menu appear on smaller screens.

Open the Customizer and locate the Header settings.

Switch to the mobile header view to see the mobile-specific layout.

Understanding the Mobile Menu Trigger

On smaller screens, a traditional horizontal navigation menu usually doesn’t fit.

Instead, websites commonly use a hamburger menu icon.

This icon acts as the mobile navigation trigger. When a visitor selects it, the navigation panel opens and displays the available menu links.

In Kadence, you can customize the mobile trigger’s appearance.

Depending on the available settings, you may be able to adjust:

Icon style
Icon size
Icon color
Background color
Padding
Spacing

Choose settings that make the menu easy to recognize and tap.

Customizing the Mobile Navigation Panel

The mobile navigation panel, sometimes called an off-canvas panel, is the area that appears when someone opens the mobile menu.

You can customize its appearance to coordinate with the rest of your website.

Pay attention to:

Background color
Navigation text color
Link spacing
Typography
Menu alignment
Panel styling

Make sure your menu links are easy to read and have enough space between them for someone to tap comfortably.

Test the menu after making changes to confirm that it opens and displays the correct navigation links.

Part 15: Customizing Your Desktop Navigation Menu

Your desktop navigation menu helps visitors find the main pages and sections of your website.

You can customize its appearance through the Kadence Customizer.

Open the Header settings and select the primary navigation element.

Choosing a Navigation Style

Kadence provides different navigation styling options.

Depending on the version and settings available, you may see options such as:

Standard
Full Height
Underline
Full Height Underline

These styles change how the menu links appear within your header.

Try the different options and preview them to see which one works best with your design.

Customizing Navigation Colors

You can adjust the colors used for your navigation links.

Common settings include:

Normal link color
Hover color
Active link color
Background color

The hover color is the color visitors see when they move their mouse over a navigation link.

The active color can help identify the page a visitor is currently viewing.

Choose colors that coordinate with your website’s global palette and maintain good contrast.

Adjusting Navigation Typography and Spacing

You can also customize the typography and spacing of your navigation menu.

Settings may include:

Font family
Font size
Font weight
Letter spacing
Link spacing
Padding

A navigation menu should be easy to read without taking up too much room in your header.

Avoid making the text too small or squeezing too many links into one row.

Part 16: Customizing Dropdown Menus

Dropdown menus allow you to organize additional pages underneath a main navigation item.

For example, you might have a Tutorials menu with several related categories underneath it.

Kadence allows you to customize the appearance of these dropdown menus.

Depending on your available settings, you can adjust:

Dropdown background color
Link text color
Hover colors
Typography
Dividers
Shadows
Borders
Border radius

Making Dropdown Menus Easy to Use

Dropdown menus should be visually consistent with your main navigation.

Choose a background and text combination that provides enough contrast.

You can also use dividers or spacing to make individual menu items easier to distinguish.

Keep the menu organized. If you have many pages, group related content together rather than placing every page directly in the main navigation.

A simple navigation structure makes your website easier for visitors to explore.

Part 17: Reviewing and Finalizing Your Homepage

Once you’ve customized your branding, header, homepage sections, images, and footer, it’s time to review everything together.

Open your homepage in the browser and look at it as if you’re visiting the website for the first time.

Ask yourself:

Is it immediately clear what the website is about?
Does the homepage have a clear heading?
Are the images appropriate and properly sized?
Are the colors consistent?
Is the text easy to read?
Do the buttons link to the correct pages?
Is the navigation easy to understand?
Does the footer include the important links?
Does everything look good on mobile?

Previewing Your Website on Different Devices

Your website needs to work well on desktop computers, tablets, and mobile phones.

Use the responsive preview options available in the WordPress editor or Customizer to check different screen sizes.

Pay particular attention to:

Header and logo sizing
Mobile navigation
Image cropping
Column stacking
Text size
Button placement
Section spacing
Footer layout

Sometimes a small adjustment to padding, font size, or image dimensions can make a big difference on mobile.

Don’t assume that a design that looks good on your computer will automatically look good on a phone.

Saving Your Changes

As you customize your website, remember to save or publish your changes.

In the WordPress Customizer, use the Publish button when you’re ready to save your customization changes.

In the WordPress block editor, use the Save or Update button to save changes to your page.

If you’re working locally, these changes are being saved to your local WordPress installation. Your website is not automatically being published to the internet.

That’s one of the advantages of building locally: you can experiment, make mistakes, and refine your design before making your website publicly available.

Final Website Setup Checklist

Before moving on to the next stage of your website project, use this checklist to make sure you’ve completed the initial setup and homepage design.

WordPress Installation

Download and install Local.
Create a new local WordPress website.
Set up your WordPress administrator username and password.
Open the WordPress dashboard.
Familiarize yourself with the main dashboard sections.

Theme and Plugins

Install and activate the Kadence theme.
Install Kadence Starter Templates.
Install Kadence Blocks.
Install Rank Math or another SEO plugin.
Import your chosen starter website.

Website Branding

Choose your website’s global color palette.
Select your heading and body fonts.
Upload your logo.
Set up your favicon.
Customize the desktop header.
Customize the mobile header.
Adjust your navigation menu.
Style your dropdown menus.

Homepage Design

Update your homepage heading.
Replace the starter template text.
Replace sample images.
Add descriptive alt text where appropriate.
Create your homepage sections.
Add buttons and call-to-action links.
Customize your page layouts.
Review your images and spacing.
Preview your homepage on desktop and mobile.

Footer and Navigation

Customize your footer layout.
Add copyright information.
Add important footer links.
Check your desktop navigation.
Check your mobile navigation.
Test your dropdown menus.

What’s Next?

Congratulations! You’ve completed the initial setup of your local WordPress website and created the foundation for your homepage.

At this point, you have a working WordPress installation, a theme, a starter design, customized branding, and the beginning of a website that reflects your own style.

But there’s still more to do before your website is ready to launch.

Some of the next steps in building a complete website include:

Creating additional pages such as About, Contact, and Services.
Organizing your website navigation.
Creating blog posts and categories.
Setting up SEO titles and meta descriptions.
Adding privacy policy and terms pages.
Configuring analytics and website tracking.
Setting up cookie and privacy tools.
Optimizing images and website performance.
Preparing your website for publishing.
Exporting your WordPress website for static hosting, if you’re using a static publishing workflow.

We’ll cover these steps in the next parts of the WordPress 101 series.

The best advice I can give you is to take your time, experiment with the settings, and don’t be afraid to try something new. You can always go back and make changes as your website develops.

You don’t have to build everything in one day. Start with the basics, make it your own, and keep improving as you learn!

Happy website building!