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

In this episode, I talk about how I organize my Front-End Develoment Projects to use modern technologies like SASS, Javascript, Task Runners and build my sites in a modular way.

Modern Web Front-End Web Development requires a bit more focus than it used to. You still basically link your stylesheets and scripts in your HTML document, but how you do that and how to redo that is important for workflow and the modular style of sites.

Check out my video on ways to preprocess CSS:

I cover the following in this video:
1. How to set up your project files organizationally
2. How to pre-process your CSS to make life easier
3. How to use, and what tools to use for Pre-Processing (task runners, terminal, Codekit)
4. How to think about code in a modular way

The important thing is not that you set up and organize your projects just like me, but that you do it at all. There are many ways of doing that but it's about a way of thinking. Read these great articles to learn more about how to organize CSS.

------------------------------------------------------------------------------------

////////// Want to support my content and get extra goodies? Become a member and get perks like member-only content, behind the scenes, design files, and more...

////////// Connect with me here 👍🏼

////////// Sign up for my Monthly Newsletter 📫

////////// Music is from Musicbed click below for a free trial 👇🏼

////////// Equipment 📸

[VictorVictory-teij]

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!

[sonoftroy]

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

[jeancarlosdacampo]

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

[seand]

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

[Noobmaster_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...

[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!

[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

[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

[prabhakarmishra]

You really explained very well, you are awesome

[akilahlittlejohn]

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

[piromaniaco]

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!

[vishnupanda]

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

[zigggen]

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

[martiananomaly]

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

[abskhairoun]

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

[eggyfresh]

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!

[rogerantonell]

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 Youtube, 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🤙

[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!

[imanejarmouni]

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!

[Sambora]

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