Commit 5464e298 authored by Raquel's avatar Raquel 💬

week3/day1

parent a5c5f6d1
<!DOCTYPE html> <!-- just to say we want to use html site -->
<html lang="en">
<!-- defines main language of website -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- width device width is to make usre that it adapts to mobile/different screen sizes -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- to link the CSS file - we use link tag in the head -->
<title>Document</title> <!-- tittle of tab -->
</head>
<body>
</body>
</html>
<!-- head is for server and crawlers ; has meta data, SEO etc -->
<!-- search engines do not understand semantics so we need to use good practices, so that things are read as , e.g. if they see a button class (CSS) crawlers from search engines and disbaled user tools (screen readers) will know that is a "button", if button is made with div they will not know -->
<!-- div - main use for the is to split things; one interview question was to write a button, so thye see if you use a class (which you should) -->
<!-- p - is paragraph -->
<!-- span - different than div, bc it tkaes only the space it needs, can also be used to apply styles to specific words in a text -->
<!-- CSS RESET - copy paste it to my website to reset any browser specific styles -->
<!-- shoudl only have 2 types of clickable elements in website: anchor link (rediects to new page); and button -->
<!-- aside tag to put nav menus on the side of the page -->
<!-- hr - thematic break-->
<!-- form tag to submit information always need to wrap i tin this tag -->
<!-- google chrome - got to inspect element -- AUDIT -- gives us pointers to improve website -->
<!--CSS -->
<!--to add style we can add in a file in CSS, in a style tag in the html file (in the head), in the tags themselves; but best practice is to use CSS -->
<!-- in CSS order maters within each type (ID, class, tag), but there is a priority order between different categories: ID first, class second, tag third-->
<!-- display: inline, block and inline block - inline block allows to define margin and if we are applying it to a span tag, so we cna change the width and height a little -->
<!-- flex display is REALLY IMPORTANT-->
<!-- positions: STATIC(default), FIXED (relative to the viewport of the browser - ie always y=0, x=10px to the left), ABSOLUTE - relative to the body always, independent of parents - RELATIVE, changes it relative to the body OR the parent tag if the parent is not static (ie, has a class / a margin)-->
<!-- the best position is relative; for absolute or fixed elements, sometimes mobiles do not show them right while scrolling, bc these are outside the flow of a website-->
<!-- FLEX-->
<!-- FLEX, display flex , will add a flex direction automatically to row (not visible) - we can overwrite this with "flex-direction:column"-->
<!-- div tag always takes the width of the page, but height only as specified-->
<!-- screen readers will ALWAYS read semantics from html orders; if we change positions just using style, e.g. flex-direction", screen readers will not see that visual change but stick to what is in the html-->
<!-- justify content -- moves in the X axis; align items -- moves on the Y axis; they apply to all flex class paren, children-->
<!-- order and align self ( flex end) - child flex properties -->
<!-- LOOK AT "CAN I USE.COM" TO SEE WHAT CSS PROPERTIES SPECIFIC BROWSERS ACCEPT -->
<!-- MEDIA QUERIES-->
<!-- to apply styles based on size of the screen-->
<!-- BEM-->
<!--interview question: if we know some CSS framework. answer: BEM-->
<!--GRID LAYOUT-->
<!-- display: grid ;; allows to tell the elements hw to use the space, by defining how many ros and columns; it is an alternative to flex, better than flex for layouts-->
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment