Coding Giants
Εγγραφή

Εισαγωγή

Το μάθημα απευθύνεται σε μαθητές που θέλουν να μάθουν πώς σχεδιάζεται και δημιουργείται μια ολοκληρωμένη ιστοσελίδα. Χρησιμοποιώντας σύγχρονα διαδικτυακά εργαλεία και το φιλικό περιβάλλον του Glitch, οι μαθητές θα γνωρίσουν όλα τα βασικά στάδια ανάπτυξης ενός website. Κατά τη διάρκεια του προγράμματος θα μάθουν να δημιουργούν τη δομή μιας ιστοσελίδας με HTML, να διαμορφώνουν την εμφάνισή της με CSS και να προσθέτουν διαδραστικές λειτουργίες με JavaScript. Μέσα από πρακτικές ασκήσεις και δημιουργικά projects, κάθε μαθητής θα δημιουργήσει τη δική του ιστοσελίδα και θα μάθει πώς να τη δημοσιεύει στο διαδίκτυο.

Πρόγραμμα μαθήματος

1Lesson 1. My first web page
In this lesson we’ll learn the structure of HTML documents. We’ll get to know an online webpage editor - Glitch. We’ll cover basic markup letting as enrich our web page with simple text, headings and hyperlinks.
2Lesson 2. Graphics and multimedia
In this lesson we’ll show how to add resources from the Internet to our web page. We’ll explore adding images, icons, movies, pdf documents and interactive maps. We’ll also create a project called “My town”.
3Lesson 3. Cooking blog 1/2
In this lesson we’ll create a cooking blog. We’ll learn lists and their types as well as CSS which will be used to change the looks of our page. Moreover students will import some Google Fonts and use them in their project along with a system for adding comments - Disqus.
4Lesson 4. Cooking blog pt. 2
The aim of the classes will be to continue and expand the project from previous classes.
5Lesson 5. Phones ranking
In this lesson we’ll learn how to present data in tables, we’re going to create and format them properly. Using tables we’ll create a ranking of our favourite phones with the most important information about them.
6Lesson 6. Forms
In this lesson we’ll learn different ways to create forms - using textboxes, buttons, dropdown lists, checkboxes. We’ll create a significantly big contact form.
7Lesson 7. Students design their sites. QUIZ
In this lesson each student will create a web page dedicated to a topic of their own choice. The site should consist of elements we’ve learned during our lessons, the more the better.
8Lesson 8. My Pet
In this lesson we’ll learn a new HTML tag: <div> and use it to create a section on our page. We’ll create a project about our favourite pet.
9Lesson 9. Lego shop pt. 1
In this lesson we’ll create a webstore for Lego which is going to include a logo, banner, favicon, Google Fonts, interactive menu and a subpage with a contact form.
10Lesson 10. Lego shop pt. 2
The aim of the classes will be to continue and expand the project from previous classes.
11Lesson 11. Restaurant pt. 1
In this lesson we’ll create a responsive webpage of a restaurant. Site will consist of separate sections, menu, image gallery, a footnote with contact info and localization.
12Lesson 12. Restaurant pt. 2
The aim of the classes will be to continue and expand the project from previous classes.
13Lesson 13. Review. QUIZ
In this lesson we’ll review our knowledge by creating info cards about different computer games.
14Lesson 14. Introduction to JavaScript. Slideshow gallery in restaurant page.
In this lesson we’ll perfect our restaurant project using JavaScript coding language - we’ll modify our gallery to make it a slideshow.
15Lesson 15. Holiday memories
The goal of the lesson will be to create a responsive website using the Flexbox module and Media queries. The site will have dedicated sections. Participants will also be able to personalise their websites with custom content (images, videos).
16Lesson 16. Holiday memories. Continuation
The lesson will be dedicated to enhancing the project from the previous class.
17Lesson 17. Boss quiz
The goal of the lesson is to create an interactive quiz about bosses from our favourite games. The entire project will be styled with CSS.
18Lesson 18. Boss quiz. Continuation
The goal of the lesson is to develop and expand the project from the previous class.
19Lesson 19. Variables and operators
The purpose of the lesson is to remind children what variables are. They will learn to create them and use them in JavaScript. In addition the participants will learn about different types of arithmetic operators and assignments.
20Lesson 20. Conditional statements - decisions
The purpose of the lesson is to remind children what a conditional instruction is. Students will learn how to create conditional instructions in JavaScript. Participants will learn about logical operators used to create extended conditions, as well as switch instructions.
21Lesson 21. Functions
The goal of the lesson is for participants to learn about functions. In addition, participants will learn popular methods of operations on text types.
22Lesson 22. Arrays
The goal of the lesson is for participants to learn about Arrays. Participants will learn about common operations on arrays.
23Lesson 23. Loops
The goal of the lesson is for participants to learn about loops. Participants will learn about for and while loops and use them in tasks.
24Lesson 24. Objects
The goal of the lesson is to learn through what objects are and how they are created in JavaScript.
25Lesson 25. Revision
Repetition of the material - quiz.
26Lesson 26. DOM
The goal of the lesson is for participants to learn about the concept of DOM. Participants will create simple interactions on the website.
27Lesson 27. Task list
The purpose of the lesson will be to prepare a list to which we can add new tasks and delete those already done. The whole thing will be printable.
28Lesson 28. Hangman part 1
The purpose of the lesson will be to create a game of Hangman which involves guessing words.
29Lesson 29. Hangman part 2
The purpose of the lesson will be to create a game of Hangman which involves guessing words.
30Lesson 30. Dice game part 1
The goal of the lesson will be to create an elaborate game for two players involving throwing dice and scoring points. In addition, in the game we will define the conditions of winning and losing, losing points.
31Lesson 31. Dice game part 2
The goal of the class will be to complete and expand on the project from the previous class.
32Lesson 32. Dice game part 3
In this lesson we’ll create our first program in Python and get to know the Visual Studio Code IDE (Integrated Development Environment).
33Lesson 33. Meme Generator part 1
The goal of the class will be to create a meme application with the ability to save memes.
34Lesson 34. Meme Generator. Continuation
The goal of the class will be to continue the project from the previous lesson. Participants will use JavaScript to create the mechanics of our meme generator.
35Lesson 35. Twitter
In the lesson we will prepare our own version of Twitter. We will focus on adding the appropriate elements of our forum, styling them as in the classic version of Twitter, and we will go to work on the functionality of our forum.
36Lesson 36. Twitter. Continuation
In the following section, we will program the ability to add posts and delete them. We will also add a timestamp to each tweet and program the screen cleaning of all posts.
37Lesson 37. Introduction to Bootstrap
The objective of the lesson is to introduce Bootstrap. Students will learn what Bootstrap is and how to install it using a CDN. They will also learn to use basic Bootstrap classes and components to style HTML elements.
38Lesson 38. Bootstrap's grid
The goal of the lesson is to learn about Bootstrap's grid system. Students will learn how to create responsive web layouts using containers, rows and columns.
39Lesson 39. Text styling and typography
The goal of the lesson is to introduce students to Bootstrap's typography classes for styling text, such as headings, paragraphs, lists and quotes. Students will also learn how to use the classes to align and format text and how to add custom fonts.
40Lesson 40. Buttons and icons
The goal of the lesson is to introduce students to button creation and styling using Bootstrap classes and the integration with icons. Students will learn how to create buttons in different styles and sizes.
41Lesson 41. Cards
The goal of the lesson is to introduce students to Bootstrap's cards component. They will learn how to create cards to display information such as products, user profiles or blog posts.
42Lesson 42. Navigation and navigation bars
The goal of the lesson is to teach students how to create responsive navigation bars using Bootstrap's Navbar component. Students will learn how to add links, logos and navigation buttons and customize the style of the navigation bar.
43Lesson 43. Forms and validation
The objective of the lesson is to teach students how to create and style forms using Bootstrap. Students will learn to create various types of form fields, buttons, and how to validate data within forms.
44 Lesson 44. Modals
The goal of the lesson is to introduce students to Bootstrap's modals component and learn how to create dialog boxes to display additional information or forms. At the end of the lesson, students will create a simple page where modals are invoked using buttons.
45 Lesson 45. Carousels
The goal of the lesson is to familiarize students with the Bootstrap carousel component. Students will learn how to create interactive carousels for displaying images or content and customize their appearance and behavior.
46Lesson 46. Group lists
The goal of the lesson is to teach students how to create and style group lists using Bootstrap. Students will learn about different styling options, such as lists with icons, buttons or links. They will finish the lesson by creating a structured to-do list.
47Lesson 47. Fan site part 1
Students will begin working on a larger final project, which will be a fan site about their favorite character from a game or movie. In this lesson, students will plan the layout of the site, create the basic structure, and begin implementing key Bootstrap components.
48Lesson 48. Fan site part 2. Introducion to Python
The goal of the lesson is to finalize the fan site by adding the last touches and functionalities In the second part of the lesson, we’ll introduce Python.