Posts

Showing posts from August, 2022

Layouts & position

Image
1. static 2 absolute  3. relative  4. fixed  what do we change? Document flow  + positioning context  working with (Background) images Understanding Flexbox & Grid Diving deeper into Units   Flexbox aligned and positioned inside such a box  Flex container  is the direct parent of the flex items Original  Display: flex; Flex-direction: row; by default  Flex-direction: column; Flex-direction: column-reverse Flex-direction:row-reverse;   Flex-direction:row; Flex-wrap; allows the items to wrap as needed  align-items : center ; Justify-content: space-between; Justify-content: space-around;

Git& GitHub

Image
Efficient code Management with Version Control Repositories branches commit & more git   The local tool installed on your computer  Version control for web development projects  Organized in "repositories" GitHub Cloud hosting provider for "Git repositories" Collaboration in & contribution to web development projects  The world's largest development platform Human-computer Interaction GRAPHICAL USER INTERFACE GUI  - easier  COMMAND LINE INTERFACE CLI prompt  Terminal (z shell )    MacOS  interface  Command prompt (cmd) windows Command prompt  dir Git Basics Theory  Working Directory Current project folder Repository all tracked files and folders Commit  code snapshot  "Added image","fixed order button" Branch Where commits are stored main/master feature git branch  git remote add origin https://github.com/valery-22/web-dev-github.git git push origin main CLONE New folder git clone https://github.co...

Hosting our first project - Relative and Absolute path

 ! + enter  Deployment Deploying a Website Moving the website code onto a remote machine ("server") that serves the site to visitors. Hosting the remote machine ("Server ") hosts stores the website code and servers it to visitors. If a website should be visited by other people needs to be a hosted  How the web works   client (Frontend) requests "I want to view the website" response "Here are the instructors for the browser" server (backend) Website code (Browser instructions) https://app.netlify.com/drop https://www.netlify.com/  https://remarkable-otter-05abc7.netlify.app/full-week.html  first project Relative vs Absolute Paths Relative Path  images/my-image.jpg looks for files and folders relative from the source file (ie the file that contains this path ) Absolute Path /images/my-image.jpg Look for the files and folders relative from the root folder (ie the main project folder that is being served)

CSS

  A List Of All CSS Selectors  Thus far, we already learned about a lot of key CSS selectors. Here's a list / summary of all the CSS selectors that you can use in CSS (including some, which we haven't seen yet): Tag type selector CSS:  p { ... } Would select this HTML element for example:  <p>Some text...</p> This selector selects all HTML elements that are of this tag type ID selector CSS:  #some-id { ... } Would select this HTML element for example:  <h1 id="some-id">...</h1> This selectors selects the element that has this ID on it (should only be once per page) Class selector CSS:  .some-class { ... } Would select this HTML element for example:  <h1 class="some-class">...</h1> This selector selects all HTML elements that have this class on them Attribute selector  (new) CSS:  [src] { ... } Would select this HTML element for example:  <img src="..."> Thi...

Arrays JAVA

Image
 int [] arr; int arr2 []; arr = new int [10]; system.out.println(arr[0] ):