Web Development - Internal - Bhutan Batch 2

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

C0.06: How it works: Quiz

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

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

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