Scribd
Upload
17 views

Web Development - Udemy

Uploaded by

davidleiva1703
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Web Development - Udemy

Uploaded by

davidleiva1703
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Github:

Correo gmail

Gc1410316

Usuario: David-Leiva-CR
StackOverFlow – Ask and search for errors in my programing code.

Introduction to HTML:
Defines the content and structure of the website.
Heading Elements – h1 to h6:
- Starts with and opening tag ( <h1> ) and ends with a closing tag ( </h1> )
Paragraph Elements:
- Starts with and opening tag ( <p> ) and ends with a closing tag ( </p> )
Void Elements:
- Element where you can´t put any content inside the tag. It has horizontal rule ( <hr /> ), break
element ( <br /> ). Shows where the breaks in a paragraph have to go.

Intermediate HTML:
List Elements types:

- Unordered list [ <ul> </ul> ] and they contain list item´s in them [ <li> Text </li> ]
- Ordered list [ <ol> </ol> ] and they contain list item´s in them [ <li> Text </li> ]

Nesting and Indentation:

- Nest list´s inside other list´s, putting list´s inside list items

Anchor Elements:

- Allows to create hyperlinks.


- <a href=”link” > </a>
- Href is the URL that the hyperlink points to
- Atributes In list elements can be used like this <ol atribute=””> . The atribute goes in the
opening tag

Image Elements:
- Allows to insert images
- <img src=”url” height=”XXXX”/> alt=”text”/>
- The alt attribute is an alternate text description

Multi Page Websites:


File paths:
- Absolute FP is relative to the root of the computer. C:/Project/Images/cat.png
- Relative FP is relative to the location where we are writing the code Images/cat.png
- Special characters (../) allows to “go up a level” in the folder three
- Special characters (./) to stay in the current drectory (folder)

Web Pages:
- To create an image with a hyperlink. <a href=”link”><img src=”link”/></a>
The HTML Boilerplate:
- Allows to understand the structure of the HTML file
- Tells in what version the code has been written
- At the top of every HTML file there has to be a <!DOCTYPE html> declaration
- <html lang=”language that the website is gonna be in” and ends with the closing tag
</html>
- In the <head> section goes meta tag for the character coding seting, the title heading
- In the <body> element is where all the content of page goes
- All ending tags are </ name tag>

Introduction to CSS:
How to add CSS:

- Inline <html style=”css” />


- Internal <style>css</style> . Where the CSS is html{property.value}
- External <link href=”style.css”/> .Is located in a different file (styles.css) and you have to use
the <link/> tag
- CSS is broken like this  property:value

CSS Selectors:
- Helps to choose where to apply the CSS, choosing the name of the tag we wanna target
- The class selector ( .name of the class{property.value})
- A class is an attribute that you can add to any element
- The ID selector ( #name of the ID {}) selects all elements with a particular ID attribute
- 1 or more attributes can have the same class name, but it can only have 1 ID with a particular
name
- The Attribute selector ( p[draggable]{property:value})
- Inside the square brackets goes the attribute we want to select
- P is the html element
- The Universal Selector ( *{propery:value}) and it selects all elements
- The Element selector ( html element {property:value}) targets elements based on their tag
CSS Properties
CSS Colors:
- To use hex codes (special colors) tag{ color:color code}

Font Properties:
- Font size:XXpx or XXpt which allows to change the font size
- 1rem – 100% of the html (root)
- 1em – 100% of parent
- Font weight, where it can be normal, bold, bolder, lighter
- Font family, determines what you want your text to look like
- Use “” if there´s space between the font name
- Text align
CSS Inspection:
- Diagnose any bugs
The Box Model:
- The Border box - border: thickness style color - determines what the border should look like
- The Border width - border-width:top right bottom lef
- Padding pushes the border out Xpx. Adds space between the element and the border
- Margin is the part between the border and another element
- The box is created through <div> </div> and acts like an invisble box

Intermediate CSS:
CSS Cascade:
- Level of importance of a CSS rule are Position, Specificity, Type and Importance
- In the cascade, the ones at the bottom replace the ones at the top
- 1st is position, The n+1 replaces n
- 2nd is specificity, refers to how specific a selector is, where the ID SELECTOR is more
specific than a CLASS SELECTOR
- 3rd is the type, where we can use the external CSS, internal CSS or inline CSS, but the most
important is the inline CSS, the internal CSS and last external CSS
- 4th is the importance ( !important; )
- The type is more important
than the specificity
Combining CSS Selectors:
- How to target specific elements to style
- One way is by group rule using the coma ( , )
- Example - element, element{property: value}
- The element is known as selector
- Another way is using a child using a ( > ) where the relation parent-child is only 1 generation
deep
- Example – div > div {property.value}
- It can also be element > element > element {}
- Next is the Descendant leaving a space between 2 elements
- Example – element element {}
- The first element is the ancestor and the second one the descendant. The relation is 2
- generations deep
- Next is chaining selector to apply where all selectors are true
- Example – elementelement{property:value}
- H1.class#id - For example
- Always start with an element if you want to chain an element
- Final is Combining combiners
- Example – element elementelement{property:value}
- The first element is the ancestor
CSS Positioning:
- Static: is the HTML default flow
- Relative: Position relative to default position. You can move it relative from where it should be
- Absolute: Position relative to nearest positioned ancestor or top left corner of the page. *The
ancestor has to have a relative position if you want to position relative
- The Z-Index determines which elements on top of which in the Z axis
- Fixed: Position relative to top left corner of browser window
- How to create a circle in CSS: Use border-radius: 50%
- Normally, a parent has a relative position and the child has a absolute position

Advanced CSS:
CSS Display:
- <span>content</span> has a different value for the display property
- Display: inline makes text be in the same line
- Display: block takes up the entire full width
- Display: inline-block we can set their height and width
- Display: none make any element dissapear
CSS Float:
- Allows to wrap text around a particular element
- Float: value (left or right)
- This property is set on the image, not the paragraph
- For a footer, we use the property - clear: value
Responsive Websites:
- Media Queries: @media (brakepoint){}
- CSS Grid: display: grid. We apply the display grid to the containing div, such as in the case
where there are multiple div´s inside a general div
- Grid-template.columns: Xfr Xfr - you indicate the amount of columns
- Grid-template-rows: Xpx Xpx Xpx - indicates the amount of rows
- Gap: Xpx - number of pixels there should be between rows and columns
- Grid-columns: span X -number of columns there should be
- CSS Flexbox: display: flex. Allows to create 1d layouts and to set each of the div´s inside the
flex container
- Flex: # - tells you how many more times it should be in terms of length and width
- External FrameWorks e.g Bootstrap: Is something external that we need to bring in.
Media Queries:
- Adding breakpoints to define responsive layouts
- @media (brakepoint){style}
- Brakepoint = max-width
- (at a particular witdth, anything that’s less than or equal to a #px) {use this type of styling}
- Brakepoint = min-width
- (at a particular witdth, anything that’s more than or equal to a #px) {use this type of styling}
- Both BP can be combines using the word “AND” inside the brakepoint code
- Example @media(M-W: px) and (M-W: px)
- {element{value}}

Flexbox:
CSS Flexbox:
- Don’t use float for layout, instead Flexbox
- Its declared in the CONTAINER
- Wrap divs in a container and display it as flex. - Display: flex; !!!!!!!!!!!!!!!!!!!!
- Use the gap element
- 1rem adaps the space according to the positioning
- Inline-flex makes the div occupy only the amount of space it needs
Flex Direction:
- Modify to get the layouts we want
- Flex-direction is set default to row
- It can also be set to “column”
- Flex-basis set´s the height if the direction is columns. If it´s rows, it sets the width
- Flex-basis is set on the child element, not the container
- Column or row-reverse
Flex Layout:
- Know whether the property goes in the child element or the parent
- Order property: # - to position any element that is a flexbox item
- Flex -Wrap property: wrap - usefull when you run out of space and it´s set in the container
div
- Justify-content property: flex-start or end/center/space-between or evenly or around - it´s set
on the container div and set´s the distribution of the items. Set´s the distribution on the row
axis
- Align-items property: flex-star or end/center/baseline/strech - set´s the distribution along the
cross axis and its set in the container
- Align-self to target and indepent div
- Align-content: only works when you have the flex wrap set to wrap
- VH measure: the height of the window that you are viewing
- Align content starts working when there is no enough width to have everything on 1 line
- Flex-flow: Allows to combine the flex direction and the flex wrap
Flex Sizing:
- There has to be a 1. Min or max width, 2. Flex basis, 3-Width or Height, and 4. Is the actual
content width
- Min-width determines the longest word top set the min width
- Max-width respects the flex-basis unless this last one is less than him and it determines how
long the items can strech
- Min-width determines how small can items shrink and when it´s larger than the flex basis, it
respects it
- Flex-grow and shrink. If the value is 1, it means it´s activated, and if it´s 0, its not activated
- Flex: # # #, Where the 1st number is the grow, the 2nd one is the shrink and the 3rd value y the
basis

Grid:
Display Grid:
- A 2 dimensional layout system
- Flexbox helps align content along a 1 dimensional line
- Grid lays out content along a 2 dimensional grid
- To create a grid, the div container has to have a display: grid and create grid-template-
columns/rows
- Grid-template-columns/rows: #fr - where #fr creates columns or rows with fractional values
Grid Sizing:
- How to size columns and rows
- Rows are the height and columns are the width
- Fixed sizes (#px) are not responsive
- The auto sizing gives a little responsiveness
- If you use auto in rows, it´s gonna fit content, and if you use it on columns, it´s gonna try to
get the 100% width
- Fractional sizing sets the ratio
- Minmax size defines the min and max we want our columns to be - #px minmax(#px , #px)
- The repeat function tells we want to repeat this size this many times - repeat(#of times , size)
- Grid-auto-rows/columns is for new created rows or columns and set their height or width
Grid placement:
- Rows and columns are known as tracks and inside them we create grid cells to create grid
items. The grid lines are controlled by the gap element
- Grid-column: “span” tells how many columns or rows cells you want your grid item to
span or how many columns it should take
- Grid-column-start/end where should the item starting position should be
- Order property to modify the item position. By default, all items have a “0” position
- Grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end

Bootstrap:
Bootstrap framework:
- External CSS Layouts
- You can get pre-built designs
- To use BS, you have to include the link in the head section
- 1st step is to paste the Include via CDN
- 2nd step is to copy the document link you want to use
Bootstrap layout:
- To use the 12 column sistem, we first need a div container, inside it a div row and inside it we
will have the items ( col-2/4/6 )
- If I don’t define a number to the column it will automatically distribute equally
- There can be multiple breakpoints in a single div for example col-sm-12 col-md-8 col-lg-4
- Col-# is the extra small breakpoint
- Col-sm-# is the small breakpoint
- Col-md-# is the medium breakpoint
- Col-lg-# is the large breakpoint
- Col-xl-# is the extra large breakpoint
- Col-xxl-# is the extra extra large breakpoint
Bootstrap Components:
- To use the pre-built and pre-styled components
- It´s done by adding a bootstrap class
- <html element type=component class=component, where you choose the component you are
going to use
- A NAV BAR is very used
- SVG are icons
- Hero elements include H1’s, paragraphs, buttons, images, and only copy the div that contains
the hero element itself
- Features elements and you have copy the feature-items code in the style section and also
delete the icon code and use the icon we want to use
- Carousel element, which allows to show a serie of images and they can be center by creating a
div container that contains the carousel div
- Footer element
- Spacing notation
- Dark mode can be applied by setting data-bs-theme=”dark” in the html line code
- Create a container div to center the items
- < Section are used to separate areas or sections in a website

Web Design School:


Color Theory:
- Red = love, energy, intensity ( car adverts )
- Yellow = joy, intellect, attention ( capture the attention )
- Green = freshness, safety, growth ( grocery stores )
- Blue = stability, trust, serenity ( trustworthy companies )
- Purple = Royalty, wealth, femininity ( Paydat lone companies )
- Take colors that are opposite creates a “pop” (complementary colors) but don’t mix it with text
- Adobe colors to combine colors
Typography and Font Choosing:
- Serif family for serious and formal designs
- San Serifs makes a friendly design and useful for body text
- Use no more than 2 fonts
Manage attention with UI Design:
- Establish hierarchy using colors
- Consider the layout, paragraph extension, alignment
- Reduce the number of lines of alignment
- Use white spaces
Use Experience (UX) Design:
- Is meant to be invisible, and to achieve this we have to take in consideration this aspects
- 1 – Simplicity
- 2 – Consistency

Introduction to JS ES6:
Data Types:
- Strings, which is text
- Boolean, which can be true or false
- Numbers, which are numbers
- Typeof, which tells you what kind of data type it is
Strings concatenation and length:
- variable.length to know the amount of characters in a word
JS Variables:
- Prompt allows the user to input something
- Slice function, allows to slice and dice string by declaring variable.slice(position, all the way
to)
- Variable.toUpper/LowerCase() to change casing in the string
- Modulo ( % ) gives the remaining of a division
- Variable++ is the increment expression - adds 1
- Variable—is the decrement expression – subtracts 1
- Variable += # - adds that specific amount
- Variable -= # - subtracts that specific amount
JS Functions:
- Creating the function - Function name () {}
- Calling the function - NameofFunction ();
Parameters and Arguments:
- We put inputs inside the parenthesis of the function
- We have to name the input
- To call the function, at the end we don’t leave the parenthesis empty
- Math.floor to round numbers down
Outputs and return values:
- Return indicates that the function, can take inputs and give outputs
- It goes befores the finishing curly brace
- Whatever get´s returned in the function becomes the right hand side of another function call
that uses the same input
- For example, money as input and change as output

- Function getMilk (money) { Creating the function


Return money % 1.5;
}

- Var change = getMilk(4); Calling the function


Intermediate JS:
Randomazation:
- Var n = Math.random(); it generates a random number between 0 and 0.99 and it doesn’t take
any inputs
- If we want a range of numbers, we multitply the variable by the max number in that range we
round it to the floor and then we add 1 to the variable math.floor
Conditionals and logic statements:
- To test equality, we use 3 equal signs ( === )
- To test inequality, we use ( !== )
- And combinor is &&
- Or combinor is | |
- Not combinor is !
Arrays:
- We include the arrays inside square brackets
- You can create empty arrays and use push item to addd items in it
- Variable.length to count the number of items inside an array
- Variable.includes to see if the array contains a specific item, if it does it returns true
- Variable.push to add new items in the array
- Variable.pop removes the last item of the array
While Loops:
- While ( something is true ) { do something }
- For example:
- Var I = 1
- While ( I < 2 ) { console.log(i) ; and i++ }
- For Loops, we specify the amount of times we want the loop to run
- For example
- For ( i=0; i<2; i++) { Do something }
- Were i=0 is the start and i<2 is the end
Document Object Model (DOM):
Adding JS to websites:
- Onload attribute means that when the body of the website gets loaded up, whatever javascript
that is written inside the quotation marks will get executed
- To add javascript, we can use script src and it´s recommended to place it right before the
closing body tag
Introduction to DOM:
- Manipulate objects by using java through the dot notation ( var.property )
- A method is something that an object can do and they all have a set of parenthesis at the end,
for example, click ()
Selecting HTML elements with JS:
- getElementsbyTagName(“name of the tag”)[position of the item we Want to target]
searches for the elements with a particular tag name
- It can also be done by using the getElementsByClassName(“name of the class”)[position of
the item we want to target]
- Also by getElemenByID, and this one only targets one particular ID
- Also, to target particular elements you can use the querySelector ( and inside you put the tag
name or the ID or the CLASS, using the dot or the number symbol, in between parenthesis )
- Use querySelectorALL if all items match the query Selector
- When using Query Selector, the space between the ID´s or Classes depends if on the jerarchy
(leave space) or if the items are in the same code line (don’t leave space)
Manipulate and Change styles of HTML with JS:
- When styling with JS, we use camell case in the properties, for example, fontSize, and the
values have to be represented as strings, which means, inside apostrophies
Structure vs Style vs Behaviour:
- HTML is for content
- CSS is for style
- JS is for behaviour
- classList. Add/remove to add or remove classes in the code, and it can be styled with CSS
- To manipulate text, we can use innerHTML
- To manipulate attrributes of any elements (classes, href, sources) we use the setAttribute (“we
specify the attribute we want to target”, “what we want to change it to”)

You might also like