The Coding Bootcamp Primer - Et gratis webudviklingskursus, der forbereder dig til at tilmelde dig ethvert bootcamp

Et gratis 4-timers kursus, der lærer dig nok webudvikling til at være klar til ethvert kodende bootcamp.

I dag er jeg glad for at kunne meddele, at vi lancerer et kursus for folk, der overvejer at gå i gang med en webudviklingsuddannelse.

Det kaldes The Coding Bootcamp primer (<- link), og det lærer dig de mest grundlæggende byggesten til at bygge websteder: HTML, CSS og Javascript. Du lærer også, hvordan du opsætter din computer, fejler din kode, søger efter løsninger, løser problemer og meget mere. I slutningen skal du være i stand til at oprette en stylet side, såsom en lommeregner, navnegenerator eller en personlig side.

Lektionerne er skabt af V School, en førsteklasses kodende bootcamp, der ligger i Salt Lake City, Utah. Det er faktisk det nøjagtige kursus, som de sender deres studerende igennem, inden de starter på deres fordybende bootcamp.

Det er også en god ressource for folk, der ikke nødvendigvis planlægger at tilmelde sig et kodende bootcamp, men som er nysgerrige efter webudvikling generelt. Det er designet med den brede offentlighed i mit sind, da vi mener, at alle kan drage fordel af at lære de grundlæggende kodningsfærdigheder.

Lad os nu se på den underliggende pædagogiske filosofi samt hvordan kurset er struktureret.

V Skolens læringsfilosofi

I årenes løb har V School udviklet en læringsfilosofi, der bedst kan beskrives med. The easy way is the hard way.Det betyder, at løsning af problemer og udfordringer er den bedste måde at lære på. Naturligvis vil dette kursus have en masse praktisk praksis

De fleste tutorials vil være på Scrimba, men der vil også være links til et par eksterne ressourcer, såsom opgaver og vejledningsvideoer til en håndfuld emner.

Det anbefales, at du ikke overvåger kurset. Sørg for at tage hyppige pauser, sove på problemerne og tage dig tid.

Tips til de studerende på dette kursus:

  • Gør screencasts igen, hvis du ikke er sikker på noget. Det betyder ikke, at du er dårlig til at lære eller huske.
  • Prøv at bruge din viden, og det er ok at afvige for at prøve noget og komme tilbage til kurset.
  • Læring bør ikke være ensom. Find hjælp ved at søge online, bede en ven eller en klassekammerat og nå ud til en instruktør.

V School har også været generøs nok til at skabe en dedikeret slap kanal, så du kan bede om hjælp og hjælpe andre. Vær med og lad os opbygge et samfund omkring dette kursus!

Sådan bruges Scrimba

Det er bedst at se noget en gang end hundrede gange at læse om. Hvis du ikke er fortrolig med, hvordan Scrimba fungerer, kan du se vores screencast, hvor Bob Ziroll, uddannelsesdirektør ved V-skolen leder dig igennem det.

Eksternt link - Computeropsætning

Inden vi starter med kurset, skal vi have noget, din computer er opsat. Du er velkommen til at hoppe i vores screencast for at lære, hvordan du gør det.

Eksternt link - Brug af VS-kode

På et eller andet tidspunkt i løbet skal du være i stand til at skrive noget af koden i en editor offline. Vi anbefaler normalt VSCode, men det gør virkelig enhver kodeditor. Hvis du gerne vil følge installationstrinnene, kan du finde dem i vores video.

Eksempel: V-skolens forløbsprojekt

Dette kursus er gratis og åbent for alle. Det har også et hovedsteneprojekt i sidste ende, der kan fordobles som V Schools forkursusprojekt for alle, der er interesserede i at ansøge.

Så hvis du overvejer at deltage i V School eller er på hegnet om bootcamps, er dette kursus generelt også noget for dig.

Introduktion til HTML

Nate Jensen

I denne screencast vil Nate Jensen, V Skoles instruktør, introducere os til de grundlæggende HTML-koncepter: kedelplade, tags og HTML-syntaks.

HTML-elementer

Fortsat på introduktionen af ​​det foregående kapitel er næste op de mest almindelige HTML-elementer, som f.eks

til

tags, , ,

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); // 

Opgave - getElementById

Velkommen til næste øvelse. I denne vil du øve dig på DOM-manipulation og også forsøge at løse et problem, som du ikke er blevet introduceret før. Ingen bekymringer, enhver søgemaskine er din ven!

Valg af flere elementer

I dette kapitel viser Bob os, hvordan vi vælger flere DOM-elementer. Du har virkelig et valg i dette tilfælde. Elementer kunne vælges efter deres id, klassenavn eller tagnavn.

Thing 1

Thing 2

Thing 3

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

querySelector og querySelectorAll

Der er også en anden måde, der kan hjælpe os med at vælge elementer, og den kan bruges med alle tre: tags, id'er og klassenavne.

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

Ændring af elementets tekst

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

      Fantastisk job for at komme så langt i løbet. Det er nu tid til at øve lyttere til begivenheder i vores næste øvelse. Som altid, hvis du sidder fast, skal du se nogle af de tidligere screencasts og være fri til at nå ud.

      Forløbsprojekt

      Den var god. Du har gjort det gennem kursusmaterialerne, og du er klar til forkurssprojektet. Dette projekt er rettet mod folk, der gerne vil tilmelde sig V-skolen, men hvis du vil have lidt ekstra øvelse, er du også velkommen til at hoppe ind.

      Tillykke!

      Kæmpe tillykke med at have gennemført kurset. Du har arbejdet meget hårdt, og du skal være rigtig stolt af dig selv. Dette er begyndelsen på en fantastisk rejse for dig!