# switch to starter branch to get new starter code
git checkout starter
# download new starter code
git pull
# switch back to main branch for coding
git checkout main
# merge in new starter code
git merge starter --no-edit
# code and enjoy!
Get the starter code from the starter branch, but do all of your work on main.
# do all your coding on `main`!
# switch to gh-pages to publish
git checkout gh-pages
# merge the changes from main
git merge main
# push to GitHub to publish
git push origin gh-pages
# switch back to main branch for more coding
git checkout main
# remember to push your souce code for grading
git push origin main
We use a similar process to "publishing" code to Github Pages. Do all coding on main. Never edit code on
gh-pages
(see also: https://websitesfromhell.net/)
"use this color and font for the first paragraph in the article; this picture for the page's background..."
/* A rule with many properties */
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
"font"
selector: apply to all <h1> elements
style.css
h1 {
font-family: 'Helvetica';
color: white;
background-color: #333; /*dark gray*/
}
<head>
<link rel="stylesheet" href="style.css">
</head>
<head>
relation between this page and reference
no content,
no closing tag
font-family
: the "font" (list alternates separated by commas)
font-size
: the size of the text
font-weight
: boldness
color
: text color
background-color
: element's background
padding
: the space around an element
Have a rule apply to only a particular elements by specifying those elements' class attribute and then using that class as the selector in the CSS
/* CSS */
.highlighted {
background-color: yellow;
}
<!-- HTML -->
<p class="highlighted">This text is highlighted!</p>
dot specifies class name, not tag name
<div>
and
<span>
HTML elements that have no semantic or appearance meaning on their own.
Used to "group" or "label content for styling.
<div class="cow">
<p>Moo moo moo.</p>
<p>Moooooooooooooooooooo.</p>
</div>
<div class="sheep">
<p>Baa baa <span class="dark">black</span> sheep,
have you any wool?</p>
</div>
block element (line break)
inline element (no line break)
Add some styling to your page!
Multiple rules can apply to the same element (in a "cascade").
p { /* applies to all paragraphs */
font-family: 'Helvetica'
}
.alert { /* applies to all elements with class="alert" */
font-size: larger;
}
.success { /* applies to all elements with class="success" */
color: #28a745; /* a pleasant green */
}
<p class="alert success">
This paragraph will be in Helvetica font, a larger
font-size, and green color, because all 3 of the above
rules apply to it.
</p>
two classes (space separated)
example: http://www.csszengarden.com/
<!-- HTML -->
<p>This text has <i>emphasis!</i></p>
/* CSS */
em {
font-style: normal;
text-decoration: underline;
}
why is this italicized?
change what emphatic text looks like
HTML describes the meaning, not what it looks like!
<!-- HTML -->
<p>This text has <em>emphasis!</em></p>
says nothing about appearance!
Use sectioning elements in place of <div> elements to give them semantic meaning ("a special div").
header | A "banner" for the page |
main | The main content of the page |
footer | Contact and copyright information |
nav | A navigation element (can be in the header; can have more than one!) |
section | "parts" that would appear in the outline of the document. Deserves a heading; can have their own <header> |
article | A self-contained, republishable section (may be embedded elsewhere). Less common. |
Use headings (h1, h2, etc) to create a "table of contents" for your webpage. DO NOT SKIP LEVELS!
<h1>My Hobbies</h1>
<p>These all are activities I love to do on a regular basis.</p>
<h2>Physical Activities</h2>
<h3>Playing Soccer</h3>
<p>Soccer is a team sport played between two teams of eleven players with a spherical ball.</p>
<h3>Dancing</h3>
<p>Dance is a performing art form consisting of purposefully selected sequences of human movement.</p>
<h4>Salsa</h4>
<p>Salsa is a popular form of social dance that originated in the Caribbean.</p>
<h4>Rock'n'Roll</h4>
<p>Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.</p>
<h3>Gardening</h3>
<p>Gardening is the practice of growing and cultivating plants as part of horticulture.</p>
<h2>Relaxing Activities</h2>
<h3>Watching Movies</h3>
<p>A film, also called a movie, motion picture, theatrical film, or photoplay, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon.</p>
<h3>Meditate</h3>
<p>Meditation is a practice where an individual operates or trains the mind or induces a mode of consciousness, either to realize some benefit or for the mind to simply acknowledge its content without becoming identified with that content, or as an end in itself.</p>
Screen reader built into Mac OS X.
Mark Sutton UCSF
https://www.youtube.com/watch?v=dEbl5jvLKGQ
Check that your page is accessible! For example:
Read: through Chapter 6
Problem Set 01 due Monday 1/8
Problem Set 02 due Friday 1/12
(mostly on today's material, accessible HTML & some CSS)
Next: CSS Selectors and Properties
While the task maybe to implement a program, the work you need to do for this class is to learn the material. AI can help you with the task, it cannot help you with the work. recognition != recall
For full details, see the syllabus on Canvas