Become A Web Developer From Scratch, Step By Step Guide

If you wish to see what Web Development means and try it, what can you build with and how - you are in the right place.

What you'll learn

Web concepts every web developer must know

Learn how to create your own webpages and web applications

Learn how to reproduce any parts of a web page

You can decide if you wish to become a Developer or you wish other Programming languages

Requirements

No programming experience needed. You will learn everything you know step by step.

Description

We will learn the basic html & css concepts we need to know, we will discover the most important parts of web development, and will understand how they work, why they behave in that way. And after that we will be able to reproduce any parts of a web page.I'll explain some css layouts (css layout, flexbox, grid layout), concepts so you could organize and create any layout or skeleton pages. Also if you wish to know better what are css selectors - I'll touch this topic as well.You will be building 2 projects, where you will apply the knowledge we learn in the course.We will build step by step both projects and you should be able to type the code I'm typing and see the results.Pure JavaScript is vital so we have to take more time to understand how JS works, what are key concepts in this programming language. I'll explain all JS concepts you have to know to be able to start any web project and also understand others code in the future. Working with data and understand and create flows in our apoplications will be a big part of this course.I'll teach you how to use VSCode as IDE Editor and how to save your code on GitHub. We will use basic git commands every programmer should know.If you are a Backend developer that want to learn more about how to create your own web interfaces, this course could help you!Few JavaScript keywords that I'll touch: Array helpers, JSON, DOM, Events, callback, Promises, pure functions

Overview

Section 1: Introduction

Lecture 1 About this course

Lecture 2 Demo time

Section 2: HTML Concepts we must know

Lecture 3 The need of html TAGS

Lecture 4 Lists

Lecture 5 Tables

Lecture 6 Prettier - Code formatter

Lecture 7 Code indent & troubleshooting

Lecture 8 Images, Links and Forms

Lecture 9 More about Forms and type of inputs

Lecture 10 Inspect elements from web sites

Lecture 11 Attributes & Styling elements in HTML

Section 3: CSS Concepts we must know

Lecture 12 HTML Standard document and Browser Sync

Lecture 13 CSS Selectors

Lecture 14 Menu with Css Layout

Lecture 15 Inspect css from other sites

Lecture 16 Flexbox Layout

Lecture 17 Apply Flexbox Layout in our page

Lecture 18 Grid Layout example

Lecture 19 Grid Layout for Rubik’s Cube Face

Lecture 20 Final css for our site

Section 4: JS Fundamentals

Lecture 21 DHTML Demo

Lecture 22 Variables

Lecture 23 Objects Variables

Lecture 24 Functions

Lecture 25 JSON objects with Functions inside

Lecture 26 JS EventListeners (interact with our menu)

Section 5: Git (Version Control System)

Lecture 27 Save our code on github.com

Lecture 28 Make changes and use git to track those changes

Lecture 29 Make our site public (live)

Section 6: Create elements using js (DHTML)

Lecture 30 Using global variables

Lecture 31 Add event listeners on parent elements

Lecture 32 querySelector with attributes

Lecture 33 Using Array.map to create skills list

Lecture 34 Use array with json objects inside

Lecture 35 Making requests to load data (Fetch)

Lecture 36 Sorting skills based on number of endorsements

Lecture 37 Recap

Lecture 38 Basic Es5 vs Es6

Section 7: Basic JS Quiz & Homework

Lecture 39 Basic string functions

Lecture 40 Basic JS Quiz

Lecture 41 JSON Intro Quiz

Section 8: Starting new app and make it fully functional

Lecture 42 Create new git repository

Lecture 43 Initialize project to use Prettier

Lecture 44 Init project to use npm

Lecture 45 Configure project to use webpack

Lecture 46 Change the way we import js and css

Lecture 47 Create HTML and CSS structure (layout)

Lecture 48 Create static table and make it look nice

Lecture 49 Load teams with js from teams.json

Lecture 50 Render items using string template

Lecture 51 Create toolbar layout

Lecture 52 Load data from node-API

Lecture 53 Static form for create team

Lecture 54 Update docs how to start the project

Lecture 55 Create team request

Lecture 56 Wait until request is done then reload the page

Lecture 57 Delete team request

Lecture 58 Update team request (array.find)

Lecture 59 Fixing missing parts of edit flow

Lecture 60 Search teams (using array.filter)

Section 9: More Javascript concepts

Lecture 61 Logical NOT (!) and ternary operator

Lecture 62 Pure functions

Lecture 63 Improve user experience for create team flow

Lecture 64 Improve user experience for delete team flow

Lecture 65 Object reference and mutations

Lecture 66 Improve renderTeams function (array.every)

Lecture 67 Spread operator

Lecture 68 Spread on json objects

Lecture 69 Destructuring assignment

Lecture 70 Rest parameter

Lecture 71 Fetch and promises

Lecture 72 Using promises with async & await

Lecture 73 Import and use lodash/debounce

Lecture 74 Code split in multiple js files (utilities, middleware)

Lecture 75 CSS Loading Mask

Lecture 76 Use loading mask in all places

Lecture 77 Select multiple teams (static parts)

Lecture 78 Select/unselect all teams

Lecture 79 Remove selected teams (final part)

Lecture 80 Update readme & cleanups

Lecture 81 Homework

Take this course if you're willing to become a web developer, but not only web, as we will learn basic programming skills,If you are not decided if you wish to go to any live courses, or even University this course could help you.,If you are already an Java/C# and wish to learn Web, this course will help you grow.