Links Terminal, Git, Github Main Notebook Shortcuts Instalations and Tools System Notes Basic Folder set up Web Fundamentals Web Fundamentals Notes. Each separated by their track icon

Links Instalations and Tools System Notes Folder set up System Setup Web Fundamentals Web Fundamentals Notes. Each separated by their track icon The Basics of the Web

JS I Basics I Heaps Trie Linked List Hash Table Binary Search Tree Queue Sets Stacks DOM Tree Visualisation

Validation W3C Validation Service Online IDE's w3schools CodePen CodeSandbox Repl.it JSFiddle JS Bin

Links Terminal, Git, Github Main Notebook Shortcuts Instalations and Tools System Notes Basic Folder set up Web Fundamentals Web Fundamentals Notes. Each separated by their track icon

So you are learning Web Development. You joined a Bootcamp to get the best training out there. Just what does being a Developer really entail? WWW The World Wide Web (or www). You know that website you are looking at right now or how you check your email through a browser? We don't need to type www anymore but it still applies. As a developer you get to create websites and applications and basically publish them to the world wide web. Creating an html document is actually only part of the equation. You can click on that document in your file manager it opens up your browser and you can view the contents of the document that are in the body tag. However unless I am on your computer or have the same document on mine opening up that index.html won't look the same, until we publish, host, or deploy it to the web. Then it becomes publicly accessable. Request / Response Cycle So open up a browser and type in the address bar www.google.com or leave off the www if you want. What do you see? You should see the google home page. Why? Take a look at this image

VS Code Discord Zoom Instalation VS Code Instal Link Get to know VS Code Extentions to install on VS Code Code Spell Checker

Links Resources and Links YouTube Play List System Notes System Setup Folder set up Web Fundamentals Web Fundamentals Notes. Each separated by their track icon

Adding classes to HTML So you have your html doc and you reuse tags. Like say you have 2 div elements on your page. But you don't want them to both look the same. When you go to style you don't want to use inline incase you like the styling and may want to use it later so lets add a class to our div. <div class='about'> <h2>All about me</h2> <img src='images/melissa.jpg' alt='Photo of Melissa' /> </div> <div> <p>Melissa is an instructor at Coding Dojo, as well as a Wife, Mother, and US Navy Veteran,</p> <p id='hobbies'>Hobbies that I love to do are Crocheting, and Gardening. I love to build websites when I can or just redo old ones to make them look better.</p>

Links Repository(Change the Branch to your cohort start Month) Full Stack / Front End / Back End Just what is the difference? Every part of the website is important and has its purpose. I am going to use a home to explain some differences. Street Address

What is CSS This is how we style our websites. There are many different ways to go about adding styling to your website but at the root of them all it comes down to CSS. What does it stand for? Cascading Style Sheet. How can we use it? There are 3. Main/Basic ways to implement styling into your website. External - (highly recommended) A .css document that is linked to your html documents.

What is flexbox? 2. A CSS web layout that allows for element responsivness inside containers. Git repo Main Repo Check the branches to see changes Flexbox So why use it and how?

It describes the behavior of the elements being displayed. It is read line by line when called upon. (this is important) Basically it adds functionality to your site. Why do we use it?: Those submit buttons need instructions behind them beyond going to a new page like a link. Ever gone to a page that when you hover over those little ?'s, well what pops up is all done through JS. The basics

1. Understanding variables and console.log 1.1 var x = 10 console.log(x) What is this stating? We are creating a variable, naming it x, and making it equal to 10 Then we are logging to the console the value of x

Links Codepen to practice: Breaking down the code var x = [2,4,6]; console.log(x); Creating a variable, naming it x, and setting it to an array of numbers Logging out the array

Feel free to reset the Algo app as many times as you want. Take those lessons and type out those functions into a .js file and write it out line by line what it is doing. Have a statement of what the overall function is doing as well. Challenges What is the purpose of the function What will we need to have in the function Return the result of the function These should be the basic steps that you take with all functions you will create.

So you are learning Web Development. You joined a Bootcamp to get the best training out there. Just what does being a Developer really entail? WWW The World Wide Web (or www). You know that website you are looking at right now or how you check your email through a browser? We don't need to type www anymore but it still applies. As a developer you get to create websites and applications and basically publish them to the world wide web. Creating an html document is actually only part of the equation. You can click on that document in your file manager it opens up your browser and you can view the contents of the document that are in the body tag. However unless I am on your computer or have the same document on mine opening up that index.html won't look the same, until we publish, host, or deploy it to the web. Then it becomes publicly accessable. Request / Response Cycle So open up a browser and type in the address bar www.google.com or leave off the www if you want. What do you see? You should see the google home page. Why?

What is HTML? Hyper-Text Markup Language is what it stands for, but what is it really? Well it is the bones of any website. You can write JavaScript, and CSS till the cows come home but if you don't have a way to display their effects they are meaningless. HTML isn't just what you see on the page either. 4 Major parts to an HTML document plus 2 optional #1 DOCTYPE <!DOCTYPE html> This tag needs to be at the top of every .html document. It sets the language type of html for the document. This has no closing tag like most of the other tags.

So we have talked a bit already about different things to do with HTML. You have a basic understanding sure. Now comes the fun part. I am sure you have heard some folks say that divs are bad. Nope they aren't. Well not really anyways. You just need to now when and how to use them. Here are a few images as examples Breaking down your page into boxes always helps. What do you want to go where. :::info Want a cool trick to help with layout and styling? Add the following code to your css document: * { border: 1px dotted red;}. This gives every element on your html documents a thin dotten red border. :::

So you've built a website and you can run it locally, you have it saved on a git service, now what? :::success SHOW IT OFF!!! ::: Lets get your new project up on the world wide web with a clickable link so that you can share it with anyone and everyone. I will present you with 5 ways to deploy your project however the last is tricky #1 Github Pages: