CSE 154

Part II: Your Web Programming Environment

To get started with your first website, you need 1) a text editor like Atom and 2) a browser.

You should have Atom installed on your machine. This is what we will be supporting for developing websites over the quarter. Note: if you prefer another editor such as Sublime, VSCode, Vim, etc. you may use it but TA's will not be expected to help with these. Atom has some useful packages you can install, as covered in the tutorial.

Students are expected to use the Chrome browser for this class due to its web development features, as well as accessibility tools that are not supported on other browsers. Note that when browsing the web, you need Internet access. But when writing HTML webpages, you don't!

Part II (Cont.)

Writing HTML and CSS with an editor is similar to writing Java in an IDE like jGrasp or Eclipse, or writing Python on the command line or your Python IDE of choice. Conveniently, we don't need to compile HTML/CSS, and to "run" the code, we just open the HTML page on the browser.

If you prefer another text editor like VisualStudio, Vim, or Emacs, these all work as well (but we won't go into the details for each).

Common HTML Tags

There are many different types of HTML tags used to structure web pages (we can't possibly cover all of them within class). We've consolidated a handy slide deck with examples of common tags you should know , but you can find a comprehensive list on MDN (it's a great bookmark page for reference this quarter!)

Exercise: Marking Up a Text File

To familiarize ourselves with HTML, let's use the slide deck linked on the previous slide to give HTML structure to this text file.

Solution

<h1>THE RUBIK'S CUBE</h1>
<p>
  The Rubik's Cube is one of the most fascinating physical puzzles ever made.
  While simple in it's design, they are <em>tough</em> to solve!
</p>
<h2>Here are three great things about the Rubik's Cube:</h2>
<ol>
  <li>
    Speed-solving a Rubik's Cube is a fun goal to strive towards,
    and you can even participate in competitions!
  </li>
  <li>The Rubik's Cube comes in a variety of shapes and sizes:
    <ul>
      <li>The 2x2 Rubik's Cube is perfect for introducing puzzles to kids!</li>
      <li>The 3x3 Rubik's Cube is a classic, and has a lot of depth</li>
      <li>The largest solved Rubik's Cube was 17x17, solved in 7.5 hours!</li>
    </ul>
  </li>
  <li>Novel Rubik's Cube designs make for great desk-toppers!</li>
</ol>
<p>
  If you want to learn how to solve a Rubik's Cube, go to
  <a href="https://www.rubiks.com/how-to-solve-rubiks-cube">this link</a>!
</p>
            

HTML

Resource: Command Line Basics

New to the bash terminal? It's just like a text-based alternative to your computer's file-finder GUI, but with a ton of features to edit and run different programs in the same location. Here are some tips for getting around the command line! To learn more, use the handy "down" feature of these slides :)

Moving around the command line

"list" files & directories

ls

"change directory" - changes directory to the given path (relative to the current working directory)

cd [folder-name]

The Current Working Directory

The current working directory refers to the directory your command line is currently targeting.

Any command line commands (including git commands) will apply to the current working directory.

It is often helpful to use ls to check where your current directory is.

Listing files: ls

• "Lists" files and directories directly inside the current working directory
• Use in conjunction with cd to navigate your filesystem in the command line

Changing directories: cd

cd can be used with relative paths (assuming "folder-name" is a child of the current working directory)...

...or with absolute paths

cd C:\windows\system32

Windows Commandd Prompt

cd ~/Documents/cse154/cp1-html-css/

Bash Terminal (Git Bash, Mac/Unix Bash)

Can use cd to move up one directory

Clone a repository

Copy the URL of the repository on GitLab

Clone a repository (continued)

Use ls and cd to navigate to the directory where you want to store your Git repositories (e.g. cse154/assignments/), then type:

git clone [repository-path]

Bash Terminal

This creates a copy of the repository in your current working directory. You will one have repository per assignment.

Publishing changes

The following commands need to be executed inside the repository folder that you cloned every time you want to update the repository online.

1. Add
2. Commit
3. Push

Click each link or press the down key to learn more about each step!

git add

git add [filename]

Bash Terminal

Specifies changed files for the next commit.

To add multiple specific files:

git add [file1] [file2] [etc...]

Bash Terminal

To add everything in the current directory:

git add .

Bash Terminal

git commit

git commit -m "descriptive message"

Bash Terminal

Commits your added changes with a descriptive commit message (local to your computer until next push)

git push

git push origin master

Bash Terminal

Updates your online Git repository with all of your committed changes (internet required)

Parallels to the Git GUI in Atom