The Easiest Way to Build Websites

[@mshl114]

I always wondered why people waste their time and energy on just designing for their small websites instead of writing the code directly. But now I understand.

[@whosajid]

Plus, adjusting things is easier in design phase. You don't have to re-write a lot of code to make few layout or design changes.

[@mshl114]

@@whosajid Thanks for letting me know that too!

[@whosajid]

@@mshl114 My pleasure

[@ErinDado]

So that you'll not end up wasting time to rewrite code if the design you're thinking is not aligning to the one you've visioned.

[@landonwjohnson]

I think that's everyone's thought process. Even when I work with clients, you can see the though of wire framing it out first irritates them, because they want to hit the deadline faster. If you want to go to a whole other level, it's also important to do plan out folder structure, what's going to be in each file, and what's the users journey with sequence diagrams. Every company/client is different, but designing first is super important.

[@PigHead]

Bro this is gold. No fluff, just straight to the point. Thank you sir.

[@whosajid]

Glad it was helpful.

[@mavsocc]

yes

[@markanderson8066]

I teach engineering design in college. Wish all my students saw this before the semester! Nice job.

[@SpooningTreesap86]

Make it the first assignment on week 0 to watch this video 👀

[@whosajid]

@@SpooningTreesap86 WOW! Thank you so much!

[@avexrage]

no music needed, pure gold information. u deserve my subs

[@JokerLover123]

I went to web design school. You effectively condensed a lot of the knowledge we were taught in 4 years into a 10 minute video. Looking back at it now it was a generous waste of time and most of the knowledge that will help me get into college right now was self taught.

[@whosajid]

Yeah, the education system is bloated. Learning by doing is the future of education.

[@ajaymalviya.7]

​​@@whosajid The past always repeats, some time ago it was called apprenticeship wherein you learn directly from the business you want to get into, be it no pay but immense guidance which later translates to being hired and hopefully in future starting your own business in the same field. PS: great video, keep up the good work bro 👏🏻

[@Diego_Cabrera]

I can’t stress that enough. The design part is the most important part. It makes the coding part so much simpler.

[@GodOfFools]

Should've told me this 2weeks ago

[@GhostBata675]

Found out in the hard way 🤣

[@uaer309]

Also more boring, saying that as a UI designer with 10 years of commercial experience. Dev is a lot of fun until you have a well structured design. Then it becomes a boring copy-pasting activity 😅

[@internetmarketingwithruno]

Just a reminder that design means overall design of website. To many people design means visual design. Design means decode task to semantics which is converted to structured html and css and thus easy to change.

[@haveagudday8068]

​@@uaer309depends on what your goals is tbh, if it's a website build for clients, then you definitely need experienced UI/UX designers. But, if you want to hone your skills, then trial and error is a good way to learn.

[@mahidulislam3103]

The snap scrolling and scale really did "THE THING" for me. ly brother, u earned urself a sub.

[@whosajid]

Happy to hear that. lyt bro

[@augustyng]

Snap scrolling is cool, but make sure that the user is not annoyed by that. It’s actually rarely a good idea to use it, it’s the best to use it only for very fancy designed websites with some scrollytelling & parallax

[@lancewilliamcatal6870]

KZbin algo ahs blessed me again. The design approach is a game changer.

[@whosajid]

Yeah, it really is.

[@pratikkaranjit1462]

ahs

[@GabeKMusic]

I love that you take the extra time and effort to explain things for those with less experience in certain technical domains - Like how you explain concretely what you mean by CSS and code editor. As a software engineer, I wish other educational content would do the same for the programming rabbit holes I fall into while debugging. Too many assumptions about their audience are made by educators

[@ally6438]

Full stack dev here of 15 years. Really enjoyed your video, you've put down in a short clip lessons I've learned the hard way or now intuitively follow without really thinking about why.

[@brunosag]

You're my go-to guide when building a website from scratch now. I love your straight-to-the-point, UX-focused approach on these, and would love to see other videos diving deeper into each one of these steps. Keep up the great work!

[@whosajid]

Yeah, I am thinking of diving deeper. Longer and more useful videos.

[@ResEnd_-]

This blew my mind, it's 3am, I got tired from a personal project here but after watching, I look foward to just send my current files to the bin and go to figma and start it over, and right (maybe?). Thanks for making myself want to fail again by driving my to believe I can learn from it, like u said you did. Great work, editing and direction on the video, congrats! ❤

[@whosajid]

You can do it ❤️

[@M_MuSa_53]

learning web designing for two months and i learned 95% of css in yt other 5 in the school im going too. and they never tell you what you are telling us great job, sajid

[@whosajid]

Yep. School is all theory and bla bla bla...

[@its_abdu4925]

i was building a blog app recently, as a training for me, i started coding directly without design, it was catasrophic as you said. now i stopped coding, and started database design, and now i jumped to ui design. this way i won't be going back and forth. i loved the video

[@oygies7248]

I'm actually a designer that is learning to code - I was so terrified and overwhelmed with coding, because of its steep learning curve. But your videos really help simplifying the concepts and how it fits in the production so now I'm much more keen to learn. Thank you! Also your videos are the most crisp, clean, and eloquent tutorials on dev/design I've ever seen! New sub!

[@whosajid]

Great to hear that. The next video is all about coding.

[@ganeshkalaskar1986]

I'm an aspiring industrial designer and I want to learn code , can you help me with selecting which language I should learn first . Also the benefits of it .

[@consume-news]

I have this gut feeling that this channel is gonna 3xpl0de in terms of viewers. Quality content brother.

[@SnakesRaven]

Should be mandatory to watch. Nowadays I hardly touch a computer when building the structure of a website and its pages, just pen, paper and sticky notes. Here are my two cents: - If you create wireframes keep it simple: just focus on what section goes on what page, on each section write down the purpose and if there's a cta or link provide that as well. Something like "hero title" with description "in the homepage hero section we will have the main value proposition followed by a main call to action button towards page so and so" followed by "button". That's it, you are only structuring your website and its pages, so focus on it. No need to add images, colums, sliders, etc to the sections because if you show it to the client they often get confused and think it's already the design. - Do you really need that fancy animation, goofy slider and sparkling glitter following your mouse cursor or are you just trying to show off? That's right, keep it simple and if it doesn't add value get rid of it.

[@Beloved_Digital]

This is my last bus stop. Masterclass content. Thank you Sajid

[@whosajid]

Thanks for writing such a nice comment. I am glad the video was helpful.

[@SM-ov4vl]

You’re the goat bro! I’ve been learning html/css/js for a few months and this has genuinely helped so much

[@icczynitezz7637]

I actually despise doing planning and designing...especially into documentation during my final year proiect at uni. I only realised how important it is when i start working on the code hands on. I was blank on where to start. The documentation i made is what helped to to stay on track.

[@prateekmanta2097]

I can 100% relate to this. I had the experience when I was building my final year project, not designing properly wasted months of development time. I learned this the hard way! More people need to understand this !

[@nathanielreeves_dev]

the scroll snapping and scale I didn’t know! Excellent tips.

[@professionalprofessionalpl87]

No music, no turning around. To the point. Appreciate your informations bro ❤

[@sarveshdevrukhakar]

While writing code I was always thinking what if I had something like blueprint of what I want to build? Then I see the power of planning before writing code, it is timetaking but worth it, because coding is easy but solving problem is hard. This video is just introduction to website-building guideline, but it is wonderful and powerful. Sajid, if possible make video on you use the approach to build website of your clients, and discuss other approaches as well.

[@whosajid]

Noted. Will work on it.

[@fluffypanda5405]

I’m trying to be a ui/ux engineer( fancy term for a person who does design + code + graphic design, it is position im most tech companies in my country) I was stuck in tutorial hell. Your videos showed me a way. Just do it. Thank you

[@laturdaily5110]

Best video for me. I was thinking of watching a tutorial on how to improve my design skills and out of nowhere yt recommended me this masterpiece. Thank you yt. Great video Sajid 😊

[@AbChill-p6n]

Bro nailed teaching me things I had no idea I didn't know. This is pure gold. thanks Sajid!!

[@markmacharia5187]

Bro this is awesome, I suck at UI/UX but after watching this, I will never code before the design part. Saved me much headache especially with the information about color combinations.

[@plon4742]

This is one of the best, if not, the best video about building website. I learned so much in a single video. THANK YOU!

[@IsaBPapery]

I have been trying to start my own web portfolio to showcase what I learned throughout my soft eng program. However, I keep finding myself deleting the whole project, rebuild it, delete it again and it is a never ending pattern. Now I understand why, I CLEARLY DO NOT HAVE A PLAN as to what I want my website to look like and what is really that I want for possible viewers to get from it. I am glad I found this video. Thank you lots!

[@whosajid]

Yeah we all do that. Spending days designing and building just to delete it and do it all over again 😭

[@Slava-om1sz]

As a professional designer I can only say you spoke real value here. No bad advice to shoot down. On the contrary, I happen to have learned a thing or two. Didn't know that about dynamic typography syntax with slash. I use rem and vw occasionally. And usually implement 2 sets of headings, wich switch based on a breakpont for mobile. But have no idea how this / magic works Thanks for sharing brother

[@dragonprince08]

Just watched your two most recent videos. I’m in awe at how it explains things which I didn’t know how I wanted them to be explained. The topics and level of technicality is just right. Thank you for these! I’m really excited to see what I can get out of them! 😃

[@whosajid]

I am glad the videos were helpful.

[@montgom71]

love how you get straight to the point with no drawn out long intro

[@al_fly2132]

Thanks bro you saved my soul from a lot of pain! Now, after studing Figma design for one month, I'm ready to implement my web blog into life!

[@Miaccount4617]

This was a crash course in 10 mins. I got a lot from this! Thank you so much.

[@AnisZaman-t6c]

the most golden information that is straight to the point... thank you so much... i was stuck in it but now its easy

[@JohanzY]

I rarely glaze on educational videos but bro your channel is pure gold thank you

[@danielvaega]

Never felt so rewarded for sticking around till the end of a video. Mans felt like an Avenger at 10:55 Thank you, Sajid. You are clearly a super-Saiyan-tier of codurr

[@sheikh1906]

This is one of the BEST videos I've ever seen on web site creation.

[@anisbellil786]

those snap scrolling and scale were something i was looking for, what a pleasant coincidence to come across this vid

[@quentincaldway]

What an absolutely fire 🔥 video. From start to finish you gave A1 advice. After building some short projects I’ve found out that when you design first, before jumping right in, when it comes time to code you are able to explore new avenues and create experiences uniquely tailored for a specific goal and/or meet client’s needs. Simply put, you begin to have fun discovering something new in your skills set, while achieving the primary goal, and much faster. Thanks for the awesome tips at the end as well. Each tip you’ll commonly find on professional websites, liked and subbed. 💪🏾

[@whosajid]

You got it 💪

[@Hari983]

Your video is phenomenal. I have been watching coding videos forever, and yet this was still such a fresh perspective. with world class quality. You are the best!

[@dhokiarinidh9809]

A man in the hot desert truly values drops of water highly. I am in the same situation. I just woke up one day and started building a portfolio website without any plan, and now I am stuck somewhere. Finally I had to abandon this and that and go thru a lot of stress to make things work. I really felt like I made a mistake not to plan... Oh God, I wish I watched this video long before... Thank you for the amazing content... ♥

[@BigDaddyBaks]

This video is some of the greatest value I've gotten this year on yt

[@Abdulqaderpatel]

I would always have ugly, unfinished projects. But since i watched this video a month ago, I was finally able to create a website that could actually be used. Thanks

[@AdeelCrestsoft]

Reality is, we were building craps with no idea. Just starring at the blank page and designing what got in the mind. No one told us that you need to have a good designing sense before start coding or designing website. You did a great job. Now at least we got an idea how to design first and the built the site as a solo dev

[@mohankrishna6934]

I always want to do in this way. Thank god I found this video to support my selected way of building Applications

[@nestorarias3519]

Some years ago I went through a very tedious university subject called análisis and problems resolutions which made us learn about a design pattern called design thinking. Now that I’m seeing entrepreneurship and human computer interactions I see the value of a user centered design and design first approach before creating a solution. Understand your user and client. Understand what are their pains. Research a lot. Coming up with a solution will be much much easier. This video is amazing.

[@whosajid]

Love this: "Understand your user and client. Understand what are their pains. Research a lot. Coming up with a solution will be much much easier. "

[@OnlyKingNas-]

This video just opened my eyes to what I have been missing

[@thegospei]

I can't believe that I learned all of that in under 11 minutes. Kudos to you 😮😮😮😮😮

[@nkanyisogwane6456]

I spent years learning front-end design, but I always ended up quitting. Why? because I always felt the frustration of not being able to design, always felt like I lack creativity and that is what made me stop HTML and CSS. But after watching this video, I certainly know the way forward and will actually implement it. thanks💯

[@science_trip]

just a correction. WordPress can be used as No code, but also you can use it as a coding framework, and believe me is amazing! You can also build Restful APIs by writing code inside your own theme or plugin. Belive me I was a hater since I ve learned to code for WordPress. So WordPress applies to both categories. For the rest, I totally agree with you!!!!!

[@farkliyahya]

this dude is LEGIT I actually went through this myself and got into this conclusion my guy knows wassup. I completely agree with him

[@superuserdo476]

Infact the best video on KZbin. You planned and designed this video well that's why you attracted me quick. You earned yourself a subscriber bro

[@landonwjohnson]

God bless you for dumbing this down for everyone to understand, and for including the chapters 👏

[@whosajid]

The chapters are auto generated. But Thanks:)

[@luqmti6634]

Your input is straight to the point. I love this kind of content since im also into web dev. You got a new subscriber. Keep it up

[@aryanahmadi3801]

I am a recent web developer grad. I love your intake and view. I always have hard time to designing and trying to attract users engagement. Your video helped me alot. Please dont stop making videos, this video is a pure gem thank you. I find front-end much harder than backend honestly 😂😂. Your artistic view and experience is really valuable for me. My Only criticism i could give only for video ascpet is give more pause time for us when you going through slides, kinda annoying to pause at exact time to see where in css or html code you pointing at, beside that i love the flow, visual aspect and straight to the point. Thank you for publishing and making this video

[@whosajid]

Yeah, Still working out the pacing. Will improve by time.

[@eltongreenfield]

I found your channel at the exact moment I needed to :) thank you so much for all this great insight!

[@arhabersham]

One of the best videos on this topic I have seen in a LOOONG time. Thanks for posting!

[@FaisalAhmad-dl1eg]

I never think that a video like this I will found outside university. Love for you. Keep rocking 😉

[@Codewello]

That's amazing advice that many upcoming developers need to know.

[@iluvassembly]

Dude I love your channel. Straight to the point and doesn't go into technical details 👍👍👍.

[@surgical_17]

Possibly the best video I have watched recently regarding Website development and design. A real reason to stop and try and approach it differently and better. Thank you needed this :)

[@Rivera-u5u]

1.- Investigación de Mercado (Buyer Persona) 2.- Establecer tu objetivo (de acuerdo a tu estrategia de Marketing) 3.- Copywriting (aquí puedes añadir algo de SEO, pero recuerda que eso no mejorará la venta) 4.- Diseño Web 5.- Desarrollo Web

[@Charlesman24]

Wow! Wonderful... This is web design simplified and summarized in 10 minutes! What I couldn't learn from 100 videos on KZbin, I have just learned in a 10 minute single video. That's awesome and marvelous! Thanks very much for this wonderful update. No need to ask if I have subscribed to this channel. 🙆

[@dragneil9878]

This is the type of content for which I gladly pay my internet bills 🔥🔥🔥

[@pleuratpllana]

Best video I’ve seen this year. Straight to the point.

[@gz1236]

Now I know what I lack when creating a website, I always stuck at a scenario where I don't have any Idea on what I would create or don't know where to start

[@niral6305]

phenomenal info in 10 minutes you earned my subs. willl go with this workflow from now on !

[@jwcatada]

This is by far the best advice I found, straightforward and pleasing. I was ready to click subscribe then I found out I am already a subscriber, hahaha. I believe this is another video of yours that I loved. Thanks brother!

[@eusoukarlacardoso]

Thanks for your video, it helped a lot. I used to make websites by wordpress plus elementor, but now I make my website by code. I love code. ❤

[@djlclopez128]

Thanks, this was very helpful. I'm halfway into my programming journey, and I've been wondering about design elements. Subscribed

[@haydenvaughn00]

So what I got from this is try to be like a full stack or really involved front end developer while also doing UX/UI Design yourself if you’re doing freelance or just making your own projects.

[@whosajid]

Yes

[@alenscaria1516]

SO thankful to youtube algo to show ur vid in suggestions today!! Thanks !!

[@o_m8717]

Bro your content is so helpful and unique. Keep it up. I'm so glad I found your channel right on time.

[@christopherlopez2491]

I’ve been spending time doing this a lot more, it makes everything so much easier. Over plan, get the components, the technologies, how each component interacts with the parent, server side, client side… all of it. Then you break that sucker down to chunks. Also work on your user stories.

[@whosajid]

You got it

[@fassie79]

Great stuff man! I used to start coding directly. The website turned out ok but not great. And it took a very long time to build.

[@blees1ng]

Wait your content is really good wtf.. really appreciated the tips part at last.. love the pure and straight forward content man.. keep it up fr.. ❤

[@whosajid]

Your comment is really good. Really appreciate it. Keep them coming...

[@maximhlavac9012]

This is such a valuable video for any beginner frontend developer

[@leilaluna7]

it took me a year to make my first website, a lot of times because I didn't like how something looked. Now I might take about 3 weeks- 1 month depending on what it is. I still take time because I still don't know all the possibilities, and a lot of my time is spent reseaching all the different ways you can design. Understanding the basics like layouts really helped me. However, I notice I still stray from common design practices. My web development portfolio i'm making is very simple, but uses some cool animations. The above the scroll part of the page doesn't follow the common patterns like the Z shape layout, but I really like how it looks, because I love simple single page designs. The problem is maybe other people won't. I'm using react.js and django.

[@usamafarrukh1564]

That's cool

[@Nemorivarex]

it's not just design mindset, but also business mindset. building website is not only for aesthetics and functions. it's also an important chain of business plan: branding, marketing, sales...

[@maxime5449]

May be late to the party, but on top of all of this great stuff, I can't help but recommend everyone also looking into the clamp() css function which act as the following : -clamp(MIN, VAL, MAX) Which is a game changer to manage fonts, and other things that you need and want to be on point, personnally can't leave this one behind when it comes to managing font sizes and responsives design overall On a last note, this things act as a max(MIN, min(VAL, MAX))) (for the curious :D).

[@HaiderAli-ct8dh]

I realized this just a couple of months ago before watching the video. but the time it took in for the inlightenment was painful. the video is just the perfect confirmation of what's true.

[@GeorgeAllenDonayre-ht4oq]

Underrated KZbin channel, you made me realized my mistakes. Thank you. You earned a subscriber.

[@whosajid]

Wow, thanks

[@harmkraats]

For font sizes I use clamp, it’s basically min and max put together with one more parameter in the middle to be the “preferred” size :)

[@whosajid]

yep 😎

[@khanhuzaif4986]

the most awaited video for me , it solved my core problem just like u said , design and having a clear plan of what we builiding is important .

[@Tharushi_SM]

Hi, Thank you for this. It was really helpful. No fluff straight to the point, you addressed a lot of really useful points. I’d like to make a content suggestion. Could you somehow make a video on delivering the website to a client. Perhaps on fiverr or upwork. What if the client is not very knowledgeable on receiving and managing code, what if you don’t already host the website? Plus I’ve seen on some fiverr profiles, in a fairly higher gig they say “they’ll include the code as well”, but not in the basic package. isn’t that basic to send the code? How are you delivering the website, if it’s not for sending the code? And how to deliver everything and assure the client that you’ve given them all the permissions and all of the work, if there are databases involved or so on? You are just supposed to point stuff out for them separately and so on? Specially if the client is not much of a tech person? Would be really, really great if you could make something on it, I’ve never seen anything related to that here. Thank you.

[@whosajid]

Noted. Will try to do something about that.

[@Tharushi_SM]

@@whosajid could you brief how we could deliver in general, if possible ? I’m pretty clueless to start with.

[@whosajid]

@@Tharushi_SM Running a business is all about helping your clients. So you are no longer a web dev. You are doing sales, customer service and troubleshooting all at once. Most of the clients have no idea what any of the files or code does. It's your responsibility to take their website LIVE. Coming to managing the site. You have to explain to them that they need a tech person to manage the site. So have a retainer rate that will work for both of you. Lastly, In my opinion, if you wanna grow as a developer. Leave Fiverr as soon as possible. I know that is not easy. But in the long run, you will thank yourself.

[@AteebaMateen]

This is so much relatable, honestly. You gave me motivation to start learn design for my own better. I need to redo my portfolio cause I feel like it is very bad designed, too much code which now only God knows (And I made it in NEXTJS 💀💀)

[@mrreddust]

best and fast video of all time, deserve a subscribed

[@ankanchakraborty9229]

Sajid, going good bro. I have experience in this field for 7 years. I love your explanation. It's up to the mark ❣️

[@atlasdev]

I'm on the fence about the concept of designing websites before coding them. I have worked with both approaches for a long time. For instance, I remember a project where I had a clear vision in my mind and started coding right away. The process was quick, and the end result was satisfactory. On the other hand, in a more professional setting, we once spent several days meticulously designing a website before even touching the code. While the end result was similar in quality, the process was significantly slower.

[@whosajid]

Yeah, the design will change significantly as you start to build the website/product. But having an outline for basic elements will make the process faster. For example, suppose you don't know what the primary, secondary and tertiary buttons will look in the final design. So, you are going to do 2 things: 1. Try multiple styles and see what looks good at the moment. Which can easily waste hours. 2. Use a library like tailwind or bootstrap, and waste time there. And this is just buttons, deciding the layout and content on the fly is a very time-consuming process, and in most cases you end up re-designing the shit out of everything. Having said that, I myself improvise a lot in the dev process, and it only makes things better. So we can design upfront with some room for creative freedom in the dev phase.

[@vidzrandom2090]

This approach is golden.

[@chsheheryar2482]

The problem is the time it takes to design the first Strategy. Especially when you only get projects in cheap or any extremely low budget. However the issues you have explained here are exactly what I face during each project. Honestly, I never actually liked any site I design but I do this just to have clients for marketing services. Also, I mainly focus on the sites to comply with performance variables so it could rank well.

[@justforthevibes3290]

Thank you for making it quite clear I need to design first. Good knowing this in the beginning of my web journey.

[@alanballos6162]

Wow this is the best! no story telling straigth to the point! thank you so much!

[@samsloanmusic1749]

Couldn’t imagine jumping into code right away without at least a quick mockup in Figma

[@o_m8717]

Me too. I want to learn Front development but I decided to begin with a solid course on UX/UI to save money, time, and increase efficiency. And to also rapidly test new ideas.

[@HamzaMunim-j8k]

This is amazing!!! I can blindly say I'm twice better in my skills than I was 10 minutes ago Thanks a lot man 🙌🙌🙌

[@whosajid]

You just made my day :)

[@MegaRameswar]

Thankyou bro i have 7 years of experience but still your content is valuable for me

[@homsthoughts]

Loving these videos, man! Keep them up. I like how direct and straightforward they are. I do suggest do be a little more enthusiastic with the way you speak but that's just me.

[@nileshjain1090]

Don't you think my career seems 50 times easier now?

[@Pawfessor1]

-50 times