Building a website FROM SCRATCH using Vue.js, HTML/CSS, and Netlify

[@KylieYYing]

Code: github.com/kying18/website-v3 Subscribe for more tutorials and cool projects: kzbin.info

[@thomasjackson6289]

You have a real talent for simplicity. Really helped

[@angelicad.1647]

I've been looking for a video like this, simple, straight forward and short. I've coded before, and I needed a refresher. This was nice, thank yoU!

[@kaituo1803]

I like the straight-to-the-point teaching-style sooo much!!

[@ferirogasperon2169]

Great video for someone who doesn't have any knowledge about Vue.js but need to build a Vue.js website for 1 week, after spending 3 days learn the wrong way. Thank you.

[@justintrackstar1]

Thank you so much for this! Just recently got my college degree in Computer Engineering, and I've been working as a Full-Stack developer at a start-up for about 8 months. Truth be told, I constantly feel like I have no idea what I'm doing. I've been doing photography on the side, and I think you just ignited a fire in me! This is a really cool idea to combine my creative talents with my programming knowledge. You have a new subscriber :)

[@KeithGalli]

Great video Kylie!! 😊

[@KylieYYing]

Thank you!! 😁

[@Ihavetoreturnsomevideotapes]

SIMP

[@KeithGalli]

@@Ihavetoreturnsomevideotapes 👉👈

[@crazycomedy1228]

ive nevr done this before but how do you use the find in project feature

[@OzDeaDMeaT]

You are a wizard Kylie!

[@JunaidAli480]

Amazing Kylie... Unbelievable you just covered in 8:36. Can you please tell about routing in VueJs.

[@sumityadav8181]

I feel for these types of just 1 or 2 page site simple plain HTML and js is more than enough to even involve any framework.

[@emilyhalva5604]

Awesome video, thank you!

[@JHero]

love your straightforward tutorial thank you

[@nevinkuser9892]

I really love your pictures you used inside your name. They show the versatility of your character. I also love netlify. I've been using it for my advisory business for the last two years and let me tell you... Their contact forms have gotten me many customers. Why? Because they actually work! Overall from someone with a real $100k+ a year business, netlify checks all the boxes.

[@Christopher-side_dude-Murican]

Kylie Do you box? 🥊, I saw the stationary ground bag thing in the back.

[@asjpeace4052]

finally a video made by a women!

[@KylieYYing]

❤️ maybe I should do a video about women in tech!!! I’m all about female empowerment

[@I3uzzzzzz]

woman*

[@Christopher-side_dude-Murican]

@@KylieYYingbut the other girls are not as legit as you…

[@akotechonline]

I'm thinking of quitting Vue JS before now, but you drag my attention back.

[@octaviouskennedy5129]

I'm about to start a final project with my group at my University. We are using vue.js but not sure where to start until I saw your youtube. What was the app you used to put your pictures in so you can import them over later?

[@laughing-out-loudhd996]

When KZbin recommends me your video , you know i can't Ignore it.. Ur awsome.!.. Luv ya

[@rachidihadien9145]

what program do you have used to design the letters of your name ?

[@rojasjahiker]

Cool! Keep doing videos like this! 👍🏼👍🏼

[@KylieYYing]

:) let me know if you have any particular requests!

[@nzezonto]

What did the HTML said to CSS at the party?

[@wepsar]

LETS GO~!

[@jeswer9]

You seem like such a fun person :)

[@meghaaggarwal8508]

Which software you were using for design part? Definitely not Adobe photoshop right?

[@KylieYYing]

It was either Sketch or Figma. Figma is free!

[@flyingcat3170]

Its not figma

[@waynehwang]

Coolest tutorial video I've ever seen~ Great works~

[@joshuaharmon3369]

What could be better than to get me on the right track, and with an upbeat style. And like that shirt.

[@raitasorin]

I just subscribed because i love what you have done

[@attilaszep3316]

Cool project! THX

[@webstroymaster]

Hello Kylie! Why is there Vue?

[@caroldanvers265]

Cool video! I will definitely give Netlify a try. Thanks!

[@KylieYYing]

Thanks!

[@byedwardleung]

simple, straight to the point, thank you!

[@arkadeepkashyap2180]

You could have just used HTML and CSS for this website. Why vue? I am new and currently learning all basic things . Just asking ! Nice video though

[@KylieYYing]

Vuejs is a front end framework on top of which you can use HTML and CSS: stackoverflow.blog/2020/02/03/is-it-time-for-a-front-end-framework/ You're totally right that (check out the advantages and disadvantages section of that article). Vue may be overkill for a simple one-page site, but the reason why I used Vue was because I anticipate my site growing in complexity as I decide to work on it more. Instead of redoing the whole thing and moving it to a framework later, I just start with it! Also - there are components that you can install using npm and you can integrate these into your Vue code too. In retrospect, instead of trying to format my own header, I shouldve just used a pre-made one like this www.npmjs.com/package/vue-navigation-bar

[@briankgarland]

@@KylieYYing Yeah, but you didn't use Vue for anything. Shouldve at least explained why.

[@LukeryaPereprygova]

not sure why vue had to be used here

[@tommykindle9774]

Nice video but it did pain me to not see you using semantic HTML

[@KylieYYing]

Haha I am a self-taught UI/UX programmer. I didn’t realize semantic HTML was something people actually used! Thank you for letting me know :)

[@tommykindle9774]

Awesome job nonetheless but yes when a potential employer goes over it Semantic HTML is big for accessibility same with alt descriptions on images and aria labels. Since the new laws companies can be sued for their websites not being accessible so it is something they look for.

[@KylieYYing]

Gotcha. I’ll look into reading more on it!

[@tommykindle9774]

I really love the design though.. I need to learn sketch and design it is my biggest hold up on getting apps going lol.

[@KylieYYing]

If you’re looking for a free alternative, figma is pretty good! I can also offer some input on wireframes if you DM me on insta or twitter :)

[@ibrahimaboudamous7624]

When i change HelloWorld.vue to home.vue, i keep getting Failed to compile. ./src/components/HelloWorld.vue Module build failed (from ./node_modules/eslint-loader/index.js):

[@KylieYYing]

You may want to see if there’s anything named “HelloWord” left over in any of your files (command+shift+F on Mac for VSCode)

[@nai5639]

Which editor you used?

[@KylieYYing]

VS code

[@nai5639]

@@KylieYYing thanks ! 😇😇

[@jordanrobertson7543]

Hey Kylie, great video, thanks for making it. When trying to install Vue, I keep getting "not recognized as an internal or external command". I've tried on my PC & Mac, do you know why? How do I rectify this? TIA!!

[@KylieYYing]

Hey! I'm not sure what the issue is :/ Sounds like terminal just can't find it.. you should check your $PATH variable maybe to see if your installation is on there? Google is probably your best friend here

[@jordanrobertson7543]

@@KylieYYing Hi, me again! Thanks...Google worked, I figured it out...I needed to download node.js. Now another question: I was able to follow all the steps you did (hooray!). Now, what is the best way to update the website? For example, when I update the code & save, it doesn't automatically update the webpage. How do I get the website to reflect the changes?

[@saepuloh475]

you give me something new. Thanks Kylie!

[@alexisvazquez7687]

your channel is really good! I'd like see more about your content.

[@KylieYYing]

Thank you!! That means a lot to me :) What type of content would like to see more of?

[@nirmalyanmohanarangan4591]

@@KylieYYing I really enjoy these small coding/project style vlogs. Your content is concise, informative and fun to watch at the same time. The way you carry the video is different from traditional tutorials. No matter what the topic or content is, I am going to watch your videos for your distinctive style. You do you!

[@KylieYYing]

Wow thank you. It’s really incredible to hear such feedback!! I will keep creating :) If you ever have suggestions, ideas, etc, I read all my comments and DMs, so feel free to drop a note!

[@nirmalyanmohanarangan4591]

@@KylieYYing Sure, will let you know!¡ :)

[@amyapostol511]

Loved this video! Haha

[@samajdar4544]

love it ♥️

[@ahmedutuber]

I did with you step by step but when make to change helloworld to home cannot make it home page ........ confuse high

[@lupuandreea99]

hi, how did you import the vue site to vs?

[@akifmertturk3657]

Great, thanx ! I am beginner to web dev as a undergrad comp. scie. and thanks for this kind of tutorials.

[@marcosdiegodedeu2196]

Great video!!!

[@padaku_parul]

Simple and easy to understand LOVE IT!!!! Thank you soooooo much

[@LoquendoElHistoriador]

¡Hiciste el esfuerzo de poner subtítulos!!! Wowwwww Muchas gracias Kylie...

[@mayurravindra9433]

Another awesome tutorial ❣

[@ozaiproduction3450]

Very helpful! Thank you

[@christopherhealey8599]

Never heard of netlify before today so thanks for that. Vue however (as another has said) really was completely irrelevant and unnecessary for the video, shame because that was why i watched it in the first place. Anyways keep up the great work, I enjoyed the style of how you did your video, threw u a like.

[@KylieYYing]

Haha yes for what I did in the video. But I used vue because I know I want to continue adding to the website later on and vue will be handy then. Maybe I’ll do another tutorial on that later on. Thanks!

[@adielatari]

@@KylieYYing Is there going to be another video of the website soon? When i 'vue create my-project' in the terminal there is a option to select from, can you explain about them? thank you

[@mythl.l.l9397]

That's really hard to understand especiallty at 6:55

[@satishkumasi2326]

Best

[@LanceSanity]

I have the same punching bag!

[@jhonatancantero8197]

Very good video, I liked it, greetings from Mexico

[@KylieYYing]

Thanks!

[@TheLuksas]

VUE?

[@yhnt7976]

Definitely earned my sub... Thank you😌

[@curinpython3827]

Waw,thank alot

[@bijayadevelop]

I spent a while trying to figure out how you managed to manipulate those pictures into alphabets before realising I'm an idiot. :) Thanks for Netlify

[@KylieYYing]

:)

[@kithenry]

Is this self taught... Or....

[@SomeOneLikeYouTube]

Thanks

[@codigodesenior3995]

+1 sub, nice video ;)

[@shared-knowledge]

Whelp this was not what i was expecting I'm kind of disappointed actually in the lack information was given about Vue.

[@terraptr1448]

Tho we all love watching ur face very much I'd like more time with code 😁

[@KylieYYing]

Thank you for the feedback. I’ve gotten better since making this video, so stay tuned

[@codigodesenior3995]

pls more, i want ideias ;-;

[@briankgarland]

Why did you bother with Vue? You didn't use it in any way. This was just simple html and css.

[@UCcdTp7XpCkVLkaRCsDcifFg]

realy cute

[@kirandev]

This is so hard

[@thengakola6217]

U should increase ur voice.....

[@KylieYYing]

It’s an issue with my mic :( I want to get a better one

[@raitasorin]

hey cutie you are very good in code i Love it

[@laughing-out-loudhd996]

Ur too fast... N Hot ?.. U gotta chill 😄😄😉

[@mohammedaljahwari1165]

I can't stop laughing you're not American. Do not wear clothes which include the American flag on it Anyway, thank you for tutorial ❤️ I'm from Asia🇴🇲

[@D0F4M1N3]

Tutorial about nothing)