Project 0: Homepage
Download the distro code for this project from https://cdn.cs50.net/web/2018/spring/projects/0/project0.zip and unzip…
Git and GitHub
- Git can keep track of changes made to code, synchronize code between different people, test changes to code without losing the original, and revert back to old versions of code.
- GitHub is a website that stores Git repositories on the internet to facilitate the collaboration that Git allows for. A repository is simply a place to keep track of code and all the changes to code.
- Git commands:
git clone <url>: take a repository stored on a server (like GitHub) and downloads it
git add <filename(s)>: add files to the staging area to be included in the next commit
git commit -m "message": take a snapshot of the repository and save it with a message about the changes
git commit -am <filename(s)> "message": add files and commit changes all in one
git status: print what is currently going on with the repository
git push: push any local changes (commits) to a remote server
git pull: pull any remote changes from a remote server to a local computer
git log: print a history of all the commits that have been made
git reflog: print a list of all the different references to commits
git reset --hard <commit>: reset the repository to a given commit
git reset --hard origin/master: reset the repository to its original state (e.g. the version cloned from GitHub)
- When combining different versions of code, e.g. using
git pull, a merge conflict can occur if the different versions have different data in the same location. Git will try to take care of merging automatically, but if two users edit, for example, the same line, a merge conflict will have to be manually resolved.
- To resolve a merge conflict, simply locally remove all lines and code that are not wanted and push the results.
- HTML (HyperText Markup Language) is used to lay out the structure of a webpage.
<!DOCTYPE html>is placed at the start of an HTML file to indicate to the browser that HTML5 is being used.
- HTML is made up of tags. Tags generally come in pairs, with data being in between the tags. Generally, tags are indented to help visualize their hierarchy, but any indentation is purely stylistic. Tags can also have attributes, which are data fields, sometimes required and sometimes optional, that provide additional information to the browser about how to render the data.
- Some common HTML tags:
<html></html>: contents of website
<head></head>: metadata about the page that is useful for the browser when displaying the page
<title></title>: title of the page
<body></body>: body of the page
<h1></h1>: header (h1 is the largest header, h6 is the smallest header)
<ul></ul>: unordered list
<ol></ol>: ordered list
<li></li>: list item (must be inside either
<img src="path/to/img.jpg" height="200" width="300">: image stored at
srcattribute, whcih can also be a URL
- note that
srcis a single tag without an end tag
widthare optional (if one is omitted, the browser will auto-size the image), and can also take a percentage:
height=50%to automatically scale the image to a certain portion of the page
<th></th>: table header
<tr></tr>: table row
<td></td>: table data (cell)
<form></form>: form that can be filled out and submitted by the user
<input type="text" placeholder="Full Name" name="name">: input field
typeindicates the type of data
placeholderis the greyed-out text shown before the field is filled
nameis an identifier for the input field
<button></button>: button used to submit form
- The Document Object Model is a way to conceptualize webpages by representing them as a interconnected hierarchy of nodes. In HTML, the nodes of the DOM would be the different tags and their contained data, with the
<html></html>tag being at the very top of the tree. While this might seem a little unintuitive at first, this model will become very useful in the future.
- CSS (Cascading Style Sheets) is a language used to interact with and style HTML, changing the way it looks according to a series of rules. CSS is what makes websites look nice.
- CSS can be applied to HTML in a variety of ways:
- The semicolon-separated CSS properties passed to
stylewill be applied to whatever the tag containts.
- ``` — This is a useful paradigm to use when reusing the same styling many times throughout a page. The properties listed will apply to all of the tags that are listed.
- A separate
<link rel="stylesheet" href="path/to/styles.css">to the header, and move the CSS code (same format as used inside the
- This is often an even better paradigm because it separates two distinctly different things: structure (HTML) and style (CSS), while also being easier to manage and read.
- Some common CSS properties (those that take arguments in pixels often can take a percentage or simply
color: #0c8e05: can be 1 of ~140 named colors, or a hexadecimal value that represents an RGB value
text-align: left: aligns text to
left; other possible arguments are
background-color: teal: sets the background to a color, which is the same format as the
height: 150px: sets the height of an area
width: 150px: sets the width of an area
margin: 30px: sets the margin around all four sides of an area
- can also be broken up into
padding: 20px: sets the padding around text inside an area
- can be broken up the same way as
font-family: Arial, sans-serif: sets the font family to be used
- a comma-separated list provides alternatives in case a browser doesnâ€™t support a specific font
- generic families such as
sans-serifwill use browser defaults
font-size: 28px: sets the font size
font-weight: bold: sets the font weight to quality, a relative measure (
lighter), or a number (
border: 3px solid blue: sets a border around an area
- There are lots of CSS properties that can be used in a lot of different ways. Check out the wonderfully extensive documentation for more information.
Sectioning with HTML and CSS
- Two special tags allow us to break up a our webpage into sections:
<div></div>: vertical division of a webpage
<span></span>: section of a webpage inside, for example, text
<span></span>donâ€™t really do much by themselves, but they allow for the labelling of sections of a webpage..
- Different sections of a webpage can be referenced with the
ids uniquely identify elements, but there can be an arbitary number of elements with a given
ids can be referenced in CSS with
classes can be referenced with
classes, therefore, can be used to style the same types of areas (3 different
<div></div>, for example) in different ways.
- GitHub Pages is a feature of GitHub which allows for a repository to be deployed to the internet.
- Simply scroll to GitHub Pages under Settings, select the master branch, and click save.
- By default, the repository will be deployed to username.github.io/repository.
- GitHub Pages is automatically updated when the repository is updated.