„Coding Bootcamp Primer“ - nemokamas internetinio kurso kursas, kuris paruošia jus užsiregistruoti bet kurioje įkrovos stovykloje

Nemokamas 4 valandų kursas, kuris išmokys jus pakankamai kurti internetą, kad būtumėte pasirengę bet kokiai kodavimo įkrovos programai.

Šiandien džiaugiuosi galėdamas pranešti, kad pradedame kursus žmonėms, kurie ketina pradėti mokytis žiniatinklio kūrimo srityje.

Jis vadinamas „The Coding Bootcamp primer“ (<- nuoroda) ir išmokys jus pačius svarbiausius svetainių kūrimo elementus: HTML, CSS ir „Javascript“. Taip pat sužinosite, kaip nustatyti kompiuterį, derinti kodą, ieškoti sprendimų, spręsti problemas ir dar daugiau. Pabaigoje turėtumėte sugebėti sukurti stiliaus puslapį, pvz., Skaičiuoklę, vardų generatorių ar asmeninį puslapį.

Pamokas sukūrė aukščiausio lygio „coding bootcamp“ „V School“, įsikūrusi Solt Leik Sityje, Jutoje. Iš tikrųjų tai yra tikslus kursas, kurį jie siunčia savo studentams, prieš pradėdami savo panardinamą įkrovos stovyklą.

Tai taip pat yra puikus šaltinis žmonėms, kurie nebūtinai planuoja prisijungti prie kodavimo įkrovos programos, tačiau kuriems apskritai įdomu kurti internetą. Jis sukurtas atsižvelgiant į plačiąją visuomenę, nes manome, kad kiekvienas gali pasinaudoti mokydamasis pagrindų kodavimo įgūdžių.

Pažvelkime į pagrindinę pedagoginę filosofiją ir į tai, kaip kursas yra struktūrizuotas.

V mokyklos mokymosi filosofija

Per daugelį metų mokydama „V School“ sukūrė mokymosi filosofiją, kurią galima geriausiai apibūdinti naudojant „ The easy way is the hard way.Tai reiškia, kad problemų ir iššūkių sprendimas yra geriausias būdas mokytis. Natūralu, kad šis kursas turės daug praktinės praktikos

Daugelis vadovėlių bus „Scrimba“, tačiau taip pat bus nuorodos į keletą išorinių šaltinių, pvz., Užduotis ir vaizdo įrašus kelioms temoms.

Rekomenduojama nestipriai stebėti kurso. Įsitikinkite, kad dažnai darote pertraukas, miegokite dėl problemų ir neskirkite laiko.

Patarimai šių kursų studentams:

  • Peržiūrėkite ekrano vaizdus, ​​jei nesate tikri dėl kažko. Tai nereiškia, kad jums blogai mokytis ar prisiminti.
  • Pabandykite pasinaudoti savo žiniomis, ir tai yra gera, jei nutolote išbandyti ką nors ir grįžti į kursą.
  • Mokymasis neturėtų būti vienišas. Pagalbos ieškokite internete, paklauskite draugo ar klasės draugo, susisiekite su instruktoriumi.

„V mokykla“ taip pat buvo pakankamai dosni, kad sukurtumėte specialų laisvą kanalą, kad galėtumėte paprašyti pagalbos ir padėti kitiems. Prisijunkite ir kurkime bendruomenę aplink šį kursą!

Kaip naudoti Scrimba

Geriausia ką nors pamatyti kartą, nei šimtą kartų, apie kuriuos skaityti. Jei nežinote, kaip veikia „Scrimba“, žiūrėkite mūsų ekranizaciją, kurioje jus apžiūrės V mokyklos švietimo direktorius Bobas Zirollas.

Išorinė nuoroda - kompiuterio sąranka

Prieš pradėdami kursą, turime turėti savo kompiuterį. Jei norite sužinoti, kaip tai padaryti, nedvejodami pereikite prie mūsų ekrano vaizdo.

Išorinė nuoroda - naudojant VS kodą

Tam tikru kurso metu turėsite sugebėti parašyti dalį kodo redaktoriuje neprisijungę. Mes paprastai rekomenduojame „VSCode“, bet tikrai tinka bet koks kodo redaktorius. Jei norite atlikti diegimo veiksmus, juos galite rasti mūsų vaizdo įraše.

Peržiūra: V mokyklos priešmokyklinis projektas

Šis kursas yra nemokamas ir atviras visiems. Galų gale jis taip pat turi pagrindinį projektą, kuris gali būti dvigubas kaip „V mokyklos“ prieš kursą vykdomas projektas visiems, norintiems kreiptis.

Taigi, jei galvojate apie prisijungimą prie „V School“ arba esate tvoroje dėl „bootcampų“, šis kursas taip pat yra skirtas jums.

Įvadas į HTML

Nate'as Jensenas

Šiame ekrane „N School“ instruktorius Nate'as Jensenas ketina supažindinti mus su pagrindinėmis HTML sąvokomis: „boilerplate“, žymomis ir HTML sintakse.

HTML elementai

Tęsiant ankstesnio skyriaus įvadą, toliau pateikiami dažniausiai pasitaikantys HTML elementai, pvz

į

žymės, , ,

HTML Attributes

In this chapter, Nate will cover HTML attributes. Some HTML elements, like a tag for an image has source attribute src. An anchor tag has href. Attributes add extra functionality to our elements.

Assignment - Silly CIA part 1

This is our first assignment and you should attempt to complete it yourself without cutting corners such as copypasting code, even if it might take you quite some time to complete it. Having said that, if you get stuck always reach out to other people either on Scrimba, or the V School's coursework page.

HTML5 Semantic Tags

In this chapter, Nate covers what semantic tags are and why there were introduced in HTML5.

CSS Intro (inline-style)

Grant Wilhelm

In this cast, Grant Wilhelm, V School's instructor shows us how we can add styling to HTML elements by writing them inline using style attribute.

 Welcome to CSS! 

CSS Selectors

In this part, Grant shows us how to link a separate stylesheet with link tag.

And then Grant introduces styling with selectors as a better alternative to inline styling from the previous chapter.

For example, to target an

tag in our styles.css file we can write:

h1 { color: Blue; font-size: 55px; } 

Assignment - Silly CIA part 2

This is our next self-driven assignment and similar to the first one, you're highly advised to not cut corners and reach out if stuck for too long.

Assignment - CSS Wars: The Selector Awakens

Congratulations on completing the previous assignment! Nothing pushes your skills further than a good challenge. Keep it up and dive straight into your next assignment.

CSS Colors and Fonts

Welcome to your next CSS cast, we hope you've enjoyed your challenge.

In this chapter, we will learn that to define colors in CSS, we have quite a few options, apart from just writing the color's name.

We can use hexadecimal (hex, for short) notation.

body { background-color: #a4f6b9; } 

Specifying via red, green, blue values with rgb.

.header { background-color: rgb(55, 155, 255); } 

Or with rgba where a is an alpha parameter that is a number between 0.0, fully transparent, and 1.0, fully opaque.

.header { background-color: rgba(55, 155, 255, 0.5); } 

CSS Display Property

When using HTML we're going to be talking about block elements that take up the full width of the page, and inline elements that only take up as much as they need.

Oftentimes, we might want to override the defaults. For example, if we wish to display a few images one under the other, rather than side by side.

We can do this default by using display property.

/* img by default is an inline element */ img { display: block; height: 175px; width: 175px; } 

Sign up for our Email List

This might be a perfect time to interject and offer to stay in touch and get the latest updates from V School. You can sign up in our screencast.

Assignment - Newsies

Welcome to your next challenge! If you're getting stuck, make sure that you go back and rewatch some of the previous screencasts, otherwise, you've got this!

CSS Box Model

In this screencast, Grant will introduce CSS box model.

CSS Box Model

Assignment - Color Grid From Scratch

It's time for our new assignment and when you're done we'll be looking forward to continuing with the course in the next lesson.

CSS Layout and Positioning

In this screencast, Grant will help us to learn the principles of layout and positioning with CSS. For example, how to overlap elements, make some of them sticky on the page, etc.

Assignment - CSS Flags

In the next assignment you will be asked to build some countries' flags with pure CSS! When in doubt, fall back and rewatch some of the casts from before and see you in the next assignment.

Assignment - Design a Blog

Our next assignment will be slightly different, as you can very easily personalise it and have it as a basis for your actual real-life blog in the future!

External Link - Debugging Intro

The skill of debugging is extraordinarily important in web development. What are bugs and some ways on how to find them in our screencast.

External Link - Chrome Dev Tools

The Developer Tools in your browser of choice will be one of the most important tools you will need to learn. Check out our primer on the topic.

External Link - Using Google

We're quite sure that you are very familiar with using Google to search for things. We've collected a few tips on how to search efficiently, so do check it out.

Javascript Data Types

Hello and welcome to the Javascript part of the course, where our old friend Nate, will help us write our first lines of Javascript. Nate will introduce primitive and complex data types.

Primitives are:

  • strings, e.g "hello"
  • numbers, e.g 2, 3
  • booleans, e.g true or false

Complex are combinations of primitives:

  • array, e.g [1, 2, true, "hello"]
  • objects, e.g {likes: "travel", countries_visited: 21, has_passport: true}

Assignment - Grocery Store JS

Congrats! You have reached your first Javascript assignment. Do reach out if you get stuck and, more importantly, have fun!

Javascript Arrays

Welcome back to our next cast. Nate dives a little deeper into arrays and shows how to access various elements of an array and determine its length.

// 0 1 2 3 4 var colors = ['blue', 'green', 'red', 'yellow', 'purple']; console.log(colors[1]); // green console.log(colors.length); // 5 

Javascript Conditionals

In this screencast, Nate will help us learn how to add logic to our Javascript programs.

Often, we would like to do something only if something else is in the right place. For example, if the user's birthday is on the day they are looking at your page, show them a confetti animation :)

For that, we would use conditionals.

Nate will walk us through all the if, else if and else, how they are used and more.

Assignment - If Statement Olympics

Great, time to practice those if-statements with the next JS assignment

Javascript Loops

Another common thing in programming is to repeat a certain operation for a number of times. You don't have to copy-paste code for the number of times you need it done, because there are loops for that.

for (i = 0; i < 100; i++) { // your code you wish to repeat } 

Nate will let teach us all about for loops, and even how you can supercharge them with conditionals from the previous lesson.

Assignment - Even/Odd Looping

Nice one! Let's now practice loops. Be sure to not cut corners and seek help if stuck. Good luck and have fun.

Assignment - Loops And Arrays Practice

All right! Let's now do a very common programming task and practice loops and arrays together.

Javascript Functions part 1

Remember how we talked about not having to copy-paste code in the chapter about loops? Well, a programming term for that is DRY, Don't Repeat Yourself.

Functions are used when we have a piece of code that we would like to reuse, in multiple places.

function sum(x, y) { console.log(x + y); } 

Javascript Functions part 2

Great, now when we know how to make a function, how do we use it? A term for using a function is calling a function.

We can call the function from the previous chapter

sum(2, 2); //displays 4 

More on calling, how to store results of a function and how to combine them with loops, in this chapter's screencast with Nate.

Assignment - Functions Exercise

Welcome back! We now have an exercise to practice functions. Reach out if you're stuck, have fun and good luck.

Javascript Objects Part 1

It's now time to cover Javascript objects. If you didn't see the point of them after the chapter on data structures, we will cover them in-depth now.

Objects are for those cases when we need to describe something in depth. Objects have properties. For example, personal details of your friends and relatives might be stored in an object, so you know when to send them a birthday card.

// to create an object var person = { name: 'Rick', age: 70, relation: 'grandfather' }; // to access a property, use '.' dot notation console.log(person.name); console.log(person.age); 

You would often hear people say key-value pair when they talk about properties and their values.

Javascript Objects Part 2

You can also create properties on existing objects.

var car = { type: 'Honda', make: 'Civic', wheels: 4, honk }; car.hasHadAccident = true; console.log(car.hasHadAccident); // displays true 

And some properties can be assigned to functions

var car = { type: 'Honda', make: 'Civic', wheels: 4, honk: function() { console.log('HOOOOONK'); } }; car.honk(); // HOOOOONK 

Assignment - Social JS

Our next assignment will help you write more complex data structures and help you think how about them.

Assignment - Loop Olympics

Welcome back again, the next exercise will give you additional practice on using and creating for loops.

Javascript Conventions

Javascript is a very dynamic language and there are many ways to do things. Over the years developers have come up with a set of go-to rules and generally, everybody tends to follow them. These include ways to name variables and functions, use of whitespace, where and how to use comments, etc.

Nate shares these important rules of courtesy among the developers in our screencast, do check it out.

Assignment - Daily Planet Editor

We now have another exercise to complete. This assignment will have you clone down a repository from GitHub that has some javascript code inside. The code is plagued with bad JS conventions, and your goal is to clean it up

and make sure it runs correctly.

Introduction to the DOM

So far we were learning about Javascript, but how does it apply to the actual web development?

Javascript comes in when you need to programmatically update your HTML and CSS. To add interactivity and makes things happen on your page.

In this screencast, Bob explains how this can be achieved.

What is the DOM?

DOM stands for "Document Object Model". It's essentially a set of tools that are given to developers to be able to change the page programmatically. The DOM is simply an object, on which we can use different methods and properties to make changes to the page.

The way we access the DOM is by adding a tag to the page with our .js file.

  What is the DOM?   

What is the DOM?

Then inside index.js file, we can access the DOM by using document keyword.

console.log(document); 

Assignment - log document to the console

This is going to be a short one. For your next assignment try to build a basic HTML page from scratch, try to log document and look what actually gets logged in the console.

Selecting Elements - getElementById

In this cast, Bob shows us how we can select a specific DOM element by a provided id on the element.

And now we can select that element with Javascript

var hello = document.getElementById('hello'); console.log(hello); // 

Užduotis - getElementById

Sveiki atvykę į kitą pratimą. Šioje praktikuosite tam tikrą manipuliavimą DOM ir taip pat bandysite išspręsti problemą, kuri dar nebuvo jums pristatyta. Nesijaudinkite, bet kuri paieškos sistema yra jūsų draugas!

Kelių elementų pasirinkimas

Šiame skyriuje Bobas parodo, kaip pasirinkti kelis DOM elementus. Šiuo atveju jūs tikrai turite pasirinkimą. Elementus galima pasirinkti pagal jų ID, klasės pavadinimą arba žymos pavadinimą.

Thing 1

Thing 2

Thing 3

var things = document.getElementsByClassName('things'); console.log(things); // HTMLCollection with 3 elements. 

„querySelector“ ir „querySelectorAll“

Taip pat yra dar vienas būdas, kuris gali padėti mums pasirinkti elementus, ir jis gali būti naudojamas su visais trimis: žymomis, ID ir klasių pavadinimais.

document.querySelector('#favorite-things'); // returns the first element that matches the id document.querySelectorAll('#favorite-things'); // returns all elements that match the id 

Elemento teksto modifikavimas

It's all well and good to be able to select elements, but it's really useful to be able to update them once selected. One of the most common usages is updating some text with Javascript.

In this chapter, Bob covers a few ways and looks at their pros and cons. One of them is:

PLACEHOLDER

document.querySelector('#paragraph').textContent = "I've changed!"; 

Modifying Styles

If we can modify some text, the same applies to modifying styles.

Modifying Styles with JS

var header = document.getElementById('header'); header.style.color = 'blue'; // header changes color to blue 

Modifying Styles - className and classList

Often you might not want to change a style permanently. It's common to change colors depending on some event or input for some time and then return it to a default position. For example, you're inputting a text in a field, you might want to highlight that box's edges.

This is a perfect case for adding and removing a class.

Modifying Styles with JS

document.querySelector('#header').classList.add('new-class'); // now classes in #header are: title new-class another document.querySelector('#header').classList.remove('title'); // now classes in #header are: new-class another // to turn on or off use toggle document.querySelector('#header').classList.toggle('title'); // adds title class back. 

Modifying elements - value

While we're on the subject of modifying elements, tag deserves our special attention. It's a bit of an odd one out, as it doesn't have textContent property and the way you would access what the user has typed into an input field is with value property.

var inputBox = document.getElementById('text-input'); console.log(inputBox.value); // will log user's input 

Creating elements in JS

If we can modify an element, why not create it?

We can do it with createElement() function.

For example, if we have a list


    
  • 0
  • 1
  • 2

We can add another

  • element like so:

    // create a new list element var newLi = document.createElement('li'); // add an order number inside, so it looks like 
  • 3
  • newLi.textContent = '3'; //select the existing list var myList = document.getElementById('my-list'); // add the newly created li to the list. myList.append(newLi);

    Creating elements in JS - innerHTML

    The approach Bob has shown us in the previous chapter is the go-to way. But in this chapter, he shows us that for such quick operations we can simplify the code by using innerHtml.

    var myList = document.getElementById('my-list'); // innerHTML is a string represantation, which is why it's possible to just add another element. myList.innerHTML += '
  • 3
  • ';

    Creating elements in JS - for loops + createElement

    Ok, let's now apply what we've learnt.

    We can combine our knowledge of loops with createElement to display information on the screen.

    Imagine you're having a party and you've sent the invitations. When someone agrees to come, you'd like to show their names on a page. This list of people can change. So different users might see different information depending on when they saw your page.

    Let's see how it can be done

    
         
      // my guests var partyGuests = [ 'Jason Lee Scott', 'Kimberly Hart', 'Zack Taylor', 'Trini Kwan', 'Billy Cranston' ]; // grab the list var guestList = document.getElementById('guests'); // for every guest in the partyGuests array for (var i = 0; i < partyGuests.length; i++) { // create a list element for each var newName = document.createElement('li'); // and guest's name to the list element newName.textContent = partyGuests[i]; // add the list element to my list of guests guestList.append(newName); } 

      Event Listeners

      All of the DOM modifications we've learnt so far were leading up to this very chapter. A lot of the changes usually depend on a user interacting with your page.

      This brings us to events and event listeners. Events are clicks, hovers, keyboard presses, the usual ways people interact with web pages. Event listeners are special bits of code that wait for those events and then trigger your code when something happens.

      Let's look at an example of a button.

           Click me    
      var button = document.getElementById('button'); // add an vent listener for clicks button.addEventListener('click', function() { // when a user clicks the button, run this function. console.log('The button was clicked!'); }); 

      Self study - get the value from an input element

      Welcome to your next challenge. You will need to record user's input and the log it in the console after they click on a button. No worries if you're not sure how to do it. There are some useful links in the cast and we're sure you can do it.

      DJ JS - Event listener practice

      Puikus darbas kurso toli siekti. Atėjo laikas pratinti renginių klausytojus kitoje mūsų pratyboje. Kaip visada, jei užstrigote, žiūrėkite kai kuriuos ankstesnius ekranus ir nedvejodami kreipkitės.

      Pasirengimo kursui projektas

      Geras. Jūs tai padarėte per kurso medžiagą ir esate pasirengęs projekto prieš kursą. Šis projektas skirtas žmonėms, kurie norėtų įstoti į „V“ mokyklą, tačiau, jei norite papildomos praktikos, taip pat nedvejodami užeikite.

      Sveikinimai!

      Didžiuliai sveikinimai už baigus kursą. Jūs labai sunkiai dirbote ir turėtumėte iš tikrųjų didžiuotis savimi. Tai jums nuostabios kelionės pradžia!