We believe in knowledge sharing
Powered by
University of Zagreb
Faculty of Organization and Informatics
Curriculum
Lectures & Materials
1. Introduction
The first lesson will be used for getting acquainted with all the participants of the Academy, as well as for introducing Speck and the concept and rules of Speck Academy. We will try to give you as many details as possible to make it easier for you to proceed to further lectures. At the end of the lecture, you will receive your first homework assignment, which is a preparation for the next lecture.
2. HTML & CSS
In this lecture, we will cover the basic details that every frontend developer should know about HTML and CSS, including common tags, content structuring, Cascading Style Sheets (CSS) & Specificity, and the Box model. We will also touch on the basics of writing HTML with an emphasis on optimizing for Search Engine Optimization (SEO) as effectively as possible.
3. Version Control System
The focus of this lecture will be on Version Control Systems and their purpose in development. We will familiarize ourselves with GIT, GitHub, and the Gitflow Workflow, and together try out the most important functionalities that are applied in everyday practice.
4. Advanced CSS
In this lecture, we will implement responsive design in practice, explain what Mobile First design is, and also get acquainted with BEM (Block, Element, Modifier) methodology, according to whose rules we write extendable and reusable interface components. We will also focus on CSS Grid & Flexbox modules, which enable us to quickly position elements without the use of Bootstrap or similar libraries.
5. Intro to JavaScript
This lecture is dedicated to the basics of JavaScript and its comparison with other programming languages. We will learn how the JS Engine works and familiarize ourselves with the basic syntax of JavaScript. Using a simpler example, you will write your first JS functionality.
6. Advanced JavaScript
In this lecture, we delve into more specific functionalities of JavaScript, focusing on objects, callback functions, Promises, and ES6+ examples. This session will serve as a preparation for what we will frequently use in React. After the presentation, we will shift to solving a task that will demonstrate the application of everything learned in the presentation.
7. Intro to React
Having mastered the basics from the previous lectures, it's time to focus on the fundamentals of React. We will get acquainted with the JSX syntax extension, components, and Props. We will also demonstrate the basics of using React Router for successful navigation through an application. As part of this lecture, we will illustrate the purpose of CSS preprocessors and how to elevate the technique of styling applications to an even higher level.
8. React events, conditionals & lists
In this lecture, we continue with the basics of React and will learn how to use events, conditional rendering, and lists. Based on this knowledge, we will see the benefits of developing applications using React as opposed to structuring our own applications without a framework. We will also become acquainted with a new styling technique using the Styled Components library, which allows for styling via JavaScript.
9. React Forms
This lecture is dedicated to forms in React. Forms are an essential part of every developer and application, and to simplify form management, various libraries allow us to use them very intelligently and efficiently. The focus will be on the Formik and Yup libraries.
10. React API
In this lecture, we will learn what an API is and how we can consume it within a React application. We will also familiarize ourselves with several methods for sending requests to an API and the most commonly used techniques. A portion of the lecture will be dedicated to the async/await extension of Promises. We will apply all the learned concepts within our React application, which will successfully communicate with an API.
11. React Context
The focus of this lecture is on efficiently passing data through the component tree using the Context API, without having to manually send data through every level of the component. Additionally, this lecture will be dedicated to understanding and using Cookies and Web Storage, so that everyone is familiar with how data can be stored in the browser.
12. React State Management
This lecture will consolidate all the techniques for managing state within a React application, explore the specific purpose and advantages of each method, and introduce solutions for complex state management. Given the breadth of the topic, we will familiarize ourselves with the basics of the MobX library and apply it within our own application.
13. React Deployment
In this lecture, we will explain what deployment is, the most common environments for deployment, and their purposes. We will also get acquainted with the Vercel platform for deployment, and create an automated deployment of our own application using GitHub and Vercel.
14. Next.js
This lecture is also our final one, in which we will introduce you to the Next.js framework, which is based on React but offers numerous features useful for the development of SEO-optimized applications. We will explain the difference between SSR (Server-Side Rendering) and CSR (Client-Side Rendering), their advantages and disadvantages, and also provide suggestions for technologies that would be beneficial to continue learning after this academy.
15. Final Exam & Certificate Ceremony
The final lecture is conducted live and consists of both a theoretical and practical exam. Exams are graded immediately, and shortly after everyone has completed them, the certificates are awarded to the top performers based on their total scores.
Presentation (COMING SOON)
Hands-On