Create doc about CSS #5

Niko998 · 2018-12-21T11:09:23Z

First version of css file

kvas-damian · 2019-01-04T08:54:12Z

@Niko998
For future, to make sure that your PR isn't forgotten or not noticed make sure you assign reviewers or at least ping @bethinkpl/bit

kvas-damian · 2019-01-04T08:57:55Z

css.md

@@ -0,0 +1,34 @@
+# CSS
+
+**Prerequisite knowledge**: basic html elements, imagination


What do you mean by "imagination"? Is it something you can learn about? Do we plan to create an article about it?

The initial idea was to list only documents that are describing given topic

css.md

kvas-damian · 2019-01-04T09:04:16Z

css.md

+
+### Apprentice aka _Short skillset description, example: "I can branch!", "My First TODO app"_
+	*I know what is a box model, and I know its basic elements (graphical interpretation)
+	*I know how html elements could be displayed (in line, in line block, flex, table)


what about block and none?

css.md

kvas-damian · 2019-01-04T09:08:31Z

css.md

+	*I can modify elements by ID
+	*I know the difference between basic selectors (*, #X and .X)
+### Intermediate aka _..._
+	*I can make website looks like in given template


Are you going to add more content here? If you have troubles with defining questions for more advanced levels please ping @ bethinkpl/bit - we're happy to help.

Co-Authored-By: Niko998 <[email protected]>

css.md

rogatty · 2019-01-09T09:34:56Z

css.md

+
+## Classification / acceptance questions
+
+### Apprentice aka _Short skillset description, example: "I can branch!", "My First TODO app"_


So how would you call a CSS apprentice? This is a placeholder for you to update.

rogatty · 2019-01-09T09:35:47Z

css.md

+## Classification / acceptance questions
+
+### Apprentice aka _Short skillset description, example: "I can branch!", "My First TODO app"_
+	*I know what is a box model, and I know its basic elements (graphical interpretation)


Take a look at https://github.com/bethinkpl/bit-docs/blob/49aadb54c96f7f34eecea5044053df7e89965fa6/css.md, formatting is wrong.

rogatty · 2019-01-09T09:38:23Z

css.md

+### Apprentice aka _Short skillset description, example: "I can branch!", "My First TODO app"_
+	*I know what is a box model, and I know its basic elements (graphical interpretation)
+	*I know how html elements could be displayed (in line, in line block, flex, table)
+	*I know what is the difference between in line, in line block and flex


I would merge it with the previous one.

css.md

rogatty · 2019-01-09T09:46:45Z

css.md

+	*I know how html elements could be displayed (in line, in line block, flex, table)
+	*I know what is the difference between in line, in line block and flex
+	*I know whats are classes
+	*I know how inheritance works


Do you mean cascading?

rogatty · 2019-01-09T09:47:27Z

css.md

+	*I know how inheritance works
+	*I can change colors and fonts of text
+	*I can use padding, margin, and border attributes
+	*I can modify elements by ID


Modify or apply styles? If the latter, then I'd merge it with the one about classes.

I would create a more general point about writing css selectors and there you can define different selectors:

by tag name

by class

by id
and more complex like:

by siblings

by attributes

I would mention somewhere the specifity of selectors (https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

rogatty · 2019-01-09T09:48:50Z

css.md

+	*I can modify elements by ID
+	*I know the difference between basic selectors (*, #X and .X)
+### Intermediate aka _..._
+	*I can make website looks like in given template


I think this is too broad. There are templates that you'll have to be a CSS master to apply.

css.md

bognix · 2019-01-09T10:37:52Z

css.md

+
+## Intro
+CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of document written in a markup language (like HTML).
+	CSS can improve content accessibility and readability by affecting layout, colors and fonts. Also  provide more flexibility and control in the specification of presentation characteristics.


the second sentence lacks subject.

bognix · 2019-01-09T10:43:28Z

css.md

+	*I can modify elements by ID
+	*I know the difference between basic selectors (*, #X and .X)
+### Intermediate aka _..._
+	*I can make website looks like in given template


I this point I would mention stacking context. It's important knowledge and it's a bit more complex than adding colors and changing fonts - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Another thing you can mention is browser support, just to let the reader know it's important to check the browser support and different browser quirks when adding styles.

Co-Authored-By: Niko998 <[email protected]>

kvas-damian · 2019-01-11T12:35:03Z

html.md

+ **Prerequisite knowledge**: JS apprentice level
+	* I know how to implent drag/drop feature
+	* I know how to use web storage
+	* I know how to use web workers


IMO these points are related to JS - not HTML

kvas-damian · 2019-01-11T12:35:46Z

html.md

+	* I can customize <meta> tag
+	* I can use advantages of HTML5
+	* I can attach video, audio or youtube links to my website
+### Advanced 


In this point, you can mention about blocking and non-block assets loading methods.

kvas-damian · 2019-01-11T12:38:32Z

html.md

+	* I can customize <meta> tag
+	* I can use advantages of HTML5
+	* I can attach video, audio or youtube links to my website
+### Advanced 


Maybe it's also a place to mention about dataURI as a method for performance improvement

kvas-damian · 2019-01-11T12:40:37Z

html.md

+	* I can customize <meta> tag
+	* I can use advantages of HTML5
+	* I can attach video, audio or youtube links to my website
+### Advanced 


You can add an info form validation rules introduced in HTML5

kvas-damian · 2019-01-11T12:40:58Z

html.md

+	* I know how to use web storage
+	* I know how to use web workers
+
+### Master 


Let's point contenteditable here

kvas-damian · 2019-01-11T12:41:44Z

html.md

+	* I can customize <meta> tag
+	* I can use advantages of HTML5
+	* I can attach video, audio or youtube links to my website
+### Advanced 


what do you think about adding svg element here?

kvas-damian · 2019-01-11T12:42:21Z

html.md

+	* I know how to use web storage
+	* I know how to use web workers
+
+### Master 


srcset is a nice feature for optimization supported by HTML5

Co-Authored-By: Niko998 <[email protected]>

Niko998 and others added 2 commits December 21, 2018 12:08

css

e260133

Update css.md

56ac1a6

kvas-damian reviewed Jan 4, 2019

View reviewed changes

kvas-damian suggested changes Jan 4, 2019

View reviewed changes

kvas-damian requested review from bognix, gitkuba and rogatty January 4, 2019 09:09

kvas-damian and others added 5 commits January 5, 2019 16:07

Update css.md

311c973

Co-Authored-By: Niko998 <[email protected]>

Update css.md

a39b518

Co-Authored-By: Niko998 <[email protected]>

Update css.md

4b7ebca

Co-Authored-By: Niko998 <[email protected]>

Update css.md

c2f85be

Co-Authored-By: Niko998 <[email protected]>

Update css.md

49aadb5

rogatty reviewed Jan 9, 2019

View reviewed changes

css.md Outdated Show resolved Hide resolved

rogatty reviewed Jan 9, 2019

View reviewed changes

css.md Outdated Show resolved Hide resolved

rogatty reviewed Jan 9, 2019

View reviewed changes

rogatty changed the title ~~css~~ Create doc about CSS Jan 9, 2019

bognix reviewed Jan 9, 2019

View reviewed changes

css.md Outdated Show resolved Hide resolved

bognix reviewed Jan 9, 2019

View reviewed changes

rogatty and others added 3 commits January 9, 2019 14:35

Update css.md

57e4197

Co-Authored-By: Niko998 <[email protected]>

Update css.md

da9b2d1

Co-Authored-By: Niko998 <[email protected]>

css fixes and html added

4411007

kvas-damian reviewed Jan 11, 2019

View reviewed changes

html.md

* I know how to use web storage

* I know how to use web workers

### Master

Copy link

Contributor

kvas-damian Jan 11, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's point contenteditable here

kvas-damian reviewed Jan 11, 2019

View reviewed changes

rogatty added the changes requested label Jan 23, 2019

Apply suggestions from code review

e35bce5

Co-Authored-By: Niko998 <[email protected]>

gitkuba removed their request for review March 7, 2019 11:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create doc about CSS #5

Create doc about CSS #5

Niko998 commented Dec 21, 2018

kvas-damian commented Jan 4, 2019

kvas-damian Jan 4, 2019

kvas-damian Jan 4, 2019

kvas-damian Jan 4, 2019

rogatty Jan 9, 2019

rogatty Jan 9, 2019

rogatty Jan 9, 2019

rogatty Jan 9, 2019

rogatty Jan 9, 2019

bognix Jan 9, 2019

rogatty Jan 9, 2019

bognix Jan 9, 2019

bognix Jan 9, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

kvas-damian Jan 11, 2019

		@@ -0,0 +1,34 @@
		# CSS

		Prerequisite knowledge: basic html elements, imagination


		## Classification / acceptance questions

		### Apprentice aka _Short skillset description, example: "I can branch!", "My First TODO app"_

Create doc about CSS #5

Are you sure you want to change the base?

Create doc about CSS #5

Conversation

Niko998 commented Dec 21, 2018

kvas-damian commented Jan 4, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment