Description

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.

What you will learn form this course:

  • HTML5
  • Semantic HTML
  • CSS3
  • Flexbox
  • Animations and keyframes
  • CSS variables
  • SASS
  • Complete website projects

Curriculum

  • Chapter 00: Welcome

    2:9m
    • C0.01 - Welcome to Coderstrust

      Video
    • C0.02 - Welcome to Digital Jobs Albania

      Video
    • C0.03: Welcome to your learning journey!

      Resource
    • C0.04: Coderstrust & You

      Resource
    • C0.05: Setting goals

      Resource
    • C0.06: How it works: Assignments

      Resource
    • C0.07: Join our Community

      Resource
  • Chapter 01: Introduction

    13:19m
    • Welcome to the Course

      Video
    • Lesson 2 : How to get the most out of this course

      Video
    • Lesson 3 : Let's get the setup done

      Video
  • Chapter 02: HTML Basics

    107:52m
    • Lesson 1 : The document structure and doctype

      Video
    • Lesson 2 : What are HTML tags ?

      Video
    • Lesson 3 : Tags for handling text

      Video
    • Lesson 4 : HTML Lists

      Video
    • Lesson 5 : Link tags

      Video
    • Lesson 6 : HTML Tables

      Video
    • Lesson 7 : Image tags

      Video
    • Lesson 8 : Conventional and Layout HTML tags

      Video
  • Chapter 03: Advanced HTML

    77:56m
    • Lesson 1 : Form tags

      Video
    • Lesson 2 : What is Semantic HTML

      Video
    • Lesson 3 : Semantic tags (header, footer, section, article)

      Video
    • Lesson 4 : Semantic tags (aside, main, time)

      Video
    • Lesson 5 : HTML5 video/audio

      Video
    • Lesson 6 : HTML meta tags

      Video
    • Lesson 7 : HTML special characters

      Video
  • Chapter 04: Creating a full website structure in HTML

    0:0m
    • Create a small website structure where you will display information about yourself

      Resource
  • Chapter 05: Fundamentals of CSS

    72:41m
    • Lesson 1 : What is CSS and how CSS works

      Video
    • Lesson 2 : Ways to select an element to style

      Video
    • Lesson 3 : Font and Text styling

      Video
    • Lesson 4 : The Box Model

      Video
    • Lesson 5 : Changing colors and backgrounds

      Video
  • Chapter 06: Advanced CSS

    93:13m
    • Lesson 1 : CSS layout properties

      Video
    • Lesson 2 : Advance CSS properties

      Video
    • Lesson 3 : Pseudo Properties

      Video
    • Lesson 4 : Transitions and Transform

      Video
  • Chapter 07: Responsive Design

    58:9m
    • Lesson 1 : CSS Flexbox and it’s uses

      Video
    • Lesson 2 : Media Queries and Breakpoints

      Video
    • Lesson 3 : Making grids with Flexbox to create a full website layout

      Video
  • Chapter 08: Lets Style our HTML website structure

    0:0m
    • Style the website structure that you build in the previous (Chapter 4) assignment

      Resource
  • Chapter 09: Fundamentals of Bootstrap 5

    80:11m
    • Lesson 1 : What is Bootstrap why to use it

      Video
    • Lesson 2 : How to setup Bootstrap for a project

      Video
    • Lesson 3 : The Bootstrap Grid

      Video
    • Lesson 4 : Breakpoints

      Video
    • Lesson 5 : Rows and Columns

      Video
    • Lesson 6 : Bootstrap Components and Elements

      Video
  • Chapter 10: Advance Bootstrap 5

    72:14m
    • Lesson 1 : Bootstrap Utilities

      Video
    • Lesson 2 : Forms

      Video
    • Lesson 3 : Helpers

      Video
  • Chapter 11: Dart SASS

    65:31m
    • Lesson 1 : What is SASS and how to use it

      Video
    • Lesson 2 : Variables

      Video
    • Lesson 3 : Nesting

      Video
    • Lesson 4 : Modules

      Video
    • Lesson 5 : Operators

      Video
    • Lesson 6 : Mixins

      Video
  • Chapter 12: Lets create a Responsive Landing with Bootstrap and SASS

    0:0m
    • ReCreate the Assignment Website

      Resource
  • Chapter 13: Fundamentals of Javascript and JS syntax

    36:28m
    • Lesson 1 : Introduction to JavaScript

      Video
    • Lesson 2 : Let's write some JavaScript code

      Video
    • Lesson 3 : JavaScript Variables

      Video
    • Lesson 4 : Arrays in JavaScript

      Video
  • Chapter 14: Conditionals, Data Types and Operators

    50:22m
    • Lesson 1 : Data types in JavaScript and Truthy/Falsy Values

      Video
    • Lesson 2 : Operators in JavaScript

      Video
    • Lesson 3 : if/else and switch statements

      Video
  • Chapter 15: Functions, Loops, Methods of Data Types

    80:39m
    • Lesson 1 : The LOOPS and how to use it to write less code

      Video
    • Lesson 2 : Data Type Methods

      Video
    • Lesson 3 : Functions, Function Expressions and IIFE

      Video
    • Lesson 4 : Using Function as parameters and return values and the Scope chain

      Video
    • Lesson 5 : Closures

      Video
  • Chapter 16: Asynchronous and Advance JavaScript

    47:19m
    • Lesson 1 : What is Asynchronous JavaScript and Promises

      Video
    • Lesson 2 : An Example of Asynchronous JavaScript

      Video
    • Lesson 3 : Async-Await, API and Ajax

      Video
    • Lesson 4 : Making AJAX Calls with Fetch and Async-Await

      Video
    • Assignment : Create and tip calculator with the rules from below

      Resource
  • Chapter 17: Object Oriented Programming with JavaScript

    43:42m
    • Lesson 1 : Introduction to OOP

      Video
    • Lesson 2 : Objects in JavaScript

      Video
    • Lesson 3 : Creating Objects Function Constructors

      Video
    • Lesson 4 : The “this” keyword

      Video
  • Chapter 18: ES6 and Modern JavaScript

    51:16m
    • Lesson 1 : What's new in ES6 JavaScript?

      Video
    • Lesson 2 : Arrow Functions and Default parameters

      Video
    • Lesson 3 : Arrays in ES6 and Map method and the Rest Parametre

      Video
    • Lesson 4 : Destructuring

      Video
    • Lesson 5 : Classes and Subclasses

      Video
  • Chapter 19: Document Object Model (DOM) Manipulation with JavaScript

    37:54m
    • Lesson 1 : What is DOM and how does it work?

      Video
    • Lesson 2 : Manipulating the DOM for the first time

      Video
    • Lesson 3 : How to select DOM elements in different ways

      Video
    • Lesson 4 : Changing styles of elements with DOM Manipulation

      Video
  • Chapter 20: The missing pieces of DOM and handling Events

    51:3m
    • Lesson 1 : Handling Events

      Video
    • Lesson 2 : Special Methods for elements while manipulating the DOM

      Video
    • Lesson 3 : Good practices while handling events

      Video
    • Assignment : Create a small ludo game with JavaScript

      Resource
  • Chapter 21: Version Control and the Terminal

    66:19m
    • Lesson 1 : Introduction to the terminal and CMD

      Video
    • Lesson 2 : Basic commands

      Video
    • Lesson 3 : What is version control

      Video
    • Lesson 4 : Git and Github

      Video
    • Lesson 5 : How to use Github fully

      Video
  • Chapter 22: Introduction to Node JS and NPM

    32:4m
    • Lesson 1 : What is Node JS and NPM

      Video
    • Lesson 2 : Setuping Node JS

      Video
    • Lesson 3 : Basic package install and packages.json file uses

      Video
    • Lesson 4 : Why you need Node JS to learn modern JS development

      Video
  • Chapter 23: Fundamentals of React

    53:41m
    • Lesson 1 : What are JavaScript libraries and why you should learn React

      Video
    • Lesson 2 : Environment setup and Create-React-App

      Video
    • Lesson 3 : Understanding the files and the architecture of components

      Video
    • Lesson 4 : Class Vs Functional Components

      Video
    • Lesson 5 : Nested components

      Video
  • Chapter 24: JSX, Props and Lists

    55:16m
    • Lesson 1 : What is JSX and why it is important

      Video
    • Lesson 2 : How to write Raw JavaScript and CSS in a JSX file

      Video
    • Lesson 3 : What is props and how to use it

      Video
    • Lesson 4 : Prop Drilling and Props Destructuring

      Video
    • Lesson 5 : Lists in React and .map method and the spread operator

      Video
    • Assignment: Create a small React web application with more than 5 sections

      Resource
  • Chapter 25: Advance React Topics

    75:29m
    • Lesson 1 : State management

      Video
    • Lesson 2 : Component lifecycle methods

      Video
    • Lesson 3 : Styled Components

      Video
    • Lesson 4 : Module based CSS in a Component

      Video
    • Lesson 5 : Conditional Rendering

      Video
    • Lesson 6 : PropTypes

      Video
  • Chapter 26: Basic React Hooks and Router

    51:25m
    • Lesson 1 : Why React Hooks?

      Video
    • Lesson 2 : useState

      Video
    • Lesson 3 : General rule of hooks

      Video
    • Lesson 4 : useEffect and Short-Circuit Evaluation

      Video
    • Lesson 5 : React Router and how to use in a real web application

      Video
  • Chapter 27: Advance React Hooks

    73:3m
    • Lesson 1 : useMemo

      Video
    • Lesson 2 : useRef

      Video
    • Lesson 3 : useReducer

      Video
    • Lesson 4 : useContext and Context API

      Video
    • Lesson 5 : useCallback

      Video
  • Chapter 28: Forms, API’s, External UI Libraries and Custom React Hooks

    91:32m
    • Lesson 1 : Handling forms with controlled input

      Video
    • Lesson 2 : Handling forms with useRef

      Video
    • Lesson 3 : Fetching Data From an API

      Video
    • Lesson 4 : Using Axios to get data from an API

      Video
    • Lesson 5 : Creating a custom React hook that fetches data from an API url

      Video
    • Lesson 6 : What are external libraries and why you should use them

      Video
    • Lesson 7 : Using tailwind CSS to create a small tours list application

      Video
  • Chapter 29: Project - A Markdown Blog

    35:9m
    • Lesson 1 : Project Development

      Video
  • Chapter 30: Project - An app that finds github users using the Github API

    192:7m
    • Lesson 1 : Project Development

      Video
    • Lesson 2 : Project Development

      Video
    • Lesson 3 : Project Development

      Video
    • Lesson 4 : Project Development

      Video
    • Lesson 5 : Project Development

      Video
    • Lesson 6 : Project Development

      Video
    • Lesson 7 : Project Development

      Video
    • Lesson 8 : Project Development

      Video
    • Lesson 9 : Project Development

      Video
    • Lesson 10 : Project Development

      Video
  • Chapter 31: Project - A blog website where all blog data is benign pulled from an API

    125:22m
    • Lesson 1 : Project Development

      Video
    • Lesson 2 : Project Development

      Video
    • Lesson 3 : Project Development

      Video
    • Lesson 4 : Project Development

      Video
    • Lesson 5 : Project Development

      Video
    • Lesson 6 : Project Development

      Video
    • Lesson 7 : Project Development

      Video
    • Lesson 8 : Project Development

      Video
  • Chapter 32: Project - An Ecommerce Project using Material UI

    323:24m
    • Lesson 1 : Project Development

      Video
    • Lesson 2 : Project Development

      Video
    • Lesson 3 : Project Development

      Video
    • Lesson 4 : Project Development

      Video
    • Lesson 5 : Project Development

      Video
    • Lesson 6 : Project Development

      Video
    • Lesson 7 : Project Development

      Video
    • Lesson 8 : Project Development

      Video
    • Lesson 9 : Project Development

      Video
    • Lesson 10 : Project Development

      Video
    • Lesson 11 : Project Development

      Video
    • Lesson 12 : Project Development

      Video
    • Lesson 13 : Project Development

      Video
    • Lesson 14 : Project Development

      Video
    • Lesson 15 : Project Development

      Video
  • Chapter 33: Final Course Assignment

    0:0m
    • Assignment: Create your own brand new portfolio website from scratch using the topics of the whole course and share it.

      Resource
  • Conclusion

    0:0m
    • Congratulations

      Resource