A pot-pourri of stuff I learned in week 5 at the Devslopes Academy Web program
Thursday, June 03, 2021
Devslopes Academy Week 5 Assignment: Publish an article on Medium.
Article about “something I learned this week”.
A pot-pourri of stuff I learned in week 5 at the Devslopes Academy Web program
As I’m completing the week 5 lessons of Devslopes Web program, and subsequently from learning on my own by searching and researching here and there a variety of solutions to help me solved the numerous problems I encountered during the SaaS project, I came up with a list of tidbits of information/reminders that could be useful to the reader who is just starting to learn CSS in particular, and a little bit in Javascript too.
And in no particular order, here they are…
1) CSS variables have a scope; ex.
div {
— font-color-base: red; => variable only available to a div tag
}
root pseudo class
:root {
— font-color-base: red; => all the css variables are available globally
}
2) When we place an element with position: absolute, we use, for example, top: 50%, left: 50% to center it. But the centering is done at coordinates (0, 0) of that element. We need to transform: translate (-50%, -50%) so the center of the element (not the top left corner) is centered.
3) A gt (greater than) character is used to target only 1 level deep.
Ex. div > ul {…}
4) To put an element partly below its container, we use a negative margin.
Ex. margin-bottom: -100px;
And it’s a good idea to add a z-index to it.
5) background-position: x% y%
horizontal vertical
top left is 0% 0%
bottom right is 100% 100%
6) In a background-image, if the container has no content, we don’t see the image, but if we add padding to it, we see the image.
7) background-size: cover; => covers the entire container.
Scales the image as large as possible to fill the container, stretching the image if necessary.
8) What containers that cannot contain other containers? A self closing tag.
Examples: <img/>, <br/>, <hr/>…
9) Html Unicode for checkmark: ✓, for times(X): ⨉.
10) Using .element.large, refers to an element with both classes;
.element .large, being separated by a space, implies two elements with a descendant relationship.
11) align-items: flex-start; means that the item will take the height of its content.
12) fontawesome icons are put in a container, usually <i></i> (empty) so we could put a width on that container, of the largest icon, so all the other icons will take the same space.
13) A <li> can be put as a display: inline-block; so they will align themselves horizontally.
14) ids are camel cased.
15) If we want to add a background gradient, we use background-image, not background-color. But it’s always a good practice to have a fall back background-color.
16) To have a scroll effect instead of a jump effect: html {scroll-behaviour: smooth;}
17) user-select: none; to specify that the text cannot be selected.
18) When we design mobile first, we implement first a single-column layout then implement a multi-columns layout.
19) We should never set text size using viewport alone as we cannot zoom text.
20) Always include this line:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
21) Mobile browsers tend to lie about their viewport width.
22) Common break point for iPads and tablets is 768px.
23) @media screen and (max-width: 350px) {…}
We add the word “screen” so it doesn’t print 350px but desktop view.
24) In CSS, the tilde symbol is known as subsequent sibling combinator.
25) We need javascript to toggle viewing/not viewing nav menus.
26) pointer-events: none; so we can click through an element.
27) Mobile average width: 375px.
28) When we work with media queries and max-width, we put the highest max-width on top and the lowest on the bottom.
29) To prevent an image from re-sizing when re-sizing the browser, we use min-width. We have to also use width so the image doesn’t become too big (width: 100%).
30) U+25BC, black down-pointing triangle.
31) With anchor tags, using #! instead of just # prevents the browser from scrolling to the top.
32) You do realize that css variables are not supported in IE, right?
33) position: static
The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
And that’s all for now. Thank you for your time.
Michel Milmore
