קורס בחינם של 4 שעות שילמד אותך מספיק פיתוח אתרים כדי להיות מוכן לכל bootcamp קידוד.

היום, אני שמח לבשר שאנחנו משיקים קורס לאנשים ששוקלים לצאת לחינוך לפיתוח אתרים.

זה נקרא The Coding Bootcamp primer (<- קישור), והוא ילמד את אבני הבניין הבסיסיות ביותר של בניית אתרים: HTML, CSS ו- Javascript. תלמד גם כיצד להגדיר את המחשב שלך, לנקות באגים בקוד שלך, לחפש פתרונות, לפתור בעיות ועוד. בסוף, אתה אמור להיות מסוגל לבנות דף מעוצב, כגון מחשבון, מחולל שמות או דף אישי.

השיעורים נוצרו על ידי בית הספר V, מחנה קידוד מהשורה הראשונה הממוקם בסולט לייק סיטי, יוטה. זה למעשה הקורס המדויק שהם שולחים את התלמידים שלהם לפני שהם מתחילים במחנה האתחול הסוחף.

זה גם משאב נהדר עבור אנשים שלא בהכרח מתכננים להירשם ל- bootcamp קידוד, אך הם סקרנים לגבי פיתוח אתרים באופן כללי. זה תוכנן עם דעתי בציבור הרחב, שכן אנו מאמינים שכולם יכולים להפיק תועלת מלימוד מיומנויות קידוד בסיסיות.

עכשיו, בואו נסתכל על הפילוסופיה הפדגוגית הבסיסית, כמו גם על אופן בניית הקורס.

פילוסופיית הלמידה של בית הספר V

במהלך שנות ההוראה V בית הספר פיתח פילוסופיית למידה שניתן לתאר בצורה הטובה ביותר באמצעות The easy way is the hard way.פירוש הדבר שפתרון בעיות ואתגרים הוא הדרך הטובה ביותר ללמוד. מטבע הדברים, בקורס זה יש הרבה תרגול מעשי

רוב ההדרכות יהיו ב- Scrimba, אך יהיו קישורים למספר משאבים חיצוניים, כמו מטלות וסרטוני הדרכה לקומץ נושאים.

מומלץ שלא להתבונן בקורס. הקפידו על הפסקות תכופות, לישון על הבעיות ולקחת את הזמן.

טיפים לתלמידי קורס זה:

• צפה בשידורי מסך מחדש אם אינך בטוח במשהו. זה לא אומר שאתה גרוע בללמוד או לזכור.
• נסה להשתמש בידע שלך וזה בסדר לסטות כדי לנסות משהו ולחזור לקורס.
• למידה לא צריכה להיות בודדה. מצא עזרה על ידי חיפוש מקוון, שאל חבר או חבר לכיתה, פנה אל מדריך.

בית הספר V היה גם נדיב מספיק בכדי ליצור ערוץ רפוי ייעודי שתוכל לבקש עזרה ולעזור לאחרים. אנא הצטרפו ובואו לבנות קהילה סביב הקורס הזה!

כיצד להשתמש ב- Scrimba

עדיף לראות משהו יותר ממאה פעמים לקרוא עליו. אם אינך מכיר את אופן עבודתו של Scrimba, צפה בשידור המסך שלנו, שם בוב זירול, מנהל החינוך בבית הספר V מדריך אותך דרכו.

קישור חיצוני - הגדרת מחשב

לפני שנתחיל בקורס, עלינו להגדיר חלק מהמחשב שלך. אל תהסס לקפוץ למסך התצוגה שלנו כדי ללמוד כיצד לעשות זאת.

קישור חיצוני - שימוש בקוד VS

בשלב כלשהו של הקורס, יהיה עליך להיות מסוגל לכתוב חלק מהקוד בעורך במצב לא מקוון. בדרך כלל אנו ממליצים על VSCode, אך באמת כל עורך קוד יעשה זאת. אם תרצה לבצע את שלבי ההתקנה, תוכל למצוא אותם בסרטון שלנו.

תצוגה מקדימה: פרויקט הקדם-קורס של בית הספר V

קורס זה הוא בחינם ופתוח לכל אחד. בסופו של דבר יש לו גם פרויקט אבן גבהה, שיכול לשמש כפרויקט הקדם-קורס של בית הספר V לכל מי שמעוניין להגיש מועמדות.

אז אם אתם חושבים להצטרף לבית הספר V או אם אתם על הגדר בנוגע למחנות אתחול, באופן כללי, קורס זה גם בשבילכם.

מבוא ל- HTML

בתוכנית המסך הזו, נייט ג'נסן, המדריך של בית הספר V, יציג בפנינו את מושגי ה- HTML הבסיסיים: boilerplate, tags ותחביר HTML.

אלמנטים HTML

בהמשך למבוא של הפרק הקודם, הבא הם רכיבי ה- HTML הנפוצים ביותר, כמו

ל

תגיות, , ,

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)

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.

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

מטלה - getElementById

ברוך הבא לתרגיל הבא. בזה תרגלו קצת מניפולציות ב- DOM ותנסו לפתור בעיה שלא הוצגה לפני כן. אין דאגות, כל מנוע חיפוש הוא חבר שלך!

בחירת מספר אלמנטים

בפרק זה בוב מראה לנו כיצד לבחור מספר רכיבי DOM. באמת יש לך מבחר במקרה הזה. ניתן לבחור אלמנטים לפי המזהה, שם המחלקה או שם התג.

Thing 1
Thing 2
Thing 3

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

querySelector ו- querySelectorAll

יש גם דרך אחרת שיכולה לעזור לנו לבחור אלמנטים והיא יכולה לשמש עם כל השלושה: תגים, מזהים ושמות מחלקות.

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

שינוי טקסט של אלמנט

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

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

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
'; 

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

     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!'); });