HTML/CSS Tutorial Notes: DesignCourse 2021

von | Jun 12, 2022 | #100DaysOfCode, Progammieren, Web Development | 0 Kommentare

HTML/CSS basics

  1. write HTML structure, based on user interface (UI) of desktop version (because it includes all elements – usually more than in mobile version)
  2. write CSS design
    1. start with mobile design, because has less elements which need design
    2. (adjust) design of desktop version

HTML

  • have a template/mockup which guides you (e.g. from Adobe XD)
    • start with the desktop version
    • start from top to bottom
  • first write HMTL, then CSS afterwards
  • think of website elements as blocks
  • ❗choose HTML structure (elements, classes and id’s) wisely!
    • may prevent lot’s of headaches when coming to the CSS design part
    • smart HTML structure probably huge part of the work in designing website

Emmet abbreviation (VSCode)

  • shortcuts for certain, language specific expressions
  • e.g. helps to get boilderplate HTML by typing !, then
    -key to autocomplete
  • e.g. html-tag.classname , then
    -key to autocomplete –> <html-tag class="classname"></html-tag>

div tag

  • used very often to create containers
  • emmet abbreviation to create div tag with certain class: .classname, then
    -key to autocomplete to <div class="classname"></div>

classes

  • class can be used as selector to style respective HTML element with CSS (later; after being done with the HTML part)
  • can be used on multiple elements (several times in one document)
  • every HTML element can have multiple classes

id’s

  • unique selector (may be used by JavaScript)
  • can only be used once in one HTML document
  • every HTML element can only have one id

HTML Forms

  • <label for="name"> is used to bound label element to the (input) element with the respective id="name" (e.g. <input type="text" id="name" name="name">)
    • name attribute of input element is used to comunicate input to server
  • type attribute is used to define the kind of field – hence the look and functionality (along with the respective form validation)
    • validation makes assures that only valid inputs can be used (e.g. only strings with email format for email attribute or texts but not files for file attribute)
  • placeholder attribute inside <input> element or <textarea> element used to create example text inside respective field
  • valueattribute of input element defines text on button (<input type="submit" class="send-message-cta" value="Send message">)

CSS

  • design mobile page first!
    • because it’s simpler (less elements (less effort) and mobile widely used)
    • mobile CSS smaller in size
  • use media queries to define other screen sizes

CSS Syntax (rule set)

  • selector
    • name of HTML element, class or id
    • can be seperated with commas (e.g. body, nav {...})
  • declaration block
    • declarations
      • property
      • value

margin, padding, border

  • padding effects everything inside the element
  • border in between
  • margin effects everything outside the element

CSS Units

  • different types
  • specified on css property values
  • relative (e.g. em) and absolute (e.g. px) values
    • em: relative to font-size

:root pseudo-class

  • selector which represents <html> element explicitly
  • used to declare global CSS variables
    • variables may be used in multiple areas
      • beneficial to apply corporate design seemlessly
      • change in :root selector changes variable in the whole CSS document

display property

  • way to structure layouts
  • value flex: short for flexbox
  • value grid

background-size property

  • sets size of background image
    • options: natural, stretched, fit space
  • if set background-color property visible behind transparent background image and in non-filled spaces
  • keyword value contain: scales image as large as possible without cropping/stretching
  • keyword value cover: scales while preserving image ratio, leaving no empty space, eventually cropping image if image proportions differ from background

:before -> create pseudo-element

  • often used to add cosmetic content with content property
  • used as suffix for css selectors
  • can be nested inside CSS declarations using sass with &:before

background property

  • shorthand property to set all background properties at once
    • e.g. color, origin, size, repeat method

box-sizing property

  • value content-box (default): set box size based on inner size
    • padding and margin added to specified size (width and heigh)
    • final size: inner box size plus padding and margin
  • value border-box: set box size based on complete element (including padding and margin)
    • padding and margin included in specified size
    • used to fit respective box inside another element or viewport

cursor property

  • value pointer results in „clicking hand“ on hover over element
  • further values used to inform users about possible actions in that area of the screen respectively options for interations with specific element (drag, zoom, don’t click, loading, …)

display property

  • sets whether element viewed as inline or block (outer)
  • sets layout (flow layout, grid, flex) for children (inner)
  • for <a href="..."> elements need to set display: block if want to style with padding, margin, etc.

Mobile Responsiveness

@media selector

  • specify CSS declaration block, which gets applied to document under defined condition
  • basic approach for mobile responsibility: @media only screen and (min-width: 768px)

grid-template-columns property

repeat CSS function

  • display columns or rows with a certain recurring pattern

minmax CSS function

  • define size range
    • at least min
    • at max max😅

Sass (SCSS)

  • superpowers to do things, which are not possible with CSS
  • nest rule sets

JavaScript

  • can be added inside HTML document
    • usually at end of <body>...</body>
    • can manipulate CSS declarations or change other parts of the environment
      • based on certain events in browser window

JavaScript to manipulate CSS

  1. define variables to address certain HTML elements in document
  2. define functions to describe (re)action on certain browser event

addEventListener

… that’s rughly the point where I stopped taking notes…

Thoughts🤔

probably important skills for HTML/CSS

  • structure HTML in a way that simplifies CSS design
    • if HTML structured anticipatory: CSS design easier👌
  • solid understanding of positioning

choose HTML structure (elements, classes and id’s) wisely❗

  • may prevent lot’s of headaches when coming to the CSS design part
  • smart HTML structure probably huge part of the work in designing website

Sources

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert