Website_workshop

screenshot of Website_workshop
html

This website template was created for a 2 part website workshop that I held at USC.

Overview:

The website workshop is an easy-to-use website template created for a technical workshop. It is designed to help attendees jumpstart their personal website building journey using HTML, CSS, and JS. The template provides a live version of the website which can be accessed via a link. It is important to note that while the template aims to be well-made, it may not work perfectly all the time. However, any issues that arise can usually be resolved with a quick Google search or by referring to StackOverflow.

Features:

  • Simple and user-friendly design
  • Uses HTML, CSS, and JS for customization
  • Provides a live version for preview and testing
  • Includes instructions for cloning the template to a personal repository
  • Can be edited using a code editor such as VSCode
  • Compatible with popular internet browsers including Google Chrome, Microsoft Edge, and Safari
  • Can be managed using Terminal or GitHub Desktop
  • Code structure includes separate files for styling, content, and navigation

Cloning using Terminal:

  1. Open Terminal.
  2. Navigate to the folder where you want to clone the repository using the cd command (e.g., cd ~/Documents/Github).
  3. Enter the command git clone https://github.com/nganesh197/website_workshop.git to start the cloning process.
  4. Terminal will confirm if the cloning was successful.
  5. To learn more about cloning a repository using Terminal, refer to the GitHub tutorial on cloning a repo.

Cloning using GitHub Desktop:

  1. Open GitHub Desktop.
  2. In the left bar, click "Add" and then "Clone repository..."
  3. Go to the "URL" tab.
  4. Enter "nganesh197/website_workshop" in the text field.
  5. GitHub Desktop will confirm if the cloning was successful and return to the main page within the "website_workshop" repository.
  6. To verify that you are in the "website_workshop" repository, check if the current repository name is displayed as "website_workshop."
  7. To learn more about cloning a repository using GitHub Desktop, refer to the GitHub Desktop tutorial on cloning a repo.

Code Structure:

  • The index.html file serves as the home page and is the initial landing page when visitors open the website URL.
  • All design and aesthetic components of the website are located in the style.css file.
  • The content for each webpage is stored in separate HTML files.
  • The JavaScript files are responsible for adding the website's navigation and footer.

Summary:

The website workshop template is a valuable resource for individuals looking to kickstart their personal website building journey. Its simple design and reliance on HTML, CSS, and JS make it accessible to users of all skill levels. By following the installation instructions, users can easily clone the template to their personal repository, make edits using a code editor, and preview their changes using popular internet browsers. The template's code structure allows for easy customization of design, content, and navigation elements.

html
HTML

HTML templates are pre-designed and pre-built web pages that can be customized and used as a basis for building websites. They often include common elements such as headers, footers, menus, and content sections, and can be easily edited using HTML and CSS to fit specific branding and content needs.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.