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.
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.
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 😅
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.
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
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
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! ❤
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
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!
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.
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! 😃
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 :)
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.
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.
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!
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.
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
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... ♥
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
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.
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. 💪🏾
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💯
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.
I thought it was a million views video til I noticed the actual views Such a high quality and well made content, no bs, no stupid music bg Just straight to the point answering questions, keep the content up!
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
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.
2 more tips. Use tailwind and customize its CSS vars. Please don't inline your SVG icon inside the HTML. there are other solutions. reach a point where you have an Icon component that can take the icon you want as an attribute. something like that
this is really good, i appreciate it. stream lining the work flow and design. how about a cms or a dashboard for a like say inventory or more specific like a car care center? kinda like inventory management system. not the functionality it self but the design flow. can it be streamlined?
Thanks man, i really found a gem of video! Im someone who just started learning to code a few months back, i have basics of web dev. But whenever i started building projects, they were just so bad. Imma implement these tips from now on. Also, i wanted to ask how much time should the designing part take (on avg)?
I always found easier already having a design to look at while coding frontend code. You can already tell which parts should be grouped together, layouts and what should be a reusable component.
![[Full Episode] MasterChef Junior Thailand มาสเตอร์เชฟ จูเนียร์ ประเทศไทย Season 3 Episode 1](http://i.ytimg.com/vi/Qs5zdBqLn_8/mqdefault.jpg)
![[TH] VCT Masters Shanghai Playoffs DAY 5 // 100T vs PRX | FUT vs TH](http://i.ytimg.com/vi/q75pv359eP4/mqdefault.jpg)
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.
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.
@@whosajid Thanks for letting me know that too!
@@mshl114 My pleasure
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.
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.
Bro this is gold. No fluff, just straight to the point. Thank you sir.
Glad it was helpful.
yes
I can’t stress that enough. The design part is the most important part. It makes the coding part so much simpler.
Should've told me this 2weeks ago
Found out in the hard way 🤣
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 😅
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.
TH-cam algo ahs blessed me again. The design approach is a game changer.
Yeah, it really is.
The snap scrolling and scale really did "THE THING" for me.
ly brother, u earned urself a sub.
Happy to hear that. lyt bro
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
I teach engineering design in college. Wish all my students saw this before the semester! Nice job.
Make it the first assignment on week 0 to watch this video 👀
no music needed, pure gold information. u deserve my subs
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
I have this gut feeling that this channel is gonna 3xpl0de in terms of viewers. Quality content brother.
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! ❤
You can do it ❤️
This is my last bus stop. Masterclass content.
Thank you
Sajid
Thanks for writing such a nice comment. I am glad the video was helpful.
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
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!
Yeah, I am thinking of diving deeper. Longer and more useful videos.
the scroll snapping and scale I didn’t know! Excellent tips.
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.
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! 😃
I am glad the videos were helpful.
Infact the best video on TH-cam. You planned and designed this video well that's why you attracted me quick. You earned yourself a subscriber bro
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 :)
This channel is going to be big, deserved. Awesome content.
This was a crash course in 10 mins. I got a lot from this! Thank you so much.
Best video I’ve seen this year. Straight to the point.
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.
SO thankful to youtube algo to show ur vid in suggestions today!! Thanks !!
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.. ❤
Your comment is really good. Really appreciate it. Keep them coming...
your videos are so simple, straight forward, knowledgable i like it alot please keep going!
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.
Noted. Will work on it.
Don't you think my career seems 50 times easier now?
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!
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
this dude is LEGIT I actually went through this myself and got into this conclusion my guy knows wassup. I completely agree with him
Amazing content, nice sense of humor editing. Liked and subed without a second thought!
One of the best videos on this topic I have seen in a LOOONG time. Thanks for posting!
Dude I love your channel. Straight to the point and doesn't go into technical details 👍👍👍.
Couldn’t imagine jumping into code right away without at least a quick mockup in Figma
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.
Wow this is the best! no story telling straigth to the point! thank you so much!
Damn man, this video is pure gold for people who are begginers like me.
Just with the tips trcks at the end of the video you saved my life.
Underrated TH-cam channel, you made me realized my mistakes. Thank you. You earned a subscriber.
Wow, thanks
Short n crisp, LOVED it thanks. Now im more motivated to make a website.
Bro your content is so helpful and unique. Keep it up. I'm so glad I found your channel right on time.
Great advice man i thought you had like a 100k subs i was suprised to see only 743 subs.The video was so well made and very informative.
I appreciate that!
Subbed! Never expected such a content quality from a new channel 👏
Glad you enjoy it!
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
This information is gold
Sajid, going good bro. I have experience in this field for 7 years. I love your explanation. It's up to the mark ❣️
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...
♥
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
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.
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. 💪🏾
You got it 💪
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💯
This is actually such a good video bro. Thank you so much.
Thank you for making it quite clear I need to design first.
Good knowing this in the beginning of my web journey.
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.
You got it
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.
I thought it was a million views video til I noticed the actual views
Such a high quality and well made content, no bs, no stupid music bg
Just straight to the point answering questions, keep the content up!
So glad to hear that. The quality will only go up from here.
Im glad to start my web developing career with your guides!
Damn…
Thank you for sharing all of these mate❤️
new to this channel nice analysis and straight to the point ,no background distraction . keep it up sub added
One of the best web dev videos on TH-cam
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
Yeah, Still working out the pacing. Will improve by time.
This feels like youtube premium content. Subscribed.
This is super, freaking, insane helpful. Thanks you. Im watching this for the third time 🎉
Such a great content I have ever seen in single video.
Top notch content! Need more like this.
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 .
Amazing quality, keep the good work this channel will blow up.
Will do, Thanks Man!
dayummm. so good straight to the point.
I didn't know you can use CSS that way. Thank you so much!
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.
That's cool
Great video, thank you for taking the time to make this video. Subscribed!
I’m saving this for everyday reference. Thanks man 🎉
Glad it helped
Awesome video. It applies to newbies and pros🎉
You've earned a sub!
2 more tips.
Use tailwind and customize its CSS vars.
Please don't inline your SVG icon inside the HTML.
there are other solutions. reach a point where you have an Icon component that can take the icon you want as an attribute.
something like that
Thanks, this was very helpful. I'm halfway into my programming journey, and I've been wondering about design elements. Subscribed
Thank you I needed this.
Upload some videos related to how to create a design and which tools to use (maybe a tutorial series )
Man, you’re really being a big help🔥✨
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 :)
yep 😎
Brilliant video. Thank you so much for sharing your wisdom Sajid.
This is so well done.
This is soooo necessary. Great job
My favourite heading is:
No signup, no credit card, no bullshit
lol🤣
@@whosajidno but for real, your video is great, i subbed
@@ItsDoms Glad to help
This was very useful man. Thanks. Appreciate your work.
Feels like the algorithm is TROLLING ME cuz it recommended this video THE NIGHT OF MY WEBSITE DISCUSSION IN UNI 💀💀💀
One of the best video I have witnessed.. Thanks bro 😮
God bless you for dumbing this down for everyone to understand, and for including the chapters 👏
The chapters are auto generated. But Thanks:)
underrated vid, thanksss
great helpful video. this one got up a new sub. thank you very much! 🙏
ABSOLUTE GEM!
Thank you so much for this video!
man amazingly impressive !
Bro you are a LEGEND!
Simple, easy, effective and all of this is wrap in less than 11 min. Thx bro
Glad to hear that
Nahhh this might be the best web development video I've ever seen omg
Instant subscribe
you make me mindblow if building a website is shit simple if you know how to do that, like what you explained, thanks dude❤
sweet. thanks for making it quick
Nice video. I really needed it. Thank you so much!
this is really good, i appreciate it. stream lining the work flow and design.
how about a cms or a dashboard for a like say inventory or more specific like a car care center? kinda like inventory management system. not the functionality it self but the design flow. can it be streamlined?
Thanks man, i really found a gem of video! Im someone who just started learning to code a few months back, i have basics of web dev. But whenever i started building projects, they were just so bad. Imma implement these tips from now on. Also, i wanted to ask how much time should the designing part take (on avg)?
Not too much, few days or weeks including content. And don't try to be perfect.
I also wasted much of my time writing code directly without a design, but now I understand.
Glad the video helped you
I always found easier already having a design to look at while coding frontend code. You can already tell which parts should be grouped together, layouts and what should be a reusable component.
Exactly!
In my experience in coding, it is better to build the user interface first and then code the functionality behind that interface.