Front-End Architecture | Setting Up & Organizing your Website Projects | Coding Tutorial

[@sonoftroy8572]

This is what makes importing files so powerful, no more clutter and you can expand your code, very nice

[@JesseShowalter]

I need to do an updated version of this, it hasn't changed much but it has changed slightly

[@VictorVictory-te2ij]

I was at another video and hey presto, this video caught my attention. I decided to watch this till the end and...way to go Sir! Deepest thanks for the enlightenment!

[@stewheart]

The theory of this is excellent. In reality when working with someone with this level of organisation, they left and we spent hours troubleshooting an issue with relative paths that ate away at getting the job done. If you work in a chaotic place with lots of developers and little time for communicating - sometimes something stupidly simple just comes out working better. Having said that with proper communication the structure here is great. All depends on how much legacy work you're dealing with. I enjoyed your vid

[@JesseShowalter]

Glad you got value from the video

[@Nobody2day553]

This seems infinitely more convoluted and much more of a pain in every way than the old school way.

[@JesseShowalter]

It’s great to know how to approach things in more than one way, you can find what works and fits you best. Thanks for the feedback.

[@thesouthband]

Seriously. I've done front end for nearly 24 years. Nowadays, it takes 5 times as many people, 12 times as long to make something that looks and acts the same way EVERYONE else's looks and acts. Creativity in FED is dead. Still, gotta learn the new way that fixes all those problems I never had.

[@thesouthband]

Not to sound unappreciative, Jesse. Your videos are top-notch.

[@truejohnsolo]

I wasn't sure how to find exactly what I was looking for, but when I watched this video, it was exactly the information I was looking for. Thank you so much!

[@JesseShowalter]

That's great! thanks for watching.

[@Traceless]

This was a good watch, I’ve been depending on Yeoman to scaffold my projects but you do sometimes inherit some unnecessary modules you then need to clean out. Setting up your own makes sense

[@JesseShowalter]

Thanks so much for the support!

[@vishnupanda7927]

you r one of my biggest inspirations and one of the only reasons i got into photography thank you so much

[@JesseShowalter]

+Vishnu Panda I am not really a photographer but am glad I could help in some way 👍🏼

[@vishnupanda7927]

i cnat believe that you do not think youre a photographer ----you r amazing with photography tools and have you ever watched one of your own vlogs their amazingggggggggggggg

[@jeancarlosdacampo1882]

your english is perfect dude. I'm Brazilian and I understood every single word, nice job.

[@comstocktheprophet9144]

???? he's native dude

[@doniamustafa8667]

Yes I'm also Egyption and his accent is soooo clear I understand him

[@seand6906]

Nice top to bottom 1-7. Another developer can take over without any problems.

[@JesseShowalter]

Thanks

[@akilahlittlejohn4940]

I am certain this channel will grow, great content thanks !!!

[@JesseShowalter]

+Akilah Littlejohn thank you so much, let me know what topics I can cover to be help to you 👍🏼👍🏼🤘🏻

[@zigggen]

I love your videos. You are inspiration to many web developers. Thnks !!!!

[@JesseShowalter]

Wow thanks! That’s such a humbling compliment ☺️

[@eggyfresh40]

Make more videos Jesse! HAHAHA! Weird things is, every time I watched your videos, it seems to motivate me and bring the spirit back up to start developing.Anyways, more videos Jesse! Peace from Singapore!

[@JesseShowalter]

I have been focusing a lot on design content but in 2018 I am gonna be bringing back the code content as well.

[@Noobmaster69_bro]

its tat simple...great explanation mate..i was grilled by the seniors during frontend arch interviews... y people show this much showoff for such simple things...you can learn it in an hour.... great work..keep going...

[@prabhakarmishra2182]

You really explained very well, you are awesome

[@JesseShowalter]

Thanks so much, Prabhakar! Have a great day!

[@rogerantonell9658]

I architecture projects similar, also using codekit, burbon, neat, but i use pug for html, and sass instead of scss, look more minimalist and easy at my sight. I look and follow to many front end developers and designers of KZbin, and I could say that your content is really good, I like your style of teaching, and you have potential as youtube in long term if you persist, keep going. PS: you remember me Travis neilson from devtips, quality stuff, greetings from spain🤙

[@JesseShowalter]

+Roger Antonell that might be the nicest thing anyone has ever said to me. Travis is such a cool guy. Thanks so much for the encouragement. I'll have to check out pug I like things to be minimal as well. Aloha from Hawaii 🏝

[@alexmachin1785]

Ill be honest i reworked my workflow after seeing this lol

[@JesseShowalter]

Thanks for watching, glad it helped

[@alexmachin1785]

After many versions i have come up this for my node js projects - github.com/AlexMachin1997/Portfolio

[@pedeonsistemas8468]

I reworked my workflow long ago by using angular hehe.

[@FinallyFreelancing]

Wow, i thought i was a good front-end Developer. After this video, i wrote down my new architecture for the relaunch I am about to do. Thank you Jesse!

[@JesseShowalter]

Thanks so much 🤘🏻

[@kilobitz8639]

Everything is super duper awesome geez

[@JesseShowalter]

I'm a pretty positive guy, you'll hear that a lot

[@abskhairoun]

This helped in my college graduation project. Thanks a lot man

[@JesseShowalter]

Great to hear!

[@mariaklachko]

Thank you! So interesting to see how you set up you dev environment.

[@JesseShowalter]

I really like see how others set things up too, thanks for watching👍🏼

[@rufatzeynalli5538]

Man, such a brilliant explanation. Thanks your for share these kind of golden tips :)

[@JesseShowalter]

Your so welcome 👍🏼

[@6Sambora]

Discovered this YT channel today. Great educational content. You sir, have just earn a subscriber :)

[@JesseShowalter]

Thanks for trusting me with your time 👍

[@joannademecka9989]

Great video! Generally we feel those things, but it's nice to have a tutorial like this, grouping all of the best practices in one place😄

[@JesseShowalter]

+Joanna Demecka thanks for checking it out... let me know what topics you would like to see in future videos.

[@joannademecka9989]

Jesse Showalter It would be great to see weekly vlogs as a front end when you work on some projects. I'm interested in js frameworks, so I would like to watch videos where you work with react or angular😉 I like your style😉 I found your channel, because I was looking for reviews for sketch alternatives. I enjoy watching Charli Marie TV channel for fun and motivation, but I think I'm going to stick to yours too. I was looking for front end channel and here it is😉 p.s. I love DevTips as well🤣😎

[@suryoadinugroho2398]

I love this video, very helpful. Thank you

[@JesseShowalter]

Glad you enjoyed it

[@calochCN]

Your way is reasonable. I am currently using the visual studio code to develop projects. But this architecture makes sense. Good.

[@JesseShowalter]

+Shuntao Chen glad the video related to you. I'll check out visual code studio

[@kimhughes1147]

kudos mate - really helpful

[@scjohnson]

very helpful. thank you

[@JesseShowalter]

Awesome! 👍🏼

[@untorn7046]

can you do an update video on your structure if anything has changed?

[@jsjuris8922]

+1

[@imanejarmouni7958]

Hi Jesse, thank you so much for this awesome video! There are a couple of things that I didn't understand: 1) When you're building a website that has 20 or more pages, do you just keep adding content to the "modules" folder, or do you create a separate scss file for every page? Thank you again for your great content!

[@JesseShowalter]

I try to make templates not pages, hopefully out of those 20 pages some pages are similar and can be used as a template.

[@imanejarmouni7958]

@@JesseShowalter Thank you for your answer, I can see your approach. I've never thought about it that way but it makes sense, creating 2 or more templates and adapting them to the content is more efficient than building 20 different pages. Have a nice day!

[@shallomsoyombo8849]

We perfectionists!

[@JesseShowalter]

👍🏼

[@floris3766]

I think the template structure you use could be improved to be more flexible. If you use modifier classes (like 'module--modifier') then you can simply place the same modules inside the different template files but use different modifier classes to make them unique to the context of that template. This way you have all the logic inside of the modules themselves and you save yourself a lot of time writing extra template specific SASS-code. Hope this helps.

[@JesseShowalter]

Do you have a link to a tutorial of someone using this method. I want to study up 👍🏼

[@floris3766]

Unfortunately not. It is something I learning in the real world.

[@martiananomaly]

9:04 isn't components a better word for the folder instead of modules? Great video btw.

[@kiroshiruru7261]

Awesome Bro . Thank you

[@JesseShowalter]

Your welcome

[@vasileboncalo1]

useful.. thanks👍

[@johnlusumpa9025]

Whats the difference between the "scripts" in build and "scripts" in src?

[@rybcopper4]

Auto Subsribed ✓ Thanks Jesse

[@JesseShowalter]

You're so welcome

[@bmm52824]

Subbed! Thanks Man!

[@JesseShowalter]

Awesome!

[@ogaltmayer]

Not gonna lie, this made me wanna learn scss. I'd be super down to watch an up to date version of this. Also, where do you put all the responsive stuff? I used to have a fully dedicated css files for this, but I'm surprised you don't do that this way.

[@aammssaamm]

This is not a frontend architecture, this is just a folder structure. Architucture is about data, but your code is manually written and cannot be considered data.

[@anant8884]

HELP !! Jesse there are serious number of people who are not able to use gulp or grunt since they've been updated because of the changes in gulpfile.js and loss of support because older version of NodeJS don't support gulp 3. Please make a video about setting up gulp for sass, bootstrap, browser-sync, font-awesome, lightbox and such stuff... much needed

[@JesseShowalter]

Oh man! OK Ill look into it and make a video asap 👍🏼

[@anant8884]

@@JesseShowalter thanks man. much appreciate

[@hifaothman5278]

@@JesseShowalter I think you may get big search volume because I look around and no one cover this issue!! with best wishes :)

[@le-hu]

hey Jesse, anything has changed about that great structure? also begginer question - where's the HTML !?! how does that work wirhout html file :D

[@le-hu]

i see it's been almost 3 years since publishing the video

[@JesseShowalter]

lots has changed since then

[@piromaniaco3579]

Hi Jesse, thanks a lot for all the material you consistently provide to us, can't be more grateful, you have helped so much this last months. I was wondering how to manage gitignore on this architechture. Do you ignore the build directory? Thank you!

[@JesseShowalter]

Yes I Do

[@nagendrakumarsr8910]

Thank you so much!

[@al691683]

Nice touch

[@techcanyon411]

I am a web developer, what are the essential software that could help me to develop multiple website theme within a few minutes.

[@JesseShowalter]

Webflow

[@J3osu]

Can you do a video with your gulpfile for this setup or provide a link in github?

[@JesseShowalter]

I should definitely do a series on gulp and get more in depth

[@jsjuris8922]

@@JesseShowalter Any link to series?

[@Ioannnify]

Hi, would be great if you can show us how to build a simple project using all gulp and Sass architecture or can you recommend where we can learn all this by building a simple project. Thanks!

[@JesseShowalter]

I am currently working on a series about designing and developing a project from start to finish. Stay tuned.

[@KlassA-ti9bt]

check out these channels kzbin.info/door/XQC_GB5hG6PkzIhSMZ-hWA kzbin.info/door/29ju8bIPH5as8OGnQzwJyA

[@random-null-pointer]

where do those HTML files come from?

[@random-null-pointer]

Just saw his video on kzbin.info/www/bejne/mYnFg3Sahb2jiKM

[@andreykrasnov7851]

I like your tattoos! :)

[@JesseShowalter]

Thanks! 🤘

[@ozankurucu6261]

thank you a lot

[@brandongault5785]

great video Jesse! Where did you get your logo from? Did you make it or have someone design it?

[@JesseShowalter]

I make my own logos even though I am not a logo designer specifically. It's me whether or not it's good or bad 👍🏼

[@brandongault5785]

Wow that's impressive! How do you design them? With a specific software?

[@21agdmnm]

love the set up and idea, but i wouldn`t break the CSS into so many pieces, especially when using SASS with nesting i don`t see the point and it might piss some people off if you work in a team lol but for a solo project - it`s spot on!

[@JesseShowalter]

Hey, thanks so much for the feedback. Have a good day🤙

[@sanjarmirakhmedov4016]

You deserve a lot more subs )

[@JesseShowalter]

+Sanjar Mirakhmedov thanks 👍🏼

[@based.creative]

Is there a way to macro or save this folder architecture set up as some sort of template rather than just keeping a dummy base folder around?

[@JesseShowalter]

You can create a Yeoman scaffold and generate from there

[@based.creative]

Jesse Showalter Thanks, this video cleared up so much ambiguity for on how these technologies work together, much appreciated

[@KlassA-ti9bt]

Thanks a lot Jesse, that seems so organized, is there anyway we can download a sample file structure like yours?

[@JesseShowalter]

I will post on GitHub and link soon.

[@RonaldJayBuayan]

can wait for soon

[@tristanfalcon9912]

Great video man, as a beginner in this field it can be overwhelming to work with all of the different technologies available. This video really gave me insight as to how to keep all my resources organized.

[@JesseShowalter]

Great to hear

[@aurelianspodarec2629]

Can we see the code on github or somewhere?

[@JesseShowalter]

I am in the process of updating my structure, I will place a link here when I'm done 👍

[@jsjuris8922]

@@JesseShowalter Link to updated structure?

[@cortarelva]

how do you structure your html in your sites? Do you separate all the elements like nav, hero footer into different modules and if so how do you stack all these elements into a web page?

[@codetheworld6721]

why you using max-width instead of min-width in media queries ( mobile first design)

[@whoami-so2hy]

very nice video, thx u for sharing

[@JesseShowalter]

no problemo 👍

[@TheNamesJT]

I kinda understand how hes using sass; he has main.scss inside src/styles and its compiled into main.css which goes inside src/styles/.sass-cache folder - What i don't understand is why main.css is also inside the build/styles how does that work having 2 main.css in 2 places? Unless hes specifying multiple locations in the Json file for the compiled scss location to be....

[@brandonpowell2732]

Do you have on github? I would like to use it to change the way my setup for my Front-END Architecture. So, I can start build my on github.

[@alexmachin1785]

you could clone mine, it uses node js and gulp :) - github.com/AlexMachin1997/Portfolio

[@JesseShowalter]

I have recently updated this workflow and will be doing a whole series on front end dev with the setup included.

[@jsjuris8922]

@@JesseShowalter link to series?

[@supermario1982171]

Love your channel so glad I found it. Can you please do a project from start to finish..... Would love to see it. Like how dev tips did

[@JesseShowalter]

+Mario Rossi I have been waiting to do one of these. Any thoughts on what type of project you would like to see from start to finish?

[@supermario1982171]

Travis on dev tips did a personal website project. to honest bud, anything would be a great way to learn.

[@TheR0yalBeast]

Great video. Try not to say Like so much!

[@themstarpodcast]

Hey man, firstly I'd like to say - great videos! One quick q though... In terms of optimisation, do you think it's a bad idea to have all your js compiled in to one file? Im a full-stack dev, and I do use gulp - although I sometimes find it more necessary to inline some of my js plugins/scripts to specific pages for speed optimisation - otherwise there's a load of unnecessary request being made if the plugins aren't being used on that page? What are your thoughts?

[@JesseShowalter]

It kind of depends on how you build your projects in my opinion. I ask myself questions like "if this isn't necessary on every page is it necessary at all?" or "is there a standard i should have compiled in one script and trade speed for simplicity?" It's all in context of what you need. I say a little inline javascript never hurt anybody, especially if your just doing small stuff.

[@prithatasmin9966]

Can i have the gitHub link of this file ?

[@JesseShowalter]

I’m updated this right now, check back laterz!!

[@FaizanShaikh-k3r]

can u please make a vd that u have build this structure from sctrch so we know should we do that actually i searching this since last 3 days but i cant find that

[@rianthea]

Hi, can i organize this with my google drive folder? So i can sync with other computers automatically ?

[@JesseShowalter]

Use Github, that's what it's for

[@RD-jr8nv]

Awesome!

[@teeisfocused7027]

How are you? I was wondering how does that pre-pending work with the JavaScript. what are the steps to get all of the separate JavaScript files down to one? Thank you.

[@teeisfocused7027]

I figured it out. You used code-kit.

[@JesseShowalter]

Awesome! sorry if that wasn't clear.

[@rylanharper]

Hey Jesse great video it was a HUGE help! I have now structured my files similar to yours, although there are some very minor differences. I have two questions as kind of a beginner dev.. so do you move everything over to the build folder using a git push method? Also, when I move an html file into the build folder, it no longer reads the js in the src folder, is this where gulp will come into play to process the js into a file within the the build folder (similar to sass)? Edit: I had to "/" out of the folder to src to link to js lol my mistake! Only the first question now I am wondering about

[@JesseShowalter]

Whatever your using as a task runner (gulp, grunt, codekit) you wanna set it up so that when you “build” your project I.E. save and process... that your files are processed and funneled from your Source folder into you Build folder. I’m gonna post a video on Saturday about this just for you man. I’ve been meaning to follow up and do some more pre processing and front end videos.

[@rylanharper]

Jesse Showalter thanks for the reply! I will definitely check out the video when posted!

[@mdrezaulislam6846]

Pls give the github link of this project

[@JesseShowalter]

I am updating soon

[@RonaldJayBuayan]

what do you think about webpack vs grunt? which do you prefer.. im a frontend developer and in the dilemma which i should use...?

[@JesseShowalter]

It really depends on the project, I use gulp or grunt because I do much more front-end web development and not app development.

[@RonaldJayBuayan]

wowww.. i never thought that webpack is mainly for app development(mobile app)? mann i was trying to make it work on a php website which isn't going well.

[@ibrahims5457]

I think this is amazing...but if you can, please make a video on making a real project where you set it up using this kind of architecture, so we can relate to it more easily... apart from that, amazing content..🔥🔥🔥

[@JesseShowalter]

Thanks for the suggestion, I’ll see what I can do 🤘

[@sherwankh9101]

great video

[@petme3122]

in your process are you using codekit or you are using gulp or something similar to that? Because I am thinking codekit is a bit limited compared to gulp or no?

[@JesseShowalter]

It can be limiting if you are working in a team (everyone would have to had paid for a Codekit license) it does everything that gulp can do pretty much without the heavy setup and maintenance. I use Codekit when working alone and other tools when working in a team.

[@Oswee]

Pretty much the same there. Only i am now thinking to decouple layout and theming. To have theming separated. As well i started to work wit custom elements and... i could write styles in shadow dom but it not so easy so while developing components i think it would good to have _components or elements directory.

[@JesseShowalter]

I would love to see a write up on how you are doing this.

[@learnthenew3119]

Great looking of your structure design. @LearnTheNew

[@JesseShowalter]

Glad it was helpful

[@DilpreetSingh-gh9ss]

Bro which editor u r using in this vdo

[@JesseShowalter]

Atom but I am playing with VS Code lately too

[@damianroiz128]

I wonder how all these many files can affect download time, wouldn't it run faster by compiling some of those files together?

[@ankitroy5868]

ofc it is compiled as a single css sheet by the sass compiler

[@martiananomaly]

All the scss files are compiled into a single css file so...

[@jon4torr3s]

Hello there nice job, do you have a workflow webpack or gulp ? can you share me you youtube video link, thanks

[@JesseShowalter]

kzbin.info/www/bejne/mYnFg3Sahb2jiKM

[@MiguelGonzalez-eb9lj]

I have a question can html files be saved on a flash drive?

[@JesseShowalter]

yes 👍

[@anhmuhamath]

Hi Jesse, i’m trying to accomplish a new career path and would like to go direction front end developer / UX designer. Are these 2 jobs near to each other and are the necessary skills for both similar?

[@JesseShowalter]

They are near enough that you could pursue both and it would make sense 👍🏼

[@wajeehaqudoos8951]

Can You Please do a project from start to finish of Sports Management System . It will be very helpful for me☺

[@JesseShowalter]

Sports management?

[@wajeehaqudoos8951]

@@JesseShowalter Yes Sports Event Management System

[@brunoabreu590]

Video Very good

[@JesseShowalter]

Thanks 👍

[@benedictlang7431]

Hey, i have a question. Thanks for the vid. How would the compiler deal with CSS custom properties (--color-primary)? in my case, i want a darkmode switch that changes variables, so ass sass variables will be compiled and not changeable with js on the compiled site, i wonder if it will just compile like this: {--clr-primary: blue;} $color-prim: var(--clr-primary); .darkmode { --clr-primary: white; } => will this color will be changable on the compiled site when i add this class to my elements?

[@julianhecker944]

I seriously want the repositoryyyy

[@marocmedia2651]

Hello there, First of all thank you for you helpful video!Can you explain what are steps or conception to structure a website project.For example if i have a project website ideas, what step should i do before start coding, should i determine wich class i should use...Thank you in advance!

[@JesseShowalter]

I am going to make a video on this soon, stay tuned.

[@digwillhachi]

this is why I often use wordpress lol.

[@mtzrmzia]

and what if i want to use Bootstrap in my project ..where should i include the node_modules folder or how can i move the bootstrap folder in "vendor" folder? i checked this documentation but it's not clear at all for me sass-guidelin.es/#vendors-folder Could you do a boilerplate that has that structure? i'll be so grateful

[@JesseShowalter]

I'm not a big bootstrap guy so I can't give you a good recommendation

[@vaibhavudande9837]

thanku

[@rob2906]

Boom

[@JesseShowalter]

💥💥💥

[@RonWaller]

Where are the "source" HTML file or files?

[@kunalmathur4890]

wow

[@JesseShowalter]

🔥

[@ck_ink]

Is there a typo on the wall art? "Impossible" maybe?

[@JesseShowalter]

A funny story about that including a party and a "guest artist"

[@franciscoicarocs]

N-E-A-T

[@yafetbefkadu6334]

I like this video but I got lost :)

[@JesseShowalter]

sorry to hear it, what do you need clarification on

[@papasmurf2013]

Drink everytime he said awesome.. i'm drunk

[@JesseShowalter]

That and amazing!!

[@zainali501]

Can u upload the workflow on GitHub and share with us ??

[@JesseShowalter]

Maybe a little mini-series on Github?

[@trollflix]

I still cannot understand why people write each CSS property in a new line... New line and tab spacing should be used to define parent and children HTML elements imo... This is another coding standard issue imo. cuz when you trying to edit the header of the modal, and you try to make a change in the footer of the modal, you need to scroll way down, holy....