fa21-cse110-lab3's Issues
CSS Regular Selectors Checklist Item
Implement various types of selectors to select HTML elements to style.
- Class Selector (
.class
) - ID Selector (
#id
) - Universal Selector (
*
) - Event selector (
element
) - Attribute selector (e.g.
[attribute=foo]
) - Psuedo-class Selector (e.g.
p:hover
) - Selector List (
element, element
)
CSS Device Responsiveness Checklist Item
Implement at least one query based on screen width to make website friendly for multiple devices.
CSS Units of Measurement Checklist Item
Implement Units of Measurement in CSS Stylesheet for sizing and spacing elements.
3 Relative Units
- Instance 1
- Instance 2
- Instance 3
3 Absolute Units
- Instance 1
- Instance 2
- Instance 3
CSS Text Styling Checklist Item
Implement Text Styling in CSS Stylesheet.
-
color
-
text-decoration
-
text-align
CSS Color Checklist Item
Implement Colors to HTML elements in CSS Stylesheet.
- rgb(r, g, b) or rgba(r, g, b, a) /* red, green, blue, alpha values */
- #FFF or #FFFFFF /* hex codes */
- hsl(h, s, l) or hsla(h, s, l, a) /* hue, saturation, lightness, alpha values */
- Color Name
Create Empty Stylesheet
Create empty stylesheet for meeting minutes page.
CSS Display Settings Checklist Item
Edit display settings in CSS Stylesheet, experimenting with these values: none, block, inline-block, inline
on the display
.
Include at least two of them in your page.
- Instance One
- Instance Two
CSS Position Checklist Item
Implement positioning on the page in a CSS Stylesheet, making use of two of the following features on the position
property.
-
static
-
relative
-
fixed
-
absolute
-
sticky
CSS Background Styles Checklist Item
Implement Background Styles in CSS Stylesheet.
- background-color
CSS Sizing Checklist Item
Set height and width for elements in CSS Stylesheet.
-
height
-
width
-
max-width
-
min-width
CSS Grid Checklist Item
Implement grid for the layouts
- Apply
grid
todisplay
property - Must have more than two children within element using the grid
- Must use minimum of three grid related attributes
CSS Combinators Checklist Item
Specify selections based on element positioning in the DOM tree
- Decendant Combinator (
element element
) - Child Combinator (
element > element
) - General Sibling Combinator (
element ~ element
) - Adjacent Sibling Combinator (
element + element
) - Combining Two Selectors (
element.class
)
CSS Psuedo-class Checklist Item
Implement psuedo-classes that exist in a document conditionally.
-
:hover
-
:active
CSS Flexbox Checklist Item
Implement flexbox that allows elements to lay themselves out automatically.
- Apply
flex
to thedisplay
property - Must have more than two children on element using flexbox
- Must use minimum of three flexbox related attributes
CSS Box Model Checklist Item
Configure containers that hold HTML content in CSS Stylesheet.
Margin
Spacing between html elements
- Long (
margin-top, margin-bottom, margin-left, margin-right
) - Short (
margin: <top> <right> <bottom> <left>
) - Auto margins:
margin: auto
Padding
Spacing within html elements
- Long (
padding-top, padding-bottom, padding-left, padding-right
) - Short (
padding: <top> <right> <bottom> <left>
)
Borders
borders around html elements (try before using margin/padding)
-
border-style
-
border-color
-
border-width
-
border-radius
Standup Template
- Create a standup notes template in a Markdown file standup.md
CSS Font Checklist Item
Include and use a 3rd party font (https://fonts.google.com/)
Can either load font in HTML or CSS.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.