Month: November 2022

• &#39 = Single straight apostrophe
• ‘ = Single curly left apostrophe
• ’ = Single curly right apostrophe
• " = Double quotation
• © = Copyright
• — = Em dash
• ( = Opening bracket (
• ) = Closing bracket )

References:

https://www.w3schools.com/html/html_entities.asp

https://www.thoughtco.com/html-code-for-common-symbols-and-signs-2654021

Class 8: What I Learned This Week…

CSS Layout:

Content first and start with the most important that you want your viewers to see at the top before scrolling to less important content. For example with newspapers, they know that it will get folded in half horizontally so the most important piece of news needs to be at the top to grab the viewers attention. Similarly with web pages, you want to make the top part of your page that is visible, interesting enough for viewers to want to keep scrolling.

User’s eyes always start top left because we read from left to right, so important content, such as a form on a holiday booking website, should be located there.

We have now moved away from websites that actually look like a desktop version, they are starting to look more like they do on mobile, such as the search bar centred at the top.

Five Types of Page Layouts:

• Fixed-width layouts – Absolute pixel dimensions for width
• Fluid layouts – Elements given percentage dimensions
• Elastic layouts – Elements using ems to accommodate changing text size
• Hybrid layouts – Using combinations of above
• Responsive layouts – Combination of fluid and media queries

Grid Layout

Area:

Grid-area: 1/1/2/3;

Columns/Rows:

Grid-column: 1;

Grid-row: 2;

Named Areas:

Main { grid-area: main; }

Fluid Layouts

• Percentages instead of pixels
• Fractional layouts usually used for grid layouts: Display: grid; Grid-template-columns: 2fr 1fr;

Class 7: What I Learned This Week…

HTML & CSS Feedback

• It’s a good idea to not use margin in the body section as we can place it with main instead
• Floats can’t be contained as they cause the collapsing parent problem. This can be fixed by using ‘flow-root’ on the parent element
• You can use ‘p:first-of-type:first-letter’ in CSS instead of having to use the span tag in HTML
• You can use ctrl + scroll to test different screen sizes by zooming in/out to see how your work looks
• You can’t use vw/vh as image sizes in html
• Span is an inline element, div is a block element
• It is a good idea to use the line height in the body section, you can alter it for other elements specifically in different selectors so that it can be overridden

Lean Code

It is more considerate to others if you are working in a team, such as a job environment, to keep things in order with commented out notes and simple/no unnecessary code. This is also more sustainable as it uses less energy to load the webpage, less data transferred and less data on people’s computers. Using lean code is more accessible because it makes it easier for assistive technologies to interpret. The nav element acts a div but better as it has semantic meaning as well, therefore it is redundant adding an extra div when the nav already acts as a container.

Advanced CSS Selectors

• Use aria label <nav aria-label=”primary”> if you have more than one navigation section
• nav a:nth-of-type(2) means to select the 2^nd anchor element inside of the nav
• If list is unordered, a[href=”toffee.html”] this is an attribute selector
• nav[aria-label=”primary”]
• Combinator selector is defined by relationship with sibling elements
• Child combinator which selects paragraphs that are direct children of = main>p
• General sibling selector is any paragraph which follows the h2 = h2~p
• Adjacent sibling combinator selects any paragraph directly after h2+p
• Child and adjacent combinator, all paragraphs that are direct children of main following h2 = main>h2+p
• Action pseudo classes = p:first-child selects a paragraph if it happens to be a first child
• Tree-structural pseudo-classes ‘p:last-child’ means all paragraphs that are last children
• p:nth-child(3) selects the 3^rd child of any container, main p:nth-child(3) means the 3^rd child of main
• p:nth-child(odd) are all paragraphs that are odd children. p:nth-child(even) are all paragraphs that are even children
• p:nth-of-type(3) is a tree-structural pseudo-class. Selects not the 3^rd child, but the 3^rd paragraph
• p:nth-of-type(odd/even)
• main p:first/last-of-type selects first or last paragraph in main

Attribute Selectors

• a[href^=”https”] is an <a> element where the href attribute value starts with the string “https”. This is a neat way of selecting all external links
• main :not(p) selects everything in main that is not a paragraph. Applies to direct children only
• :has(p) are all elements containing paragraphs that are direct children (this is not ready for production sites yet)
• h1:has(+h2) selects h1 that is immediately followed by h2. Both are only supported on Chrome so far and again are not ready for production sites