Post

Frontend

Posted
By komidawi
13 min read
Frontend

Table of Contents

Frontend

VSCode

  1. Prettier
  2. Live Server
  3. Auto Rename Tag
  4. Color Highlight

HTML

Theory

  1. HTML markup goal is to provide semantic information about content (not presentational).
    It should be used to define structure of document and leave appearance for CSS.
    1. Pseudo-obsolete elements as <b> and <i> are examples of this case.
      • They started as bold and italics, but in HTML5 to create separation between structure and presentation <strong> and <em> was introduced.
    2. <div> Elements don’t change Semantic structure - they are helpful in organizing Presentational structure
  2. HTML merges all whitespaces into a single space.
    1. Also don’t abuse <br/> tag.
      • Remember - HTML is for semantic information, not for positioning elements. Don’t use it for adding multiple empty lines between paragraphs.
    2. Similar case is for <hr/> - don’t use it for displaying line.
      • <hr/> element - think of it as something of importance between new paragraph and new heading.
      • For displaying a line use CSS border property instead.
  3. Attributes
    1. In <a href="...">...</a>
      • href is an Attribute
    2. Attributes provide additional information about elements
    3. Attributes are always specified in the start tag
    4. Attributes usually come in name/value pairs like: name=”value”
  4. Block vs Inline
    1. Block-level Element (flow content)
      • Block Element appears below previous Block Element.
      • Width is set automatically based on width of Parent Container
      • Height is by default height of child Block Boxes it contains
    2. Inline Element (phrasing content)
      • Inline Elements can affect sections of text anywhere within a line
      • Inline Elements don’t affect vertical spacing
        • Top and Bottom Margins are ignored
        • If you add some enormous Padding, it will overlap other Elements, but it won’t affect vertical spacing
        • You need to use Block Elements to modify vertical spacing
      • Width is based on content it contains
        (not Width of Parent Element)
  5. Links
    1. Absolute Links
      1. Example
        1. https://developer.mozilla.org/en-us/docs/web/html
      2. Build
        1. Scheme
          1. https://
        2. Domain
          1. developer.mozilla.org
        3. Path
          1. /en-us/docs/web/html
    2. Relative links
      1. Relative links point relatively as you were in terminal.
        Scheme and domain name are implied to be the same as the current page, so you only supply the path.
        1. misc/extras.html
        2. ../images.html
    3. Root-Relative Links
      1. /index.html
  6. Don’t use spaces in URLs
    1. They require special handling, they should be avoided at all costs.
    2. Instead of space use hyphen
    3. Also it’s good idea to use all lowercase characters for consistency
  7. Images
    1. Image content is defined outside of the web page that renders it
      (unlike all the HTML elements we’ve encountered so far)
    2. It is better to handle image size in CSS instead of using attributes width and height (to be able to alter them using media queries)
    3. Adding alt attribute to images is best practice.
      1. This has impact on search engines and users with text-only browsers
  8. Image types
    1. JPEG
      1. Used to handle large color palettes without significant increase in file size.
      2. Use for photos and images with gradients
    2. GIF
      1. Limited in color palette
      2. Transparent pixels are binary - no semi-opaque pixels
    3. PNG
      1. Use for anything that is not photo nor animation
      2. No color palette limitations
      3. Use for things like icons, tech diagrams, logos, etc.
    4. SVG
      1. Vector-based graphics - can be scaled infinitely without quality loss
      2. Therefore great tool for responsive design
      3. If possible, use it everywhere where you would use PNG
      4. Text in image can increase file size
  9. Another important HTML Attributes
    1. Document language
      1. <html lang='en'>
    2. Encoding
      1. <meta charset='UTF-8'>
  10. HTML Entity
    1. HTML Entity is a special character that can’t be represented as plain text in HTML Document.
    2. Starts with ampersand & and ends with semicolon ;.
    3. Before UTF-8 HTML Entities were more useful because HTML wasn’t allowed to have special characters Therefore nowadays HTML Entities are used mainly for Reserved Characters.
  11. Reserved Characters
    1. Reserved Characters are: <, >, &
    2. For using Reserved Characters you have to use HTML Entities
      1. &lt; &gt; &amp;
    3. Quotes are another example of HTML Entities
      1. "" '' -> &ldquo; &rdquo; &lsquo; &rsquo;
    4. HTML Entities list can be found at: https://html.spec.whatwg.org/multipage/named-characters.html
  12. Empty Element
    1. Empty Element is element which doesn’t have closing tag,
      1. e.g. <link /> or <br />

Relevant tags

  1. <header>
    • Introductory content, typically a group of introductory or navigational aids. It may contain some heading elements or others like a logo, a search form, an author name.
  2. <main>
    • Dominant content of the <body> of a document. The main content area consists of content that is directly related to (or expands upon) the central topic of a document (or the central functionality of an application).
    1. <aside>
      • Portion of a document whose content is only indirectly related to the document’s main content. Asides are frequently presented as sidebars or call-out boxes.
    2. <section>
      • Generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
  3. <a>
    1. target="_blank"
      • Opens the linked document in a new window or tab

CSS

  1. CSS rules
    1. Selector
      1. e.g. p
    2. Declarations,
      1. e.g. color: #FF0000;,
      2. where in this example:
        1. Property is color
        2. Value is #FF0000
  2. To use CSS in webpage link it with <link>:
    1. <link rel='stylesheet' href='styles.css'/>
    2. Other options to be used with <link>:
      https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
  3. Units of Measurement
    1. Most common:
      1. px
      2. em
    2. em is used to define sizes relative to some base font, e.g.:
      1. body { font-size: 16px; }
      2. h1 { font-size: 2 em; }
      3. h2 { font-size: 1.6em; }
      4. Here base size is 16px, and h1 are 2x in size and h2 are 1.6x in size
      5. Therefore when we change base font size, these heading will scale accordingly
    3. Other Units of Measurement:
      https://developer.mozilla.org/en-US/docs/Web/CSS/length
  4. Multiple Elements in Selector
    1. h1 h2 h3 h4 h5 h6 { font-family: "Helvetica", "Arial", sans-serif; }
      1. Here font-family values are more historical, as before users may not have some fonts installed, so the right-sided values are fallbacks
      2. Currently we have Web Fonts superseding System Fonts that resolves this problem
  5. Cascade order
    1. The browser’s default stylesheet
    2. User-defined stylesheets
    3. External stylesheets
    4. Page-specific styles
      1. CSS defined in <style> Element
      2. In general, don’t use Page-specific styles. Use External stylesheets instead.
    5. Inline styles
      1. Override everything
      2. Example: <p style='color: #990000;'>
      3. Don’t do this..
      4. To apply style to only one type of Element use CSS Classes
  6. Overall CSS Reference
    1. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
  7. Box Model
    1. Box Model is set of rules which define way how to render a web page.
      Every Element is treated by CSS as a Box with particular properties determining its location on the page.
    2. Properties
      1. Content
        1. Text, image or other content
      2. Padding
        1. Space between Content and Border
        2. Has Background
        3. Included in click area
        4. Doesn’t collapse vertically
      3. Border
        1. Line between Padding and Margin
        2. Everything inside Border have a Background
        3. border: size style color
          1. border: 1px solid #5D6063;
      4. Margin
        1. Space between Box and surrounding Boxes
        2. Transparent - no Background
        3. Not included in click area
        4. Collapses vertically
  8. Shorthands
    1. property: vertical horizontal
      1. padding: 20px 10px;
    2. property: top right bottom left
      1. padding: 20px 0 20px 10px;
  9. Vertical Margin Collapse
    1. When two boxes with vertical Margins are next to each other - Vertical Margin Collapse will happen.
      1. Instead of Margins being added, they actually collapse (smaller Margin collapses into bigger Margin)
      2. You can then think about Vertical Margins as “minimum space” between other Elements
    2. Vertical Margin Collapse happens only for consecutive Elements
      1. You can prevent it by inserting e.g. a <div> with non-zero height between <p>s with Vertical Margins
    3. Some other workarounds may be:
      1. Use Padding which does not Collapse
      2. Use only bottom-only or top-only Margins, so they won’t overlap
    4. Generally nowadays this is no longer an issue as e.g. Flexbox doesn’t have collapsing Margins
  10. Width and Height
    1. width and height define only content size
    2. Padding and Border are added on top of these dimensions
    3. It is because by default box-sizing is set to content-box
    4. 🔨 In general, it’s a good practice, that you set box-sizing: border box
      1. Then the whole box will be of desired dimensions and content width will be set automatically
  11. Center Box with auto-margin (without Float nor Flexbox)
    1. Set left and right Margin of block-level Element to auto to center it within Parent
      • One thing - it works only if you set Element width - otherwise it will nevertheless take all the space of Parent making this centering operation meaningless
  12. Resetting Styles
    1. Every browser can perform some styling on its own
      1. Therefore making web pages look consistently everywhere a hard job
    2. It is a good practice to add “universal” CSS Selector * matching every HTML Element
    3. The minimum recommended settings are
      1. margin: 0
      2. padding: 0
      3. box-sizing: border box
  13. Selectors
    1. Type Selectors
      1. p, body, div
    2. Class Selectors
      1. Add class='myclass' Attribute to HTML Element
      2. Use . in Selector
        1. e.g. .synopsis, .myclass
      3. You can add multiple classes to HTML Element
        1. <div class='button cancel'>
        2. Order of classes in CSS File - matters
        3. Order in HTML Attribute - doesn’t matter
          1. class='button cancel' = class='cancel button'
      4. Naming convention
        1. Use all lowercase and hyphens for spaces
        2. Try not to name classes according to appearance (e.g. .italic), use semantic names instead (like .synopsis)
      5. In general Class Selectors have reasonable compromise between versatility and their drawbacks, so you should mostly use them
    3. ID Selectors
      1. Use # in Selector
        • e.g. #main-button
      2. There can be only one element with a given ID on the page
      3. ID Selectors also are target for URL Fragments
        • It’s the #something at the end of URL
  14. Descendant Selectors
    1. Used to style Elements being inside other Element
    2. e.g. .synopsis strong, h2 span
    3. In overall don’t overuse Descendant Selectors as it may lead to Specificity Nightmare
  15. Descendant Selectors: Child Selector >
    1. Matches only direct child
    2. e.g. div > span
    3. More info:
      https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
  16. Pseudo-Classes
    1. Common Pseudo-Classes for links
      1. :link - link not visited
      2. :visited - link visited
      3. :hover - mouse hover
      4. :active - mouse button pressed
    2. You can combine Pseudo-Classes
      1. a:visited:hover - hovering on already visited link
    3. Pseudo-Classes for Structure
      1. :first-of-type, :last-of-type
        1. e.g. last paragraph would be p:last-of-type
        2. (!) The first/last Element is selected in every container
          1. If you need to select Element only in a one container, then you may need to use Child Selector
            • .page > p:first-of-type
    4. More Pseudo-Classes
      1. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  17. CSS specificity
    1. Defines weight for categories of Selectors
      1. Therefore some Selectors will override other Selectors no matter of their order in CSS file
    2. Specificity
      1. !important - 10 000
      2. Inline Style - 1 000
      3. ID - 100
      4. Class, Pseudo-Class, Attribute Selector - 10
      5. Element, Pseudo-Element - 1
  18. Floats (float)
    1. Used to horizontally position Element
    2. But additionally it also makes surrounding Elements flow around
    3. Floated Elements don’t count into container height
    4. (PS: Remember that for centering Block Element you use margin: 0 auto;)
  19. Clearing Floats
    1. Theory
      1. It’s a way to tell browser to account height of floated Elements into the container
      2. You can see if floats are calculated by setting a background color to the container
    2. Practice
      1. clear
        1. clear: both
          1. (both means: left and right)
        2. Makes Block Element ignore floats before it
          1. So it appears after (below) them
          2. (As by default it would be added just after preceding floated Elements)
        3. It works only for Elements inside a container
        4. Use it when you have some unfloated Element at the bottom of container
      2. overflow
        1. Add overflow: hidden to container to make it account height of floated Elements
        2. Use it mostly in all cases
          (apart from having single unfloated Element at the bottom of container, when you use clear)
  20. Percentage Values
    1. Relative to the width of the Parent Element
  21. Flexbox (Flexible Box)
    1. display: flex enables Flexbox
    2. justify-content - horizontal alignment
      1. flex-start
      2. center
      3. flex-end
      4. space-around
      5. space-between
    3. align-items - vertical alignment (cross-axis alignment)
      1. flex-start
      2. center
      3. flex-end
      4. stretch
      5. baseline
    4. flex-wrap - wrap Elements
      1. wrap
      2. nowrap
    5. flex-direction
      1. row
      2. column
        1. flex-direction: column “swaps” justify-content and align-items directions, so now justification happens vertically and alignment horizontally
      3. row-reverse / column-reverse - reverses order of Elements
        1. (But beware not to mix content with presentation)
    6. order
      1. Sets order of an Element
      2. E.g. for swapping first and last items
        1. .first { order: 1 }
        2. .last { order: -1 }
    7. align-self
      1. Sets alignment for particular item (and overrides container setting)
      2. Available values are the same as for align-items
    8. flex
      1. Used to set/distribute width of the Elements themselves
        (whilejustify-content handles spaces between Elements)
      2. To set weight, type a number like flex: 1 or flex: 2
      3. flex: initial - use to set original weight
    9. Auto margins
      1. Auto margin consumes all extra space in a flex container
      2. You can use it to spread elements
        1. margin-left: auto - set it on right Element to move it with other right Elements to the right and all left Elements to the left
  22. Advanced Positioning
    1. Positioned Elements
      1. Elements which are not static
        (So they are relative / absolute / fixed)
    2. Relative Positioning (relative)
      1. Place boxes relative to their standard position
      2. Use e.g. top, left and/or bottom, right to set relative position coordinates
    3. Absolute Positioning (absolute)
      1. Offset is calculated relative to browser window
      2. “Removes” Element from Container - it isn’t accounted anymore
    4. “Relative” Absolute Positioning
      1. Absolute is relative to the first Positioned Container
        1. It goes relative to the browser window only if there are no Positioned Containers up a tree
      2. To make Absolute be “Relative” Absolute, make given Container position: relative
    5. Fixed Positioning (fixed)
      1. Fixed Elements don’t scroll
      2. Element is “Removed” from Container - it isn’t accounted anymore (like in Absolute)
      3. Coordinates are relative to the browser window (like in Absolute)
      4. You can use it to create Headers / Navigation Bars
        (or unfortunately annoying pop-ups that scroll along with page)
    6. Animations
      1. Advanced Positioning is helpful for animations, as it doesn’t interfere with other Elements on the page
  23. z-index
    1. Negative index moves Elements further
      Positive index moves Elements closer
    2. Only Positioned Elements respect z-index
      You have to set position property to make it work
  24. Responsive Design
    1. https://web.dev/learn/design/?hl=en
    2. Your website should work the same both in mobile, PC and tablet version
    3. Two concepts
      1. Fluid Layout - adapts to screen size (stretches & shrinks)
      2. Fixed-width Layout - static width regardless of screen size
    4. CSS Media Queries are building block of Responsive Design
      1. They allow to apply different CSS styles for the same HTML depending on conditions
        (another example of separating Content and Presentation)
      2. Syntax is
        1. <at-rule> <media type> and <media feature> { ... }
        2. @media only screen and (max-width: 400px) { background-color: red; }
      3. min-width, max-width are called Breakpoints
    5. 📝 Start your design from mobile layout and afterwards handle desktop one
      1. Desktop layouts are more complex, so it’s better to enhance mobile layout than trying to simplify desktop one
  25. Practices
    1. Use <li> for Navigation Menus
  1. Some Properties
    1. white-space how white space inside an element is handled
      1. e.g. nowrap, break-spaces
    2. overflow - when content can’t fit in Element’s padding box (overflows) in the horizontal and/or vertical direction
      1. e.g. hidden, scroll

Model

On the left side there’s a definition and on the right side an example of it:

Value: 20px

Property: font-size

Declaration (Style): font-size: 20px

Declaration block:

1
2
3
4
5
6
7
8

 {
    color: blue
;
    text-align: center
;
    font-size: 20px
;
}

Selector: h1

CSS Rule:

1
2
3
4
5

h1 {
    color: blue;
    text-align: center;
    font-size: 20px;
}

Box model

Box model consists of 4 elements.

  1. content
  2. padding
  3. border
  4. margin

Box Model

Sources

Interneting Is Hard
Friendly web development tutorials for complete beginners https://internetingishard.netlify.app/

frontend
frontend html css