Inhaltsverzeichnis
HTML/CSS basics
- write HTML structure, based on user interface (UI) of desktop version (because it includes all elements – usually more than in mobile version)
- write CSS design
- start with mobile design, because has less elements which need design
- (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 respectiveid="name"
(e.g.<input type="text" id="name" name="name">
)name
attribute ofinput
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 forfile
attribute)
- validation makes assures that only valid inputs can be used (e.g. only strings with email format for
placeholder
attribute inside<input>
element or<textarea>
element used to create example text inside respective fieldvalue
attribute ofinput
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
- declarations
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
- variables may be used in multiple areas
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 setdisplay: block
if want to style with padding, margin, etc.
Mobile Responsiveness
- common breakpoints 768px, 1080px
- containers on website should probably never exceed 1080px
- consider increasing padding between sections from 1080px
@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
- defines how much space colums in the respective element take up
- usage with repeat function possible
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
- usually at end of
JavaScript to manipulate CSS
- define variables to address certain HTML elements in document
- define functions to describe (re)action on certain browser event
addEventListener
- function that reacts to certain action and reaction in the browser
- reacts with defined
listener
reaction iftype
action is executed
- reacts with defined
- in Tutorial: implement Event listener with arrow function
… 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
- HTML and CSS Tutorial for 2021 – COMPLETE Crash Course!
- also helpful hints about short cuts and ways to work
Neueste Kommentare