Thank you for this course! As a non-native English speaker I really appreciate your clear way of speaking and keeping to the main points. It made it really easy to understand.
i find your way of teaching so exciting and catching my FULL attention all the time: making mistakes, showing the results of the mistakes, explaining it, and then correcting it, and continue,.....and repeating again.....every mistakes is different and it just makes me learn SO MUCH.
This was a great course - very clear. I liked being stepped through creating Vue on an HTML file up through creating an app using Vue CLI. I also appreciated being shown how to debug using the Vue dev tools. For those about to watch this video - make sure you have this on your browser before you start!
This is the best video I have found for Vue 3. My company gives us full access to PluralSight and there's nothing even close to as good as this on there. WELL DONE.
I'm really enjoying the course so far! However, you have a typo in your chapter listings. Components are listed as starting at 1:29:20, but it should be 29:20...it's causing the following chapters to be out of sync. Thanks, and keep up the good work!
To fix the icon issue in the ProductCard.vue class in the html tag you will want set the tag just under to be :class="class_type". So it will look like: And then in the scripts in the data function you'll want to add a class_type variable using a template literal with the class you want. So data() looks like: data () { return { quantity: 0, class_type: `icofont-10x icofont-${this.product.icon}` } }
i'm newbie , i can see `labelp`, `typep` mean `labelProp`, `typeProp` but may i ask u what do the `labelt`, `typet` mean , do u mean `labelTemplate`, `typeTemplate` ? thank you
"Course Contents" can use a little work... Your time for the "Components" section should be 0:29:20 instead of 01:29:20 :) Also, the "Loops" segment isn't listed. It's located at 0:57:30.
If anyone in 2023 is having problems with gyp errors when running npm install, just check node version compatibility. For example node version 20+ works with node-sass 9.0
I'm glad you start of saying that Vue can be used to slowly upgrade older software without needing a complete rewrite from the start. I've looked at angular in the past and that was exactly what I was afraid of. I more or less picked Vue based on first impressions, but I wasn't sure about this. A whole rewrite would simply be too much. Your first examples putting Vue in script tags within HTML page takes a load of my mind too. I was getting the idea that having separate js files was the only way, not just good practice. Every other tutorial did it like that. Separating JS from the HTML by itself would also already be a huge overhaul, so I love knowing I can quite safely upgrade everything step by step and page by page even. Thanks. Now I know I picked the right tool.
@everyone, This tutorial structured very well using real world common daily facing problems. I recommend to watch and practice along the way. It is one of the great tutorial I have ever seen.
Jesus Christ. Tutorial is great, but omg what did I get myself into. As someone that has done plenty of coding on your typical C#, Swift, Java, Python, even some and CSS back in the day, is JS and those frameworks different or what...it literally feels like they had a CSS developer create a programming language...
Yeah all the modern web app frameworks are like this. If you were designing a web framework from scratch in a vacuum then it would look nothing like anything we have today. For starters, JavaScript is just not a good foundational design for large projects. These things have been bootstrapped for over 2 decodes to incrementally achieve purposes for which their original design was never intended. The various tooling and frameworks do work, and they are passable, but not what any architect would design if you could wipe the slate clean and start over.
I know what you mean. Was the online shop production painful or what? (In so many ways, even for a demo. I hope noone is ever structuring a cart system like this, but students copy their teachers....)
@@mensaswede4028 For a new developer who'd like to do his own freelance work one day and not be engulfed by the bloated JS frameworks arms-race, what would you suggest?
The issue at 2:05:36 occurs because the accumulator wasn't set to 0 to begin with! Object.keys and Object.values should return the object names and value in order!:)
Vue devs: Vue is very simple and straightforward and beginners friendly also them: Lemme show you how to make simple log in form *proceeds to building a nuclear power plant
I recently created a html component using vue for the company I work for (mainly for my benefit of actually getting vue experience). I was able to implement a template containing a html table (rows of data with a column for a item and a column for number of items) Further to this I implement a drop down which had an onchange Ajax event which changed the counts in the mentioned html table. I did this using vues v-for, v-if and value attributes. I was impressed with how easily you can populated the DOM with data for both tables and drop downs! Looking forward to next implementing a template with a vue component (ie a more complex interface) All of this I did without using the CLI as I have zero node experience
Simplest fix for the issue of 'product.icon' not being visible @1:49:18: Vue.js cannot dynamically bind class names directly within the template syntax like done in the video. Here, we are using binding which allows us to dynamically bind classes. And the array syntax ensures that both 'icofont-10x' and `icofont-${product.icon}` classes are applied to the element.
For people stuck installing devDependencies after cloning 'vue3-fcc-course-basic-product-cart-demo'... you need to update the dependency versions in package.json (eg. concurrently^5.1.0 -> concurrently^7.0.0) this can be automated with `npm i -g npm-check-updates` (needs sudo on unix-based systems) then by running npm-check-updates -u (INSIDE the 'vue3-fcc-course-basic-product-cart-demo' directory) then FINALLY.. npm install.
Hello everybody, I have trouble following in the template under components part at 31:00 .I did exactly what is in the video but it doesn't show in my browser. does the syntax changed because of the new version of vue?
This is awesome! Thank you. One of the best educational videos I have watched on youtube. The sites design is quite an eye sore though haha, gonna have to update that.
Awesome tutorial for new learner and appreciated. Many small useful things are used in between that one should learn about javascript before appearing an interview.Thanks May God bless you long and happy life.
Thank you very much, Gwen Faraday! This course taught me tons of Web Programming knowledge. Looks forward to watch more from you in the Internet 😊😊 Keep up teaching good!
If you're watching this later like myself, and are having issues running app demo, a core npm package requires python. Make sure you have python installed before running npm install.
Hey, when I try to run "npm start" at 1:18:00 I get the following error: product-and-cart@1.0.0 start > concurrently "npm run sass" "npm run serve" 'concurrently' is not recognized as an internal or external command, operable program or batch file. Anyone had the same issue ? It has to be something really simple.
سلام دوست عزیزم فوق العاده بود واقعا کیف کردم دمتون گرم امیدوارم بتونی هر چه زودتر در یوتوب به درامد بزرگی برسی ، با افتخار فالو شدید ممنون میشم فالومون کنید
Can someone please help, at 1:18:00 (product-cart) I try to generate node_modules folder with "npm install" command. The folder doesn't get created... so I can't even run the project. Does anyone have the same issue?
Getting the same issue yeah I check at the error log file, but all I see is errors saying that python isn't added to my path ... but it is so I'm also blocked ^^
@@Alexis-mt6ce Try to open it with LiveServer, it worked for me... In the next section everything works OK, I could build node_modules folder... I hope it works for you
@@gregaule7941 Hey, I posted another reply but it seems like it didn't get posted ^^ Well I've been able to fix my issue installing the dependencies by hand (with their latest version) 🤷
@@fariduzzamaansari1656 It's obvious: they all promise dev speed, and you end up writing HTML and inline handlers by hands all the way in components which are supposed to be reusable, but in reality they cannot be re-used across different project due to their complexity. State management - it's a pure nightmare as per those who know it inside out. It can be way simpler and faster.
Hi, if u dont mine please do videos on 1. Why / when/ what actually frontend/ backend devoloper need for software industry 2. What actually frontend developers do in realtime Scinorio Or when project assigned 3... Realtime frontend development tasks 4.. If project started what are the different tasks need to do--))by the frontend devoloper.. 5..Easy way to to crack any angular interviews with 3+ experience/10lack package ------) )) 6..Top 20 program's to cover entire angular syllabus.----)) 7...Top 10 angular concepts Please explain by taking one example/project 8...what type of skills (soft/technical)really need for industry 9... 4+ experience of frontend devoloper need to update what type of skills
Thanks very much, great course, I like the concept and how you highlighted problems that can be encountered using the Vue CDN but then solve them all in your CLI version of the course.
The course raises many questions (for me, as a complete noob). For example, getting data from a json file. Or work with the "add to cart" functionality. Here, in general, Gwen's actions resemble magic. With movement through the code (up and down), the use of variables (where is the index ?, where is the inventory ?, where is the product? And why is the inventory initially in the cycle, where there is already a product?) ... It's almost impossible to repeat this ( It's a pity...
This is where the backend comes into play, I would suggest looking at a video that explains the relationship between backend and frontend. Backend sends data (for example in JSON format) which is then processed by frontend.
Tried to follow this tutorial for a month or so (new to front end) but after more than a month I feel that it is all over the place after 30 minutes into the video. Hopefully I will try come back again. Bad thing about vue 3 is not many tutorial on youtube and too many react or angular tutorials
1:34:00 when you write the code for the sidebar toggle: you activate the toggle function inside the sidebar component. but this component doesnt know about the showsidebar variable and from ym perspective shouldnt be able to communicate with the main vue app. so how can it even work?
Thank you for this course! As a non-native English speaker I really appreciate your clear way of speaking and keeping to the main points. It made it really easy to understand.
i find your way of teaching so exciting and catching my FULL attention all the time: making mistakes, showing the results of the mistakes, explaining it, and then correcting it, and continue,.....and repeating again.....every mistakes is different and it just makes me learn SO MUCH.
I like how you didn't edit out mistakes you made. This only adds to the learning experience. Great job! Tnx!
This was a great course - very clear. I liked being stepped through creating Vue on an HTML file up through creating an app using Vue CLI. I also appreciated being shown how to debug using the Vue dev tools. For those about to watch this video - make sure you have this on your browser before you start!
Thanks for the tip!
This lengthy tutorial was relaxing and very pleasant to listen to as well as incredibly informative. Thank you so much for this.
for people wondering @2:45:25 that multi selection same tag name editing, the magic move is "ctrl+shift+l". you're welcome
If they were explaining things at school that way, you'd catch thing way quicker. Simple but profound. Helluva tutorial.
This is the best video I have found for Vue 3. My company gives us full access to PluralSight and there's nothing even close to as good as this on there. WELL DONE.
I'm really enjoying the course so far! However, you have a typo in your chapter listings. Components are listed as starting at 1:29:20, but it should be 29:20...it's causing the following chapters to be out of sync. Thanks, and keep up the good work!
To fix the icon issue in the ProductCard.vue class in the html tag you will want set the tag just under to be :class="class_type". So it will look like:
And then in the scripts in the data function you'll want to add a class_type variable using a template literal with the class you want. So data() looks like:
data () {
return {
quantity: 0,
class_type: `icofont-10x icofont-${this.product.icon}`
}
}
For beginners, the example 1:05:45 could be viewed as the following.
inputs:[
{
labelt: 'Email',
value: '',
typet: 'email'
},
{
labelt: 'Password',
value: '',
typet: 'password'
}
],
template: `{{labelp}} `,
props: ['labelp', 'typep', 'modelValue'],
i'm newbie , i can see `labelp`, `typep` mean `labelProp`, `typeProp` but may i ask u what do the `labelt`, `typet` mean , do u mean `labelTemplate`, `typeTemplate` ?
thank you
@@codingcat9052 think it's labeltext and typetext
This course is the best Vuejs course you can get all over the internet. thank you
Time stamp that I got from some random comment here on TH-cam.
Intro
⌨ (0:00:00) Introduction
⌨ (0:01:03) What is Vue.js?
⌨ (0:05:40) Vue 3 Setup
Basic usage
⌨ (0:12:17) Vue JS Directives
⌨ (0:19:48) Events and Methods
⌨ (0:29:20) Components
⌨ (0:39:27) Component Props
⌨ (0:57:30) Loops
⌨ (1:06:09) Lifecycle Hooks
Adding Vue.js to a static site
⌨ (1:14:30) App Demo
⌨ (1:26:45) Adding Items to Cart
⌨ (1:43:22) Dynamic Content
⌨ (2:15:54) Reuseable Components
Single Page Application with Vue CLI
⌨ (2:26:20) Vue CLI
⌨ (2:32:48) Vue Folder Structure
⌨ (2:43:58) Top Nav
⌨ (2:48:45) Styling with SASS
⌨ (3:00:25) Application Pages
⌨ (3:06:07) Sidebar
⌨ (3:20:46) Adding Items to Cart
⌨ (3:24:46) Finishing Up (Card component)
Your voice is so soothing when you speak. I learned a lot from this tutorial and you earned a follower. Thank you!
1:18:04 if it is your first time working with npm, do not forget to first type npm install
to be able to run the npm start
Thank you a lot!!! I was lost for a while, but your comment saved me.
thanks
This could be the best explanation style I ever saw in 20 years.
In just 30 minutes of video I was able to learn so much in Vue, thanks.
"Course Contents" can use a little work... Your time for the "Components" section should be 0:29:20 instead of 01:29:20 :) Also, the "Loops" segment isn't listed. It's located at 0:57:30.
If anyone in 2023 is having problems with gyp errors when running npm install, just check node version compatibility. For example node version 20+ works with node-sass 9.0
I really appreciate Gwen's calm voice and her straightforward style. Very good tutorial, I really enjoyed it! :)
I'm glad you start of saying that Vue can be used to slowly upgrade older software without needing a complete rewrite from the start. I've looked at angular in the past and that was exactly what I was afraid of. I more or less picked Vue based on first impressions, but I wasn't sure about this. A whole rewrite would simply be too much. Your first examples putting Vue in script tags within HTML page takes a load of my mind too. I was getting the idea that having separate js files was the only way, not just good practice. Every other tutorial did it like that. Separating JS from the HTML by itself would also already be a huge overhaul, so I love knowing I can quite safely upgrade everything step by step and page by page even. Thanks. Now I know I picked the right tool.
This is sure premium content.. and so thankful that its free. 🙏🙏🙏🙏
@everyone, This tutorial structured very well using real world common daily facing problems. I recommend to watch and practice along the way. It is one of the great tutorial I have ever seen.
This is a great tutorial! Well paced
Jesus Christ. Tutorial is great, but omg what did I get myself into. As someone that has done plenty of coding on your typical C#, Swift, Java, Python, even some and CSS back in the day, is JS and those frameworks different or what...it literally feels like they had a CSS developer create a programming language...
Yeah all the modern web app frameworks are like this. If you were designing a web framework from scratch in a vacuum then it would look nothing like anything we have today. For starters, JavaScript is just not a good foundational design for large projects. These things have been bootstrapped for over 2 decodes to incrementally achieve purposes for which their original design was never intended. The various tooling and frameworks do work, and they are passable, but not what any architect would design if you could wipe the slate clean and start over.
I know what you mean. Was the online shop production painful or what? (In so many ways, even for a demo. I hope noone is ever structuring a cart system like this, but students copy their teachers....)
@@mensaswede4028 For a new developer who'd like to do his own freelance work one day and not be engulfed by the bloated JS frameworks arms-race, what would you suggest?
@@mourad505 Suck it up and learn JS. It’s all there is.
Feel the same
OMG! what I was waiting for from the previous version is here
I just completed the course. Thank you very much. It was excellent!
The issue at 2:05:36 occurs because the accumulator wasn't set to 0 to begin with! Object.keys and Object.values should return the object names and value in order!:)
solution???
Grazie.
Vue devs: Vue is very simple and straightforward and beginners friendly
also them: Lemme show you how to make simple log in form
*proceeds to building a nuclear power plant
In Angular we are building schematics to land people on Mars just for your first name in the input field.
@@webinatic216 LMAO. i agree with both comments
😆 🤣 😂
A great Course in a great way which at first seemed to me to be sloppy, but with perseverance everything became clear. Thanks a lot ! ♥
Oh my god, I am waiting for this kind of Vue Tutorial.
And You uploaded it.
God bless You ❤️
I solved the products icon problem this way
You're welcome
I recently created a html component using vue for the company I work for (mainly for my benefit of actually getting vue experience).
I was able to implement a template containing a html table (rows of data with a column for a item and a column for number of items)
Further to this I implement a drop down which had an onchange Ajax event which changed the counts in the mentioned html table.
I did this using vues v-for, v-if and value attributes.
I was impressed with how easily you can populated the DOM with data for both tables and drop downs!
Looking forward to next implementing a template with a vue component (ie a more complex interface)
All of this I did without using the CLI as I have zero node experience
Vue is unbelievable! One of the best things that I've learned. Thank you so much for this!
this is best and will completed it and start learning vuejs, thank you for this perfect course.
Oh, Gwendolyn is back!
At last
Simplest fix for the issue of 'product.icon' not being visible @1:49:18:
Vue.js cannot dynamically bind class names directly within the template syntax like done in the video. Here, we are using binding which allows us to dynamically bind classes. And the array syntax ensures that both 'icofont-10x' and `icofont-${product.icon}` classes are applied to the element.
I like the way you teach programming, thanks for the effort you put on this video
Amazing, thank you very much, Gwen. It is exactly what fits in my noobish experience!
For people stuck installing devDependencies after cloning 'vue3-fcc-course-basic-product-cart-demo'...
you need to update the dependency versions in package.json (eg. concurrently^5.1.0 -> concurrently^7.0.0)
this can be automated with `npm i -g npm-check-updates` (needs sudo on unix-based systems)
then by running npm-check-updates -u (INSIDE the 'vue3-fcc-course-basic-product-cart-demo' directory)
then FINALLY.. npm install.
Thanks a lot! Helped me.
Helped me too, many thanks
the looks so awesome.... love your recordings to such an extent!
Nicely structured and presented, easy to understand.. pleasant voice. I really enjoyed it.
I'm really thanks for your teaching. You are the best!!! from South Korea.
I like when you did an array of objects to create a form
Faraday....which bring me back to high school, physics class..
45:06 emailLabel and passwordLabel used interchangable here by mistake.
49:59 fixed; re-arranged.
(for those who are following this tutorial)
Hello everybody, I have trouble following in the template under components part at 31:00 .I did exactly what is in the video but it doesn't show in my browser. does the syntax changed because of the new version of vue?
I'll never get tired or vuejs or Gwen videos!
Thanks :)
¡Gracias!
Great video! It is the best learning video I've found yet. Thanks for that great content.
Fantastic course thank you! This was my first delve into using Vue and you explained everything very well 🔥
thank you very much for this tutorial!!!! always grateful for your free education!
This is awesome! Thank you. One of the best educational videos I have watched on youtube. The sites design is quite an eye sore though haha, gonna have to update that.
And I was just reading the Vue js docs for project structure when this popped up
Great course.
Enjoyed it very much to the end!
Waiting for more!!!
Great course!! Easy to understand. Thank you! I will check out other video courses on your channel!!
Awesome tutorial for new learner and appreciated. Many small useful things are used in between that one should learn about javascript before appearing an interview.Thanks May God bless you long and happy life.
That’s very cool you can continue the board vs a computer. ❤thanks for sharing.
Best vue_js tutorial for beginners
Very nice but if you would have included the Vuetify then it would be much better.😃. Thanks for making this incredible video.
Gwen has such an ASMR voice, sooooo relaxing
Thank you very much, Gwen Faraday! This course taught me tons of Web Programming knowledge. Looks forward to watch more from you in the Internet 😊😊 Keep up teaching good!
If you're watching this later like myself, and are having issues running app demo, a core npm package requires python. Make sure you have python installed before running npm install.
Hey, when I try to run "npm start" at 1:18:00 I get the following error:
product-and-cart@1.0.0 start
> concurrently "npm run sass" "npm run serve"
'concurrently' is not recognized as an internal or external command,
operable program or batch file.
Anyone had the same issue ? It has to be something really simple.
You need to run the following in the command line: npm install concurrently
Thanks!
👆👆All thanks for👆👆🔝he helped me achieved my own python 3 programming course certificate and am very glad to have my own certificate thanks so much 🥰
The time stamp for Components is incorrect. It should be 0:29:20 instead of 1:29:20.
سلام دوست عزیزم فوق العاده بود واقعا کیف کردم دمتون گرم امیدوارم بتونی هر چه زودتر در یوتوب به درامد بزرگی برسی ، با افتخار فالو شدید ممنون میشم فالومون کنید
Are the labels for the inputs backward? You have passwordLabel for the email field and emailLabel for the password field. at about 45:30.
I was waiting for an updated version.
Can someone please help, at 1:18:00 (product-cart) I try to generate node_modules folder with "npm install" command. The folder doesn't get created... so I can't even run the project. Does anyone have the same issue?
Getting the same issue yeah
I check at the error log file, but all I see is errors saying that python isn't added to my path ... but it is so I'm also blocked ^^
@@Alexis-mt6ce Try to open it with LiveServer, it worked for me... In the next section everything works OK, I could build node_modules folder... I hope it works for you
@@gregaule7941 Hey, I posted another reply but it seems like it didn't get posted ^^ Well I've been able to fix my issue installing the dependencies by hand (with their latest version) 🤷
@@Alexis-mt6ce Great!
I could installed it doing this npm install -g npm@"6". But I don't like it anyway, many warnings and mistakes remain
I'm glad I stumbled upon this tutorial. You speak very calm and without loads of filler sentences.
Thank you 😄.
I started vueJS just a week ago,,, and this will be a great help, thanks team 🙌🏼❤️
Waste of time.
@@aammssaamm why is it a waste of time?
@@EPrimeify Same hardcoded HTML like Angular and React.
@@aammssaamm Can you offer a bit more insight to your opinion?
@@fariduzzamaansari1656 It's obvious: they all promise dev speed, and you end up writing HTML and inline handlers by hands all the way in components which are supposed to be reusable, but in reality they cannot be re-used across different project due to their complexity. State management - it's a pure nightmare as per those who know it inside out. It can be way simpler and faster.
Hi, if u dont mine please do videos on
1. Why / when/ what actually frontend/ backend devoloper need for software industry
2. What actually frontend developers do in realtime Scinorio Or when project assigned
3... Realtime frontend development tasks
4.. If project started what are the different tasks need to do--))by the frontend devoloper..
5..Easy way to to crack any angular interviews with 3+ experience/10lack package ------) ))
6..Top 20 program's to cover entire angular syllabus.----))
7...Top 10 angular concepts
Please explain by taking one example/project
8...what type of skills (soft/technical)really need for industry
9... 4+ experience of frontend devoloper need to update what type of skills
you can find answers for most of these if you do some research so i encourage you to do so!
cheers!
Great course!
It really helps to get the basic Vue knowledge.
Hi everybody, why at (2:12:14) we have to rename removeItem in remove() and why is not a probleme if we use NPM in the place of CDN ? Thanks
Thanks very much, great course, I like the concept and how you highlighted problems that can be encountered using the Vue CDN but then solve them all in your CLI version of the course.
44:38 without regsitering my component "custom-input" it still works!
Very good tutorial. First step for learning vue js is done now. Will create a similar app myself
This tutorial is awesome!
Great teacher!
Awesome introduction. Thanks a lot
Great at the end much learning gracios!!
Thank you for the invaluable information that you shared with us
Hi relly good full Vue js course. I liked it
these are the types of videos that play overnight when i leave my youtube on
i have never conciously watched this channel in my life but im always an hour through one of their videos when i wake up its so interesting
The course raises many questions (for me, as a complete noob).
For example, getting data from a json file.
Or work with the "add to cart" functionality. Here, in general, Gwen's actions resemble magic. With movement through the code (up and down), the use of variables (where is the index ?, where is the inventory ?, where is the product? And why is the inventory initially in the cycle, where there is already a product?) ...
It's almost impossible to repeat this ( It's a pity...
This is where the backend comes into play, I would suggest looking at a video that explains the relationship between backend and frontend. Backend sends data (for example in JSON format) which is then processed by frontend.
Nice one. This course is enough for a review for me. I have been working with nuxt for a while I just needed a review with vue way of things
Great tutorial, very helpful, thank you!
wow. def gonna watch it over weekend
Thank you so much Gwen!! Great course!
What a clear tutorial! Many thanks for this.
Great Content Miss , Thanks you so much 😍
Coding may not be fun but learning how to code is fun and immersive
Great course thank you so much!!!! Appreciate for this great opportunity to learn vue cli
Tried to follow this tutorial for a month or so (new to front end) but after more than a month I feel that it is all over the place after 30 minutes into the video. Hopefully I will try come back again. Bad thing about vue 3 is not many tutorial on youtube and too many react or angular tutorials
thanks for your tutorial that make me helpful!!!
Hello, is this really a beginner course? seems a bit advanced. I am a total newbie. Do you have any courses that are for newbies?
if you find this advanced, it should learn HTML, CSS, JS course first before diving into Vue
1:34:00 when you write the code for the sidebar toggle: you activate the toggle function inside the sidebar component. but this component doesnt know about the showsidebar variable and from ym perspective shouldnt be able to communicate with the main vue app. so how can it even work?
I'm using the latest vue version as of May 2022. And at 17:42, the blue box didn't inherit the height and width from the first box.
I didn't find any cart(static) html code over your github repo you given in the description box ,Mam. Could you please update the repo? TIA.