Are you a beginner looking forward to learning how to create websites? Do you want to learn something easy, yet highly demanded in the digital freelance marketplace? Then this is the perfect program for you. We will guide you through the entire process so that you get used to the world of web development and then we will teach you how to become a professional Front-End Developer with HTML5, CSS3, JavaScript, etc.
C0.01: Welcome to your learning journey!
C0.02: What is Learnio?
C0.03: Setting goals
C0.04: Join our Community
C0.05: How it works: Assignments
Intro
Lesson 2 : How to get the most out of this course
Lesson 3 : Let's get the setup done
Lesson 1 : The document structure and doctype
Lesson 2 : What are HTML tags ?
Lesson 3 : Tags for handling text
Lesson 4 : HTML Lists
Lesson 5 : Link tags
Lesson 6 : HTML Tables
Lesson 7 : Image tags
Lesson 8 : Conventional and Layout HTML tags
Lesson 1 : Form tags
Lesson 2 : What is Semantic HTML
Lesson 3 : Semantic tags (header, footer, section, article)
Lesson 4 : Semantic tags (aside, main, time)
Lesson 5 : HTML5 video/audio
Lesson 6 : HTML meta tags
Lesson 7 : HTML special characters
Create a small website structure where you will display information about yourself
Lesson 1 : What is CSS and how CSS works
Lesson 2 : Ways to select an element to style
Lesson 3 : Font and Text styling
Lesson 4 : The Box Model
Lesson 5 : Changing colors and backgrounds
Lesson 1 : CSS layout properties
Lesson 2 : Advance CSS properties
Lesson 3 : Pseudo Properties
Lesson 4 : Transitions and Transform
Lesson 1 : CSS Flexbox and it’s uses
Lesson 2 : Media Queries and Breakpoints
Lesson 3 : Making grids with Flexbox to create a full website layout
Style the website structure that you build in the previous (Chapter 4) assignment
Lesson 1 : What is Bootstrap why to use it
Lesson 2 : How to setup Bootstrap for a project
Lesson 3 : The Bootstrap Grid
Lesson 4 : Breakpoints
Lesson 1 : Bootstrap Utilities
Lesson 2 : Forms
Lesson 3 : Helpers
Lesson 1 : What is SASS and how to use it
Lesson 2 : Variables
Lesson 3 : Nesting
Lesson 4 : Modules
Lesson 5 : Operators
Lesson 6 : Mixins
ReCreate the Assignment Website
Lesson 1 : Introduction to JavaScript
Lesson 2 : Let's write some JavaScript code
Lesson 3 : JavaScript Variables
Lesson 4 : Arrays in JavaScript
Lesson 1 : Data types in JavaScript and Truthy/Falsy Values
Lesson 2 : Operators in JavaScript
Lesson 3 : if/else and switch statements
Lesson 1 : The LOOPS and how to use it to write less code
Lesson 2 : Data Type Methods
Lesson 3 : Functions, Function Expressions and IIFE
Lesson 4 : Using Function as parameters and return values and the Scope chain
Lesson 1 : What is Asynchronous JavaScript and Promises
Lesson 2 : An Example of Asynchronous JavaScript
Lesson 3 : Async-Await, API and Ajax
Lesson 4 : Making AJAX Calls with Fetch and Async-Await
Assignment : Create and tip calculator with the rules from below
Lesson 1 : Introduction to OOP
Lesson 2 : Objects in JavaScript
Lesson 3 : Creating Objects Function Constructors
Lesson 4 : The “this” keyword
Lesson 1 : What's new in ES6 JavaScript?
Lesson 2 : Arrow Functions and Default parameters
Lesson 3 : Arrays in ES6 and Map method and the Rest Parametre
Lesson 4 : Destructuring
Lesson 5 : Classes and Subclasses
Lesson 1 : What is DOM and how does it work?
Lesson 2 : Manipulating the DOM for the first time
Lesson 3 : How to select DOM elements in different ways
Lesson 4 : Changing styles of elements with DOM Manipulation
Lesson 1 : Handling Events
Lesson 2 : Special Methods for elements while manipulating the DOM
Lesson 3 : Good practices while handling events
Assignment : Create a small ludo game with JavaScript
Lesson 1 : Introduction to the terminal and CMD
Lesson 2 : Basic commands
Lesson 3 : What is version control
Lesson 4 : Git and Github
Lesson 5 : How to use Github fully
Lesson 1 : What is Node JS and NPM
Lesson 2 : Setuping Node JS
Lesson 3 : Basic package install and packages.json file uses
Lesson 4 : Why you need Node JS to learn modern JS development
Lesson 1 : What are JavaScript libraries and why you should learn React
Lesson 2 : Environment setup and Create-React-App
Lesson 3 : Understanding the files and the architecture of components
Lesson 4 : Class Vs Functional Components
Lesson 5 : Nested components
Lesson 1 : What is JSX and why it is important
Lesson 2 : How to write Raw JavaScript and CSS in a JSX file
Lesson 3 : What is props and how to use it
Lesson 4 : Prop Drilling and Props Destructuring
Lesson 5 : Lists in React and .map method and the spread operator
Assignment: Create a small React web application with more than 5 sections
Lesson 1 : State management
Lesson 2 : Component lifecycle methods
Lesson 3 : Styled Components
Lesson 4 : Module based CSS in a Component
Lesson 5 : Conditional Rendering
Lesson 5 : Conditional Rendering
Lesson 6 : PropTypes
Lesson 1 : Why React Hooks?
Lesson 2 : useState
Lesson 3 : General rule of hooks
Lesson 4 : useEffect and Short-Circuit Evaluation
Lesson 5 : React Router and how to use in a real web application
Lesson 1 : useMemo
Lesson 2 : useRef
Lesson 3 : useReducer
Lesson 4 : useContext and Context API
Lesson 5 : useCallback
CRUD Project in React JS
Lesson 1 : Handling forms with controlled input
Lesson 2 : Handling forms with useRef
Lesson 3 : Fetching Data From an API
Lesson 4 : Using Axios to get data from an API
Lesson 5 : Creating a custom React hook that fetches data from an API url
Lesson 6 : What are external libraries and why you should use them
Lesson 7 : Using tailwind CSS to create a small tours list application
Lesson 1 : Project Development
Lesson 1 : Project Development
Lesson 2 : Project Development
Lesson 3 : Project Development
Lesson 4 : Project Development
Lesson 5 : Project Development
Lesson 6 : Project Development
Lesson 7 : Project Development
Lesson 8 : Project Development
Lesson 9 : Project Development
Lesson 10 : Project Development
Lesson 1 : Project Development
Lesson 2 : Project Development
Lesson 3 : Project Development
Lesson 4 : Project Development
Lesson 5 : Project Development
Lesson 6 : Project Development
Lesson 7 : Project Development
Lesson 8 : Project Development
Live Code
Lesson 1 : Project Development
Lesson 2 : Project Development
Lesson 3 : Project Development
Lesson 4 : Project Development
Lesson 5 : Project Development
Lesson 6 : Project Development
Lesson 7 : Project Development
Lesson 8 : Project Development
Lesson 9 : Project Development
Lesson 10 : Project Development
Lesson 11 : Project Development
Lesson 12 : Project Development
Lesson 13 : Project Development
Lesson 14 : Project Development
Lesson 15 : Project Development
Assignment: Create your own brand new portfolio website from scratch using the topics of the whole course and share it.
Congratulations
