-
Notifications
You must be signed in to change notification settings - Fork 17
/
css-checklist.txt
258 lines (228 loc) · 11.2 KB
/
css-checklist.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
CSS Checklist
Only concepts that you need to practice to master CSS.
Getting Started
===============
1. Introduction
Cascading Style Sheets (CSS) is a style sheet language which is used for designing the webpages and their layouts developed in a markup language like HTML.
Links (1): https://iq.opengenus.org/basics-of-css/
2. 3 CSS Levels
CSS styles can be applied to HTML elements in 3 ways.
Links (1): https://iq.opengenus.org/css-levels/
3. Keywords
HTML and CSS are essential for web development and a good understanding of the key terms used is necessary.
Links (3): https://iq.opengenus.org/html-tags-list/, https://iq.opengenus.org/basics-of-css/, https://iq.opengenus.org/key-terms-in-html-and-css/
4. Box Model
CSS Box Model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Links (1): https://iq.opengenus.org/css-box-model/
5. CSS Layouts
CSS Layouts are used to define the position of HTML elements on a web page.
Links (1): https://iq.opengenus.org/types-of-css-layout/
6. CSS Units
CSS Units are used to specify the size and position of elements in a document.
Links (1): https://iq.opengenus.org/different-units-in-css/
---
CSS Properties
==============
1. Overflow
The Overflow Property controls any content that might extend beyond the container.
Links (1): https://iq.opengenus.org/overflow-property-in-css/
2. Clip
The Clip Property is used to define the visible portion of an element by specifying its clipping region.
Links (1): https://iq.opengenus.org/clip-property-in-css/
3. Height & Width
Height and Width are properties in CSS which are used to set the height and width of boxes or elements.
Links (1): https://iq.opengenus.org/height-and-width-in-css/
4. Padding
The Padding Property is used to create spacing between content of HTML.
Links (1): https://iq.opengenus.org/padding-in-css/
5. Margin
The Margin Property is used to create space between webpage border and HTML Element's border.
Links (1): https://iq.opengenus.org/margin-css/
6. Rounded Corners
Rounded Corners / Border Radius is a CSS property that allows you to add rounded corners to an element.
Links (1): https://iq.opengenus.org/css-border-radius-property/
7. Border
The Border Property is used to create border around any HTML Tag.
Links (1): https://iq.opengenus.org/border-css/
8. Transition
Transition is a CSS property that allows you to change the values of a CSS property over time.
Links (1): https://iq.opengenus.org/transitions-in-css/
9. Writing Mode
The Writing Mode Property is used to specify whether lines of text are laid out horizontally or vertically.
Links (1): https://iq.opengenus.org/css-writing-mode/
10. Customize Fonts
You can Customize Fonts in HTML using CSS to make your website look more attractive and unique.
Links (1): https://iq.opengenus.org/fonts-in-html/
---
Selectors
=========
1. CSS Selectors
CSS selectors identify specific HTML elements as targets for CSS styles.
Links (1): https://iq.opengenus.org/css-selectors/
2. Class Selectors
The CSS Class Selectors are used to select all elements which belong to a particular class attribute.
Links (1): https://iq.opengenus.org/class-selector/
3. Id Selectors
The CSS Id Selector matches an element based on the value of its id attribute.
Links (1): https://iq.opengenus.org/id-selector-in-css/
4. Id vs Class Selectors
It is important to understand the differences between Id & Class Selectors and when to use each one.
Links (1): https://iq.opengenus.org/id-and-class-selector/
5. Attribute Selectors
Attribute Selectors in CSS allows you to select DOM elements based on the attributes they contain as well as the values of those attributes.
Links (1): https://iq.opengenus.org/attribute-selector-in-css/
---
Bootstrap
=========
1. Bootstrap Grid
Bootstrap Grid system is a responsive and mobile-first system for creating layouts in HTML and CSS.
Links (1): https://iq.opengenus.org/grid-system-in-bootstrap/
2. Bootstrap Table
Bootstrap Table is a dynamic and responsive HTML table framework provided by Bootstrap.
Links (1): https://iq.opengenus.org/bootstrap-tables/
3. Bootstrap Slider
Bootstrap Slider is a component that lets users pick a value from a given range.
Links (1): https://iq.opengenus.org/slider-carousel-in-web/
4. Bootstrap Clearfix
Bootstrap Clearfix is a utility class that clears floats from the left or right side of an element.
Links (1): https://iq.opengenus.org/clearfix-in-bootstrap/
---
Images
======
1. Image Properties
CSS image properties are used to set the image size, image opacity, image alignment, etc.
Links (1): https://iq.opengenus.org/images-styling-css/
2. Masking in CSS
Masking image in CSS is a technique to hide a part of an element and show the rest of the element.
Links (1): https://iq.opengenus.org/masking-in-css-mask-image/
---
Positioning
===========
1. Positioning Property
Positioning in CSS is used to set the position of an element in a document.
Links (1): https://iq.opengenus.org/css-position-property/
2. Z-index
Z-index is a CSS property that specifies the stack order of an element.
Links (1): https://iq.opengenus.org/z-index-property-in-css/
3. Grid Positioning
Grid Positioning is a CSS property that specifies the stack order of an element.
Links (1): https://iq.opengenus.org/grid-positioning-in-css/
---
Design Laws
===========
1. Parkinson's Law
Parkinsons Law states that work expands to fill the time available for its completion.
Links (1): https://iq.opengenus.org/parkinsons-law-in-ux-design/
2. Jakob's Law
Jakob's Law states that users spend most of their time on other sites, and prefer your site to work the same way as all the other sites they already know.
Links (1): https://iq.opengenus.org/jakobs-law-in-ux-design/
3. Miller's Law
Miller's Law states that the average person can only keep 7 (plus or minus 2) items in their working memory.
Links (1): https://iq.opengenus.org/millers-law-in-ux-design/
4. Hick's & Fitt's Law
Hick's & Fitt's Law states that the time it takes to make a decision increases with the number and complexity of choices.
Links (1): https://iq.opengenus.org/hicks-law-and-fitts-law-in-ux/
5. Peak End Rule
Peak End Rule states that people judge an experience largely based on how they felt at its peak and at its end, rather than the total sum or average of every moment of the experience.
Links (1): https://iq.opengenus.org/peak-end-rule-in-ux-design/
6. Goal Gradient Effect
Goal Gradient Effect states that people are more motivated to complete a goal the closer they are to finishing it.
Links (1): https://iq.opengenus.org/goal-gradient-effect-in-ux-design/
---
Features
========
1. Media Query
Media Query is a CSS technique that allows content to adapt to different screen sizes and resolutions.
Links (1): https://iq.opengenus.org/media-queries/
2. Pagination
Pagination is a technique to divide the content into multiple pages and display them one by one sequentially.
Links (1): https://iq.opengenus.org/pagination-in-html-css/
3. CSS Gradients
CSS Gradients are used to display smooth transitions between two or more specified colors.
Links (1): https://iq.opengenus.org/gradients-css/
---
Flexbox
=======
1. Flexbox
CSS flexbox is a layout module that provides an efficient way to arrange, align, and distribute space among items in a container.
Links (1): https://iq.opengenus.org/flexbox/
2. Flebox vs Grid
Understanding Flexbox vs Grid is important to know when to use which one.
Links (1): https://iq.opengenus.org/flexbox-vs-grid/
---
Game Projects
=============
1. 2048
2048 is a single-player sliding block puzzle game designed by Italian web developer Gabriele Cirulli.
Links (1): https://iq.opengenus.org/2048-game-using-javascript/
2. Bubble Shooter
Bubble Shooter is a puzzle game where you shoot bubbles of the same color to clear the board.
Links (1): https://iq.opengenus.org/bubble-shooter-game-in-html/
3. Car Racing
Car Racing game is a simple 2D game where you have to dodge the incoming cars.
Links (1): https://iq.opengenus.org/car-racing-game-in-html/
4. Wordle
Wordle is a word game in which the player tries to find words within a set of scrambled letters.
Links (1): https://iq.opengenus.org/wordle-using-html-css-and-js/
5. Whack A Mole
Whack A Mole game is a simple 2D game where you have to hit the mole with a hammer.
Links (1): https://iq.opengenus.org/whack-a-mole-game-using-html-css-js/
6. Bomberman
Bomberman game is a simple 2D game where you have to kill all the enemies using bombs.
Links (1): https://iq.opengenus.org/bomberman-game-in-html-and-javascript/
---
Web Development Projects
========================
1. Playable Piano
Building a Playable Piano is a great way to learn HTML, CSS, and JavaScript.
Links (1): https://iq.opengenus.org/playable-piano-in-html-css-and-javascript/
2. Virtual Keyboard
Step by step process of building a Virtual Keyboard using HTML, CSS, and JavaScript.
Links (1): https://iq.opengenus.org/virtual-keyboard-html/
3. Dynamic Sound Board
Step by step process of building a Dynamic Sound Board using HTML, CSS, and JavaScript.
Links (1): https://iq.opengenus.org/building-dynamic-sound-board-using-html-css-and-javascript/
4. Whiteboard
Whiteboard is a web-based drawing tool that allows you to create and share drawings online.
Links (1): https://iq.opengenus.org/whiteboard-html/
---
CSS Animation
=============
1. Animation
CSS Animation is a technique to change the appearance and behavior of an element gradually to create an animation effect.
Links (1): https://iq.opengenus.org/css-animation/
2. Animated Button
Animated Button is a great way to make your website look more attractive and unique.
Links (1): https://iq.opengenus.org/animated-button-using-html-and-css/
---
Advanced CSS Topics
===================
1. Video Background
Creating Video Background is a great way to make your website look more attractive and unique.
Links (1): https://iq.opengenus.org/web-page-with-video-background/
2. Infinite Scrolling
Infinite Scrolling is a technique to load content continuously as the user scrolls down the page.
Links (1): https://iq.opengenus.org/infinite-scrolling-in-css-html/
3. Modal in CSS
Modal in CSS is a technique to display content in a popup window on top of the current page.
Links (1): https://iq.opengenus.org/modal-using-css-only/
4. Print using CSS
Print using CSS is a technique to print a webpage using CSS only.
Links (1): https://iq.opengenus.org/using-css-to-print-html-webpage/
5. Pseudo classes
CSS has pseudo-classes that allow you to style elements based on information that is not contained in the document tree.
Links (1): https://iq.opengenus.org/css-pseudo-class/
6. Transparency
Learn to use Transparency in CSS to make your website look more attractive and unique.
Links (1): https://iq.opengenus.org/transparency-in-css/
7. SAAS Introduction
SAAS is a CSS preprocessor that allows you to use variables, nested rules, mixins, inline imports, and more.
Links (1): https://iq.opengenus.org/introduction-to-sass/
---
Interview Questions
===================
1. Interview Questions
Prepare these questions to ace your next interview.
Links (1): https://iq.opengenus.org/interview-questions-on-css/
---
Generated by OpenGenus. Updated on 2023-12-28