fa21-cse110-lab3's Introduction
fa21-cse110-lab3's People
fa21-cse110-lab3's Issues
Responsiveness styling
Describe the feature
Add responsiveness styling
Implementation Tasks
- Implement at least one query based on the screen width
Add background color
Describe the feature
Add background color to notes.
Implementation Tasks
- Determine what and where to add color.
- Use
background-color
to do so.
Sizing Styling
Describe the feature
Add sizing styling to meeting notes.
Implementation Tasks
- Add height
- Add width
- Add max height
- Add max width
Font styling
Describe the feature
Add font styling.
Implementation Tasks
- Find a third party font and include/use it.
Add inline styling
Describe the feature
Inline style an element of the meeting notes.
Implementation Tasks
- Determine a part of the meeting notes to inline style.
- Style the notes via inline styling.
Pseudo-class styling
Describe the feature
Add pseudo class styling.
Implementation Tasks
- add :hover
- add :active
Color Styling
Describe the feature
Add color css.
Implementation Tasks
- Determine which elements to color (coloring should have meaning)
- Style them.
Add <style> tag
Describe the feature
Add <style> tag.
Implementation Tasks
Add a <style> tag to do styling for meeting minutes.
Add layouts
Describe the feature
Add layouts styling
Implementation Tasks
- Flexbox
- Grid
Style Website
Describe the feature
Add stylistic elements to the meeting minutes.
Implementation Tasks
- Determine style elements to add.
- Create an external css file for styling.
- Add styling.
Text Styling
Describe the feature
Style the text of the meeting notes.
Implementation Tasks
- Style headers and sub headers differently.
- Incorporate these:
color
text-decoration
text-align
Display styling
Describe the feature
Incorporate display styling.
Implementation Tasks
- Do this:
Experiment with these values: none, block, inline-block, inline. Include at least two of them in your page.
Apply theses values to the display property
Meeting Markdown Template
Describe the feature
A template for daily stand up meeting notes.
Implementation Tasks
- Create a markdown file for the meeting minutes.
- Determine key aspects of daily standup minutes.
- Implement key aspects as headers
Implement box-model styling.
Describe the feature
Add box-model styling.
Implementation Tasks
- Determine what box-model styling can do.
- Add these:
Margin, Padding, Borders
Within margin, padding, and borders, use these:
Margin /* spacing between html elements */
Long (margin-top, margin-bottom, margin-left, margin-right)
Short (margin: )
Auto margins: margin: auto
Padding /* spacing within html elements */
Long (padding-top, padding-bottom, padding-left, padding-right)
Short (padding: )
Borders (Links to an external site.) /* borders around html elements, hint: apply borders before testing out padding and margin to better understand the difference between the two */
border-style
border-color
border-width
border-radius
Position styling
Describe the feature
Add position styling
Implementation Tasks
- Use 2 of the following values: static, relative, fixed, absolute, sticky
Selectors Stying
Describe the feature
Add css selectors styling.
Implementation Tasks
Class Selector (.class)
ID Selector (#id)
Universal Selector ()
Element Selector (element)
Attribute Selector (e.g. [attribute=foo])
Pseudo-class Selector (e.g. p:hover)
Selector List (element, element) / select multiple elements /
Combinators (you must use one of each) / specify selections based on element positioning in the DOM tree */
Descendant Combinator (element element)
Child Combinator (element > element)
General sibling combinator (element ~ element)
Adjacent sibling combinator (element + element)
Combining Two Selectors (element.class)
Unit Styling
Describe the feature
Add unit styling
Implementation Tasks
- Determine what unit styling is.
- Incorporate these:
Use 3 unique relative units total
Use 3 unique absolute units total
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.