ironhack-class-nov07

class repo for Nov -07 for IronHack BootCamp!

Below are all my notes for my Bootcamp

Week 1: CSS and HTML notions

HTML introduction and Git notion

Mark sheet

Git notion:

Git clone your file git add. git commit -m and your file git push origin main

Your file is right up to date

When it is forked

Git clone the file into your local repository Git pull origin main

Furtherinfo

HTML semantic

HTML DOM tree ==> Every HTML Document can be represented as a tree using the Document Object Model (DOM), which contains all the elements of the HTML document, their format, and the browser state at a specific moment.

<title>

The shortcut to take comments in visual code is cmd + /

below all the block elements

Paragraph

Preformatted text

Heading (title)

Ordered List

Unordered List

List Item 2-D Data Go to codepen Submit info Go to codepen Group form items Go to codepen

==> Span is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes. It should only be used when no other semantic element is appropriate. Not recommended.

Inline below Emphasizes Italic text Bold text Dates and times Anchor Go to Google
Line break To be Image

<script></script> Embedded code

Generic inline container Clickable button Data input field Caption for item Menu of options

<textarea></textarea> Multi-line input

Important Semantic Elements:

==> Forum post / Products card

==> contact/Localisation and address ==> Logo/Icon and nav menu

==> define content in the sidebar

Furtherinfo

It is very important to use the right semantics to have clean code and an easily readable website. A better structure is easier will be to design the website in CSS.

use the div when is really necessary

CSS: Cascading Style Sheets

2 main routes to add your CSS;

• in the head with the style balize (not the best option for a big profile)
• in a separate sheet : < link rel = "stylesheet" . href=./style.style.css> ==> that is kind of mandatory for any kind of huge project
• Do the same way for media queries to make your code more readable for anyone

The anatomy of CSS :

Rules or rulesets Selectors Declarations Properties Values and units

Allthebalises

Combinators

The final group of selectors combines other selectors to target elements within our documents. The following, for example, selects paragraphs that are direct children of

elements using the child combinator (>):

article > p {

}

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

here and

.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set within its class attribute

.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1

The convention You should name classes using only lowercase letters like class="head-container".

Multiple classes

==> 2 classes are assigned to this DIV.

hover

button:hover: -:visited - applies a style based on the history of the navigator -:link applies a style to any -:checked applies a style on any radio button

Used structural pseudo-classes like :first child

Calculating specificity

ID is stronger than Class and the priority is always be taken from the closest one which is targeted

Please note that all the rules can be bypassed with the !important rule 😂

Colors and HTML

Colors by name Color in hexo Color in RGB

Font and Family

• Font Family property ==> + import the font family from Google

• Font-size

• Font-weight

• font- style

• Text- Transform ==> UPPERCASE

• Text- decoration

• Text-align

• letter spacing and word spacing

The Form

The box model in CSS

• width and height ==> the content
• padding
• border
• Margin

The border is set in

p { border: solid, 2px, black; }

padding: 10px 20px; /_ padding-top and padding-bottom 10px / / padding-right and padding-left 20px _/

!important to use the The box-sizing property is used to alter the default box model used to calculate the width and height of the elements. Used the * to apply to all the doc

The CSS unit

px ==> classic em ==> is equal to the parent element the children: 1em= 10 px if parent is equal to 10px rem ==> to the root level and not the parent element

hereforfurtherinfo

Othermetrics

• vw 1% of the viewport
• vh 1 of the viewport
• % is used to express relative size compared to the parent element. It is commonly used along with properties like width and height.

CSS Positioning

The position CSS property allows you to organize elements on the screen. Position can be:

static relative fixed absolute ==> do not forget to add the relative position into the parent element in order to make it works

Float Left and right inherit will assume the float value of the parent container of the child element

Vertical align

Responsive design

Create a media query

@media [(media-features) ] { // Styles }

code example

@media (min-width: 650px) and (max-width: 999px) { .responsive-div { background-color: green; } }

Flexbox

Flex Container for the parents

row (default): left to right in ltr; right to left in rtl row-reverse: the right to left in ltr; left to right in rtl column: same as row but top to bottom column-reverse: same as row-reverse but bottom to top

-Justify content on the x-axis -align content on the y axis -align-items on the y axis

Property of the elements -align self -Flex growth -Flex shrink

Flex grid

here

Transition

transition-property: Specifies the CSS property (or properties) to be transitioned. transition-duration: Specifies the duration of the transition. transition-timing-function: Specifies the timing function of the transition. transition-delay: Specifies an optional delay.

** **

November 14

Java Script

Definition

JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.

JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).

Good tips

console.log(document.domain) console.log (document.URL) console.log (document.title) console.log (document.doctype) console.log (document.body) console.log (document. all) to check all the elements console.log (document.all [3]) ==> Select the element inside the array console.log (document.all[3].textcontent = ("") console.log (document.all[3].innerHtml = ("") console.log (documents.links) console.log (documents.imgs)

Type of values

• String value in '' "" ``
• Bolean

the best practise for ES6 JS is: console.log (` add the value here ${array[number].name})

if we have the value

console.log (Users is ${name}) console.table ==> Table of the arrays

Variables

Please no more use the var

Let and const

let ==> a value can be reassigned const ==> a unique value

For instance

let firstName = "tuly" console.log(firstName) // The console prints tuly //

firstname = "Feuch" console.log (firstName) // the console log prints Feuch //

if you want to pass the value the easiest way is

let firstName = "tuly" console.log (firstname) the console print tuly

firstName = "Zizou" console.log (firstname) the console print zizou

typeof ==> return the type of the operehands value

-number -string -boolean -undefined

Conditions

if (conditions){ run the conditions }

Prompt request the user to type something const number = prompt("enter a number: ")

The method compareTo() is used for comparing two strings lexicographically in Java. Reassigned a value:

1.if (string1 > string2) it returns a positive value. 2.if both the strings are equal lexicographically i.e.(string1 == string2) it returns 0. 3.if (string1 < string2) it returns a negative value.

while statement let i = 0; while (i <= 100) { console.log(i); i++;

the break statement When the break statement is used in a loop, it breaks the loop and continues executing the code after the loop (if there’s any code after). The continue will run the code.

November 15

**Java Script lab ** ➜ section-03-js git:(main) ✗ node.index

** Split and join in nativos Let hacker1 = '' hacker1 = 'tuly' hacker2 = 'zizou'

let UpperCaseName = hacker1.toUpperCase().split().join() console.log(UpperCaseName);

the output is T U L Y

let reverseNameSimplified = hacker2.split('') The output is an array ['z', 'i' , 'z', 'o', 'u']; let reverseNameSimplified = hacker2.split('').reverse().join('')

**NaN stands for Not a Number and it represents a computational error. It is a result of an incorrect mathematical operation, such as:

const name = "tuly" const name2 = tuly/2

console.log (name2) output print nan

Truthy Falsy true (the keyword) false (the keyword) '0' (as string) 0 (as number) 'false' (as string) '' (empty string) {} null [ ] undefined 35 (as number) NaN new Date()

Trash Notes below to be cleaned

November 11

1.1 Spotify case

CSS and exercices

CSS general settings to reset the CSS

*{ margin 0 padding 0 outline 1px solid ==> pour voir les divs }

// For the fixed position// Position fixed ==> z-index

object fit cover is an alternative from background cover vh ==> view hight er tgo have this kind of structure below Parent child > child element section > external div > child div

1.2 iniatiation at JS

1.3 Grid content https://css-tricks.com/snippets/css/complete-guide-grid/

November 1