Become A Web Developer From Scratch, Step By Step Guide
Published 8/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 11.63 GB | Duration: 21h 10m
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.
Our Live Cams
Reply With Quote