🌐

Creating and Hosting a Website

Aug 2, 2024

Creating and Hosting a Website

Introduction

  • Instructor: Beau Carnes
  • Goal: Learn to create and host a website, get a custom domain, configure DNS settings, and set up a custom email.

Creating a Website

HTML, CSS, and JavaScript

  • HTML describes the structure.
  • CSS describes the style.
  • JavaScript adds interactivity and functionality.
  • Recommended text editor: Visual Studio Code.

Using a Template

  • Templates provide starter code and are a good way to learn by modifying existing structures.
  • Example: Chose a video gallery template named 'full motion'.
  • Steps:
    1. Download and unzip the template.
    2. Open files in Visual Studio Code: index.html for the main HTML.
    3. Customization usually requires knowledge of basic HTML and CSS.

Basic HTML Structure

  • HTML tags: <html>, <head>, <title>, <meta>, <link>, <body>, <div>, <h1>, <p>, <a>, <ul>, <li>, <footer>.
  • Example structure within HTML: <div id="main"> <div class="inner"> <h1>Heading</h1> <p>Paragraph</p> <a href="link">Learn More</a> </div> </div>

CSS Basics

  • CSS selectors: Apply style to specific elements.
  • Example: body { color: #fff; font-family: 'Source Sans Pro', sans-serif; }

Making Changes in the Template

  • Modify text and links to point to your own resources.
  • Example: Changing video links and titles.
  • Common classes: thumbnails, box.

Responsive Design

  • Media queries in CSS adjust styles based on screen size.
  • Example: @media screen and (max-width: 1024px) { .box { width: 45%; } }

Additional Customizations

  • Modify background colors and hover states using CSS.

Purchasing a Domain

  • Domain examples: youtube.com, freecodecamp.org.
  • Domain providers: GoDaddy, Google Domains, Namecheap, get.tech.
  • Less common domain endings may offer more availability and uniqueness.
  • Example domain: bowteaches.tech

Domain Purchase Process

  • Choose a domain name and ending.
  • Purchase with privacy protection to avoid spam.
  • Manage orders and update DNS settings as needed.

Hosting Options

Paid Hosting Providers

  • Examples: Bluehost, Hostgator, Hostinger, GoDaddy, Dreamhost.
  • Use cPanel for managing hosting environment.

File Manager

  • Upload and manage files using File Manager or FTP.
  • Common directory for public files: public_html.
  • Example: Uploading a zipped website folder and extracting.

Additional cPanel Features

  • Create sub-domains.
  • Setup email accounts.
  • Install WordPress using 1-click installers.

Using GitHub Pages for Free Hosting

  • Create a repository named username.github.io.
  • Upload website files directly through GitHub's web interface.
  • Make the site live by navigating to username.github.io.

Using a Custom Domain with GitHub Pages

  • Add a custom domain in GitHub repository settings.
  • Manage DNS settings of the domain provider:
    • Add CNAME record for www forwarding to GitHub Pages.
    • Add A record for root domain pointing to GitHub Pages IP.
    • Example A record IP: 185.199.108.153
  • Updating name servers for DNS changes to take effect.

Conclusion

  • Final check to ensure DNS propagation and website loading.
  • Overview of the steps from website creation to going live.

Additional Tips

  • Utilize source code editors and browser developer tools for troubleshooting.
  • Familiarize with CSS properties for styling and responsive design adjustments.

References

  • Links to playlists, tutorials, and further readings provided in the course materials.

Full transcript