In this course I will give a complete walk through all the way from registering a new domain name to deploying your own fully mobile and browser compatible website to the web. 

This life hack will save your project or business potentially four figures in development costs if you were to out-source someone to build a website to this quality.

Introduction

This lesson covers registering your first domain name with namecheap.com. In this course I will be creating a website under the domain seanisbuilding.dev

Registering a Domain

Access the site themeforest.net and select a template which you think if fitting for your project or business. 

I would recommend looking at the HTML only templates.

Here is a link to the template I was raving about:
https://themeforest.net/item/nioland-saas-app-landing-page-html-template/43790266

Here is a link to the template I bought for this course:
https://themeforest.net/item/luique-personal-portfolio-template/42486765


Choosing a Template

Visual Studio Code Download:
https://code.visualstudio.com/download



Run the Project

A quick overview of the file structure we are working with.

Keep in mind that if your using a HTML only template and not a NextJS these will differ slightly but the general idea is the same.

With a HTML only template you won't need to do npm install or npm run dev you can access the files direct from there directories and make changes.

Understanding File Structure

Getting Started

We begin by editing the website main image of Zoe and updating the primary green colour with the Worked yellow.

I used the below site to get the colour code from the image:
https://html-color-codes.info/colors-from-image/

Getting started simple

In this lesson we will swap out the logo for our own and work on replacing out the light theme.

Updating assets and editing CSS files

In this lesson I do a hacky workaround to force the dark mode effect on the site (don't try this at home!) and removed the selector to switch it back.

This will need more work later, but it is fit for purpose for now. 

Switching on Dark Mode

In this lesson we work on our main index.jsx page to remove any unwanted sections or content from our webpage.

Managing your Sections

In this lesson I look at particular components on the page which I think need restyling. 

Styling Specific Elements

Watch me debug and figure out how to make changes in the JavaScript files to remove the cursor effect.

Updating JavaScript

In this lesson I begin working through the sections to add the relevant text to the site.

Updating the Content

Edit the remaining sections you have left with what you need and plan to display on the site. There is always a lot of unnecassary content in sections which can be cleaned up.

Tweaking the Sections

In this lesson I condense the rest of the content and add in the text and renamed the cases section to my courses where I can now start showcasing any future courses as I deliver them to the platform.

Woohoo!

Finishing Touches

Editing your Website

Now we have finished the website we need to push it up to source control. Here we can push and pull changes from a remote branch and set up a trigger so when we make changes, the website will automatically be updated in live.

Connect to Source Control

Using your newly created repo and connecting your GitHub account to https://vercel.com you should be able to select it from the list and deploy your site live to the web.

Vercel generated a subdomain for us to access it until we wire up our own!
https://seanisbuilding.vercel.app/

Notice how the Dark mode workaround did not work, we'll come back to that later.

Deploying your site live

Now we can link up your domain name to the site so you can access it like mine!

https://seanisbuilding.dev/

Link up your domain

I noticed once I deployed to live the dark mode hack I put in place wasn't working. In this lesson I cover making future changes to your website and watch how Vercel will automatically deploy them to the site.

https://seanisbuilding.dev/ we are live!

Good job if you managed to follow all the way through!

Finalising your Website

Deploying to the Web

Learn how to create a professional fully mobile responsive, browser compatible website at a fraction of the normal cost and time it would normally take.

How to create a professional website at 221mph

Course Details

Level

Ratings

Modules

Lessons

Public ADA Price

Holder $WORK Price

Public ADA Price

Holder ADA Price

NFT Token Gated Policy ID

NFT Token Gated Contract

Similar Courses

Contact Us

Navigation