آموزش توسعه وب Full Stack با HTML ،CSS ،React و Node
در این دوره، توسعه وب یا HTML، CSS، Bootstrap 4، ES6 React و Node را یاد خواهید گرفت و با توسعه back-end و front-end آشنا می شوید.
- شروع کار با HTML
- نصب IDE
- ایجاد وب سایت با HTML
- مقدمه ی تگ های HTML و HEAD، BODY و HEADER
- HTML: لیست ها، پاراگراف ها و ظاهر متن
- HTML: نمایش داده ها با جداول
- HTML: تصاویر و فرم ها
- مقدمه CSS
- CSS چیست
- نحوه استفاده از CSS داخلی، خارجی و درون خطی
- CSS: عناصر، ID ها و انتخابگرهای کلاس
- CSS: رنگ ها
- CSS: پس زمینه و مرز ها
- CSS: ترکیب کننده ها
- CSS: گروه بندی
- CSS: خصوصیت
- CSS: فرمت و استایل متن
- CSS: فونت های گوگل
- CSS: تصاویر
- CSS: حاشیه گذاری و لایه بندی
- CSS: ردیف ها و ستون ها
- CSS پیشرفته: ایجاد و استایل وب سایت
- CSS: مقدمه ایجاد وب سایت
- CSS: ساختن Navbar
- CSS: ایجاد Navbar Mobile واکنش گرا- قسمت 1
- CSS: ایجاد Navbar Mobile واکنش گرا- قسمت 2
- CSS: ایجاد گروه فرم
- CSS: کار با iframes
- CSS: کار با تصاویر و سایه های جعبه
- CSS: کار با متن و فاصله تصویر
- CSS: ساخت footer
- یادگیری کد نویسی با جاوا اسکریپت
- جاوا اسکریپت: نظرات و نحوه اسکریپت های لینک
- جاوا اسکریپت: متغیرها و رشته ها
- جاوا اسکریپت: اعداد
- جاوا اسکریپت: اپراتورهای مقایسه
- جاوا اسکریپت: اپراتورهای منطقی
- جاوا اسکریپت: آرایه ها
- جاوا اسکریپت: حلقه ها
- جاوااسکریپت: توابع
- جاوا اسکریپت: اشیاء
- جاوا اسکریپت: اتصال ها
- کنترل نسخه با Git
- چگونه نسخه کنترل کار می کند
- مبانی ترمینال macOS
- مبانی Git
- راه اندازی Github در macOS
- Github در مقابل Bitbucket
- مخازن محلی و راه دور
- کار از طریق Git Merge Conflicts
- مقدمه Bootstrap 4
- Bootstrap 4 چیست
- دانلود Bootstrap 4
- بوت استرپ 4: راه اندازی پروژه
- بوت استرپ 4: مرور اجمالی از کامپوننت بوت استرپ
- بوت استرپ 4: درک کلاس های بوت استرپ
- بوت استرپ 4: استفاده از سیستم شبکه
- بوت استرپ 4: ایجاد یک پورتال ورودی
- کارت های بوت استرپ 4: ایجاد جعبه پورتال ورود به سیستم
- فرم های بوت استرپ 4: اضافه کردن زمینه های ورودی
- دکمه های بوت استرپ 4: افزودن نشانه در دکمه و و برچسب ها
- شبکه های بوت استرپ 4:سازگاری با قابلیت اتصال به تلفن همراه
- بوت استرپ 4: اسکیت یا Die وب سایت
- بوت استرپ 4: اسکیت یا Die معرفی
- بوت استرپ 4: کار با Navbars
- بوت استرپ 4: با استفاده از چرخ فلک ها
- بوت استرپ 4: ردیف ها و ستون ها را درج می کند
- بوت استرپ 4: Modals
- بوت استرپ 4: اضافه کردن تصاویر و دکمه ها
- بوت استرپ 4: ساخت پاورقی
- بوت استرپ 4: سایز مودال
- مقدمه Sass
- Sass چیست
- نحوه نصب Sass و کامپایل کردن آن به CSS
- ابزارهای مختلف برای کامپایل Sass
- ساختار Sass
- بخش های Sass: قوانین سبک های قابل نگهداری
- ایمپورت ها و متغیر های Sass: ایجاد یک Stylesheet مقیاس پذیر تمیز
- Mixin های Sass: صرفه جویی در زمان و سبک بازیافت
- خواص سبک را بین دیگر انتخاب کنندگان به اشتراک بگذارید
Learn web development with HTML, CSS, Bootstrap 4, ES6 React and Node
Welcome to the Ultimate Web Developer Bootcamp. This is your one-stop-shop to learn front-end AND back-end development.
Getting Started With HTML
In this video we you'll get an overview of everything you're going to learn to become a full-stack web developer. Learn front end to backend web development with HTML, CSS, Bootstrap 4, es6, Node, Express, Mongo & React.
Intro to Web Development
Where to get free live help
Installing an IDE
In this lesson you're going to build your very first Hello World website with HTML! You'll create your first .html file and preview it.
HTML: Building Your First Website
An introduction to the basic and foundational HTML tags
Intro to HTML, HEAD, BODY, and HEADER
An introduction to more advanced HTML tags
HTML: Lists, Paragraphs, and Text Styling
In this lesson you'll learn how to use HTML tables to display data. Simple rule when using tables - Use tables for tabular data, use other elements for presentation (designing layouts using css) like div, section, aside, nav etc . which provides meaning to the content they hold rather than using table for everything.
HTML: Displaying Data With Tables
In this lesson you'll learn how to use HTML tags for displaying images and tags to group form data.
HTML: Images & Forms
Exercise: Fan Site
Introduction to CSS
In this lesson we'll discuss what CSS is and how it has evolved over the years.
What is CSS?
In this lesson we'll discuss 3 different ways to set up CSS in your projects. A few CSS styles will be used that we haven't covered yet. No worries, we will cover how these style properties later in this section.
How to use Inline, Internal and External CSS
In this lesson we'll cover element, class and id selectors and how they're used to style HTML.
I'll be using TONS of different CSS styling rules we haven't covered. DON'T WORRY about that. We'll cover all of these styling rules later on in the lessons. Just pay attention to how to use the element, class and id selectors.
CSS: Element, ID & Class Selectors
In this lesson we'll cover the basics of using colors in CSS
In this lesson we'll cover the basics of using backgrounds and borders in CSS
CSS: Backgrounds & Borders
Quiz - CSS Basics
Exercise: CSS Colors & Backgrounds
In this lesson we'll demonstrate how to use the browser inspector tools for Chrome, Firefox and Safari. These tools will give you an "under the hood" look at how your HTML and CSS are working together. This is a crucial tool that you will use everyday in web development.
Using browser inspector tools
In this lesson we'll discuss how HTML parent and child element relationships work. This means having an element with additional elements nested within it. This is important to know so you can understand which CSS rules will apply to certain elements.
In this lesson we'll cover how you can group selectors and apply the same CSS declaration to multiple elements.
My favorite word haha. In this lesson we'll discuss how different HTML elements hold a different "point value". Different HTML selectors will take priority over other selectors. This is important to learn so you can understand how browsers decide which CSS rules to apply to your HTML.
Exercise: Extending your CSS skills
In this lesson you'll learn how to work with different CSS methods for styling text
CSS: Text Styling & Formatting
In this lesson you'll learn where to find a variety of fonts you can use in your HTML/CSS project. Just remember, using too many different fonts will make your website look "busy" and bring down the quality.
CSS: Google Fonts
In this lesson you'll learn a variety of ways you can work with images using CSS.
In this lesson you will learn the difference between CSS margin and padding and how and when to use them on HTML elements.
CSS: Padding & Margin
Using CSS you will create your own row and column classes to use in your HTML. Using Rows and Columns are the most powerful way to structure and place content on your website.
CSS: Rows & Columns
Quiz: Intermediate CSS
Exercise: Your first website using CSS!
Advanced CSS: Building and styling website
Get excited to build your first website using pure HTML and CSS!
CSS: Intro to building your first Website!
In this lesson you're going to learn how to build a navbar for a desktop view using raw HTML and CSS. You'll get a taste how powerful CSS is and how you can completely change HTML with it.
CSS: Building the Navbar
In this video you're going to learn how to make your navbar mobile compatible using CSS. You'll learn how to get all your nav links to hide on collapse of the viewport.
CSS: Making the Navbar Mobile Responsive - Part 1
CSS: Making the Navbar Mobile Responsive - Part 2
In this lesson we're going to build a section of our website using form groups and styling them with CSS.
CSS: Creating the Form Group
In this video you're going to learn how to use responsive iframes in your HTML which are used to embed video into your websites. We'll also add some addition tweaks to this using CSS.
CSS: Working with iframes
In this video you're going to take your CSS skills to a new level and use box shadows to create really cool effects on images. You can use these box shadows on almost anything! Just don't go crazy with them on your own websites ;)
CSS: Working with images and box shadows
In this video you're going to learn how to place text and images next to each other in your HTML. We'll also use CSS to help control the layout of it. This is going to be helpful to learn as you'll use this skill when you build your own websites.
CSS: Working with text and image spacing
Drum roll please....Using HTML and CSS lets build the last part of our website, the footer!
CSS: Building the footer
Exercise: Loops & Arrays
Percentage Calculator - Setting Up the Form
Percentage Calculator - Using Event Listeners
Percentage Calculator - Algorithm & Prevent Default
Exercise: Percentage Calculators
Version Control With Git
How Version Control Works
macOS Terminal Basics
Setting up Github on macOS
Github vs Bitbucket
Local & Remote Repositories
Working Through Git Merge Conflicts
Exercise: Pushing to Github
Introduction to Bootstrap 4
Bootstrap 4 is the most popular HTML, CSS, and JS framework in the world. It makes laying out websites a breeze!
What is Bootstrap 4?
In this video you're going to learn how to download Bootstrap 4
Downloading Bootstrap 4
In this video you're going to learn how to setup and use Bootstrap 4 in your project.
Bootstrap 4: Project Setup
Bootstrap 4 has so many pre-built HTML components which also include pre-defined styled classes! It's nice when someone does the work for you
Bootstrap 4: Overview of Bootstraps Components
In this video we dive through some of Bootstrap 4's pre-built classes so we can get a basic understanding how these classes are set up. This way, if we need to override any Bootstrap 4 classes we'll have a better understanding how to.
Bootstrap 4: Understanding Bootstraps Classes
Bootstrap 4: Using the Grid System
Bootstrap 4: Creating a Login Portal
In this video we are going to use a Bootstrap 4 card component for our Login Portal. We'll make some additional adjustments to it with CSS.
Bootstrap 4 Cards: Creating the Sign-in Portal Box
In this video we are going to use a Bootstrap 4 form group in our HTML for our input fields. We'll use some additional CSS to style them.
Bootstrap 4 Forms: Adding the input fields
Bootstrap 4 comes with some great button classes. In this video we're going to create the Sign In button and add some labels to our HTML.
Bootstrap 4 Buttons: Adding the Sign In button and Labels
The greatest part of Bootstrap 4! Bootstrap 4 has different column classes you can add which change the column width behavior on different sized viewports.
Bootstrap 4 Grids - Finishing Mobile Compatibility
Bootstrap 4: Skate or Die Website
In this video we are going to preview the awesome skate website we're going to build using Bootstrap 4 and CSS.
Bootstrap 4: Skate or Die Intro
In this video we are going to use a Bootstrap 4 navbar component in our HTML for the first building block of our website! You'll see how cool this is and how it works right out of the box on desktop and mobile. Wow I love Bootstrap 4
Bootstrap 4: Working with Navbars
A carousel? Are we going to the fair? Heck no! We're going to use a Bootstrap 4 carousel component to display an image slide in our HTML.
Bootstrap 4: Using Carousels
In this video we are going to learn how to nest Bootstrap 4 rows and columns so we can more precisely place content in HTML.
Bootstrap 4: Nesting rows and columns
In this video we are going to learn how to use a Bootstrap 4 Modal component. This is like a popup that can display on your HTML page. We'll create our first Modal and add some content to it.
Bootstrap 4: Modals
In this video we are going to use some Bootstrap 4 image and button classes to style......well....our images and buttons!
Bootstrap 4: Adding images and buttons
Did ya know....you can size your Bootstrap 4 modals!! Yup!
Bootstrap 4: Sizing Modals
In this video we're going to build the footer of our website using Bootstrap 4. Why do they call it a footer? Well....your feet are placed at the bottom of your body.... So it only makes sense that the footer is placed at the bottom of an HTML body, RIGHT?
Bootstrap 4: Building the Footer
In this video we're going to show you how to add some awesome icons to your Bootstrap 4 website! Skate or Die
Bootstrap 4: Working with Font Awesome Favicons
In this lesson we we get a quick idea how cool Sass is and what you should know before diving into this section.
Intro to Sass
Syntactically Awesome StyleSheet (SASS). The only word you really need to know in this abbreviation is AWESOME. In this lesson we will take a deeper dive into why Sass is one of the best CSS preprocessors.
What is Sass?
In this lesson we learn how to install Sass via the Terminal using a magic gem...Then we'll walk through a basic project and compile our Sass into CSS so the browser can read it.
How to install Sass and compile it to CSS
In this lesson we use some very basic Sass to build our FIRST website! Just follow along and we'll take a deeper dive into Sass in the upcoming videos.
Your FIRST Sass Website!
In this quiz you will be texted on Sass syntax and concepts
Are you Sassy?
In this lesson we'll learn 3 ways we can compile our Sass into CSS
Different tools to compile Sass
In this lesson we'll learn some simple guidelines to structure the hierarchy folder and file structure of our project to keep it clean and organized.
How to structure your Sass
In this lesson we'll learn how to use partials in Sass. Partials help us keep our Sass scalable and more manageable. Sass ignores these Sass partials when compiled into CSS and won't create additional, un-neededCSS files. We'll learn more about why this is important.
Sass Partials: Maintainable Styles Rules
In this lesson we'll learn how to create Variables in Sass to store all kinds of values. Variables are a core Sass feature and very useful. We'll also learn how to get our Sass Partials to import into a single Sass file which will act as an index for every Partial we're using.
Sass Variables and Imports: Create a clean Scalable Stylesheet
In this lesson we'll learn how to create a Sass Mixin and how we can recycle a single style rule and customize it for any element!
Sass Mixins: Save time & recycle styles
In this lesson we'll learn how to create an Extend and add set style rules to any other selectors
Sass Extends: Share style properties between other selectors
In this lesson we're going to take a look at the polished version of the Landing Page we'll be styling with Sass
Final Project: Intro to our Landing Page
In this lesson we'll set up the base Variables we'll be using in our Landing Page. We'll dive into the many values Variables can store.
Final Project: Setting up our Variables
In this lesson we're going to use some of our Variables to style the navbar
Final Project: Styling our Navbar with Sass
In this lesson we're going to use our Variables to style the banner container that will hold the intro content of our Landing Page.
Final Project: Creating the Banner Container
In this lesson we're going to style the content of our banner container using other Variables that we created.
Final Project: Adding Content to our Banner Container
In this lesson we're going to do some quick cleanup in our Sass files to make sure everything is working and compiling the right Variable values
Final Project: Doing some quick cleanup in our Sass files
In this lesson we're going to create a standard style rule that we can extend to other selector types for adding additional style rules
Final Project: Using the Extend method
In the lesson we're going to create a simple container with some images to separate the two sections we're creating in our Landing Page.
Final Project: Styling a section splitter with Sass
In this lesson we're going to create an advanced, insanely customizable mixin for our buttons.
Final Project: Using advanced Mixins
In this lesson we're going to create the last container of our Landing Page, add some content and style it with Sass
Final Project: Styling the next Container with Sass
In this lesson we're going to create the LAST component to our Landing Page. We'll be building a simple footer that's completely scalable using Sass. By this point we have finished our Landing Page and it's looking awesome! Feel free to make any needed style tweaks to make your Landing Page look perfect
Final Project: Finishing our Landing Page, Congrats!
2 More Sections