One place for hosting & domains

      Project

      How To Set Up Your CSS and HTML Practice Project With a Code Editor



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will set up the folders and files necessary for exploring CSS and building a website. Using a code editor, you will create a project directory for our website, a folder and file for our CSS code, a file for our HTML code, and a folder for images. This tutorial series uses Visual Studio Code, a code editor freely-available for Mac, Windows, or Linux, but you may use whichever code editor you prefer. Note that certain instructions may need to be slightly modified if you use a different editor.

      How To Create HTML and CSS Files and Folders

      After opening your preferred text editor, open up a new project folder and name it css-practice. You’ll use this folder to store all of the files and folders you create in the course of this tutorial series.

      To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called css-practice:

      Gif of process of adding a project folder in Visual Studio Code

      Next, create a new folder inside css-practice and name it css. Inside this folder, open up a new file in your project directory and save it as styles.css—this is the file you’ll use to store our CSS style rules. If you are using Visual Studio Code, you can create a new folder by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the css-practice folder, selecting “New Folder” and creating the css folder. Then, click Right Click(on Windows) or CTRL + Left Click (on Mac) on the new css folder, select “New File”, and create the file styles.css as illustrated in the gif below:

      Gif of how to add CSS folder and file

      Save the file and leave it open.

      You also need to create a file to add our HTML content—the text, images, and HTML elements that will be rendered in the browser. In the project directory css-practice, open an additional new file and save it as index.html in the same way you created the styles.css file above. Make sure to save this index.html file in the css-practice folder and not in the css folder.

      Next, you need to add a line of code in the index.html document that instructs the browser to use the styles.css file as our style sheet. To do this, you’ll use the HTML <link> tag and link to the styles.css file. Add the following code snippet to your HTML document:

      index.html

      <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">
      

      This code snippet tells the browser to interpret the HTML code according to the stylesheet located at css/styles.css. Make sure you don’t erase this line while adding or deleting content to your index.html file throughout this tutorial series. Save your index.html file and keep it open.

      Finally, create an additional folder inside css-practice and name it images in the same way that you created the css folder above. This folder will be where you save any images you use in this tutorial series.

      You should now have a project folder named css-practice that contains the folders and files necessary for exploring CSS in this tutorial series:

      • A folder named css that contains the file styles.css
      • An empty folder named images
      • A file named index.html

      If you are using Visual Studio Code, your editor should now display the following file tree and the open files:

      Visual Studio Code Editor with file tree displayed

      Notice that the file names include extensions (.html and .css) that refer to the type of content they contain. You will add content to these files in our hands-on exercises in the tutorials that follow.

      Debugging and Troubleshooting CSS and HTML

      Precision is important when working with HTML and CSS. Even an extra space or mistyped character can keep your code from working as expected.

      If your HTML or CSS code is not rendering in the browser as intended, make sure you have written the code exactly as written in the tutorial. Though we encourage you to manually write out the code for the purpose of learning, copy and pasting can be helpful at times to ensure that your code matches the examples.

      HTML and CSS errors can be caused by a number of things. Check your markup and CSS rules for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. You should also make sure that you don’t accidentally use “curly” or “smart” quotation marks like and " that are often used by word processors. Curly quotes are designed for human-readable text and will cause an error in your code as they are not recognized as quotation marks by browsers. By typing quotation marks directly into your code editor, you can make sure you are using the right kind.

      Also, each time you change your code, make sure to save your file before reloading it in the browser to check your results.

      A Quick Note on Automatic HTML Support Features

      Some code editors—such as the Visual Studio Code editor we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.

      Conclusion

      You are now ready to proceed with the tutorial series. In the next tutorial, you’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.



      Source link

      How To Set Up Your CSS and HTML Website Project



      Part of the Series:
      How To Build a Website With CSS

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will set up the folders and files necessary for building a website with HTML and CSS. You will also prepare an index.html file so that it is ready to receive HTML content in the tutorials ahead.

      Prerequisites

      If you have been following along with this tutorial series, you can continue using the css-practice project directory, index.html file, images folder, css folder, and styles.css file that you created earlier in the series. If you have not been following along this tutorial series and need instructions for setting up these folders and files, please see our earlier tutorial in this series How To Set Up Your CSS and HTML Practice Project.

      Note: If you decide to create your own names for the folders or files, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Be aware also that you will need to modify your file paths in some of the steps throughout the remainder of this tutorial series to ensure that they correspond with the names of your files.

      You should have a project folder named css-practice that contains the following folders and files that are necessary to explore CSS in this tutorial series:

      • A folder named css that contains the file styles.css
      • An empty folder named images
      • A file named index.html

      In the first step of this tutorial, you will prepare the index.html file so that it is ready to receive content in the tutorials ahead.

      How To Prepare Your index.html File For HTML Content

      To prepare your index.html file to serve as your website’s homepage, we’ll need to add a few important lines of HTML. These lines of HTML will serve as instructions for the browser and will not be displayed on the webpage itself. Make sure that your index.html file is empty (if you have content from previous tutorials) and add the following code snippet to the document:

      index.html

      <!DOCTYPE html>
      <html lang="en">
        <head>
         <meta charset="utf-8">
         <title>Sammy the Shark</title>
         <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css">
        </head>
        <body>
        </body>
      </html>
      

      Make sure to change the highlighted site title with a title of your own choosing. Then save the index.html file. Before continuing, let’s briefly review the code that you just added to understand its purpose:

      • The <!DOCTYPE html> declaration tells the browser which type of HTML is being used in this document. It is important to declare this value as there are multiple versions of the HTML standard, and browsers need to know which to use. In this declaration, html specifies the current web standard of HTML, which is HTML5.
      • The opening and closing <html> tags tell the browser that all content inserted between these two tags should be interpreted as HTML. Inside this tag, you also added the lang attribute, which specifies the language of the webpage. In this example, the language is set to English using the en language tag. For a full list of language tags, visit the IANA Language Subtag Registry.
      • The opening and closing <head> tags creates a section in the HTML document that typically contains information about the page, rather than page content itself. Browsers do not display the information in a <head> section.
      • The <meta charset="utf-8"> tag specifies the document’s character set should be UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.
      • The <title> tag tells the browser the name of the webpage. This title appears on the browser tab and when the site is listed in search results but it does not show up on the web page itself. Make sure to replace “Sammy the Shark” with your name or a title of your choosing if you want to personalize the site.
      • The <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/css/styles.css"> tells the browser where to find the stylesheet that contains the style rules. If you followed the instructions earlier in this series How To Set Up Your CSS and HTML Practice Project, your stylesheet should be located at this file path.
      • The opening and closing <body> tags will contain the main content of the webpage. You’ll add the HTML content between these tags in the tutorials ahead.

      Conclusion

      You have now created all of the folders and files necessary for creating a website with HTML and CSS. You should also have an index.html file prepared with the necessary HTML content for serving as your website’s homepage. In the next tutorial, you’ll explore how the demonstration site is constructed and the steps you will take to recreate it.



      Source link

      How to Push an Existing Project to GitHub


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      GitHub is simply a cloud-hosted Git management tool. Git is distributed version control, meaning the entire repo and history lives wherever you put it. People tend use GitHub though in their business or development workflow as a managed hosting solution for backups of their repositories.

      It’s a convenient and mostly worry-free method for backing up all your code repos. It also allows you to very nicely navigate and view your code on the web. GitHub takes this even further by letting you connect with coworkers, friends, organizations, and more.

      Prerequisites:

      To initialize the repo and push it to GitHub you’ll need:

      1. A free GitHub Account
      2. git installed on your local machine

      Step 1: Create a new GitHub Repo

      Sign in to GitHub and create a new empty repo page. You can choose to either initialize a README or not. It doesn’t really matter because we’re just going to override everything in this remote repository anyways.

      Create new GitHub Repo

      Through the rest of this tutorial we’ll assume your GitHub username is sammy and the repo you created is named my-new-project (So you’ll need to swap those out with your actual username and repo name when copy/pasting commands)

      Step 2: Initialize Git in the project folder

      From your terminal, run the following commands after navigating to folder you would like to add:

      Initialize the Git Repo

      Make sure you are in the root directory of the project you want to push to GitHub and run:

      This step creates a hidden .git directory in your project folder which the git software recognizes and uses to store all the metadata and version history for the project.

      Add the files to Git index

      The git add command is used to tell git which files to include in a commit, and the -A argument means “include all”.

      Commit Added Files

      • git commit -m 'Added my project'

      The git commit command creates a new commit with all files that have been “added”. the -m 'Added my project' is the message that will be included alongside the commit, used for future reference to understand the commit.

      Add new remote origin (in this case, GitHub)

      • git remote add origin git@github.com:sammy/my-new-project.git

      Note: Don’t forget to replace the highlighted bits above with your username and repo name.

      In git, a “remote” refers to a remote version of the same repository, which is typically on a server somewhere (in this case GitHub.) “origin” is the default name git gives to a remote server (you can have multiple remotes) so git remote add origin is instructing git to add the URL of the default remote server for this repo.

      Push to GitHub

      • git push -u -f origin master

      With this, there are a few things to note. The -f flag stands for force. This will automatically overwrite everything in the remote directory. We’re only using it here to overwrite the README that GitHub automatically initialized. If you skipped that, the -f flag isn’t really necessary.

      The -u flag sets the remote origin as the default. This lets you later easily just do git push and git pull without having to specifying an origin since we always want GitHub in this case.

      All together

      • git init
      • git add -A
      • git commit -m 'Added my project'
      • git remote add origin git@github.com:sammy/my-new-project.git
      • git push -u -f origin master

      Conclusion

      Now you are all set to track your code changes remotely in GitHub! As a next step here’s a complete guide to how to use git

      Once you start collaborating with others on the project, you’ll want to know how to create a pull request.



      Source link