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.
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 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 👏🏻
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
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.
@@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.
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
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.
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!
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! ❤
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
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!
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 .
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.
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
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 !
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
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! 😃
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 😊
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
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.
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.
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
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!
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
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. 💪🏾
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
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!
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 :)
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
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.
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
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... ♥
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!
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.
Summarized by AskTube Understanding the Website Building Process 🚀 00:00 Two approaches to building a website: traditional coding and using a website builder. This video focuses on coding, but the concepts apply to both methods. Designing and planning are crucial to building a successful website. 00:24 Mistakes to avoid: not planning the website's design and functionality, leading to costly revisions. Takeaway: design and plan before building. Designing for Success 🎯 01:14 Design first: identify your audience and their needs, then create a solid design foundation. This step is crucial for building a successful website. 01:38 Design includes content: determine headings, images, and overall structure. Think in terms of user experience. Implementing Your Design 💻 02:03 Implement your design: use no-code tools or manual coding, considering the limitations of each approach. Plan everything in the design phase. 02:32 Tips for easy implementation: use repeatable design, break the page into sections, and focus on user experience. Creating an Engaging Hero Section 📈 02:55 Hero section tips: make it consistent, use a strong heading, add a paragraph, and include an image or video. Capture the user's attention. 03:29 Break down the hero section: use two or one column design, and ensure it works on all screens. Providing Value and Trust 🤝 03:49 Provide value: explain your product or service, and include a call-to-action. Win the user's trust. 04:13 Next section: provide more information about your product or service, and answer user questions. Color Scheme and Fonts 🎨 06:41 Choose colors and fonts wisely: use at least four colors, and stick to one font per website. Use CSS variables for easy modification. Building and Modifying Websites Efficiently 🔧 07:11 Use variables for easy modification: apply the same classes to repeating design elements. 07:34 Assign variables for easy modification: use CSS variables to change colors and fonts across the website. Tips and Tricks for Exceptional User Experience 🎉 09:08 Easy tips for exceptional UX: dynamic heading size, flexible cards, SVG icons, snap scrolling, and scale up or down.
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.
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).
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 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.
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!!!!!
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💯
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.
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.
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.
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...
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.
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
no music needed, pure gold information. u deserve my subs
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 👀
@@SpooningTreesap86 WOW! Thank you so much!
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.
Yeah, the education system is bloated. Learning by doing is the future of education.
@@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 👏🏻
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 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.
@@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.
TH-cam algo ahs blessed me again. The design approach is a game changer.
Yeah, it really is.
ahs
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
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.
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.
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.
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 ❤️
I have this gut feeling that this channel is gonna 3xpl0de in terms of viewers. Quality content brother.
You’re the goat bro! I’ve been learning html/css/js for a few months and this has genuinely helped so much
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
Yep. School is all theory and bla bla bla...
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!
Great to hear that. The next video is all about coding.
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 .
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.
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
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 !
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
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.
the scroll snapping and scale I didn’t know! Excellent tips.
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 😊
This is one of the best, if not, the best video about building website. I learned so much in a single video. THANK YOU!
Bro nailed teaching me things I had no idea I didn't know. This is pure gold. thanks Sajid!!
This was a crash course in 10 mins. I got a lot from this! Thank you so much.
I rarely glaze on educational videos but bro your channel is pure gold thank you
This is one of the BEST videos I've ever seen on web site creation.
No music, no turning around. To the point. Appreciate your informations bro ❤
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
love how you get straight to the point with no drawn out long intro
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.
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.
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
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
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.
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!
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!
those snap scrolling and scale were something i was looking for, what a pleasant coincidence to come across this vid
This video is some of the greatest value I've gotten this year on yt
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
the most golden information that is straight to the point... thank you so much... i was stuck in it but now its easy
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 💪
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
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
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 👍👍👍.
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!
Yeah we all do that. Spending days designing and building just to delete it and do it all over again 😭
This video just opened my eyes to what I have been missing
this dude is LEGIT I actually went through this myself and got into this conclusion my guy knows wassup. I completely agree with him
I can't believe that I learned all of that in under 11 minutes. Kudos to you 😮😮😮😮😮
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 is the type of content for which I gladly pay my internet bills 🔥🔥🔥
Best video I’ve seen this year. Straight to the point.
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...
I always want to do in this way. Thank god I found this video to support my selected way of building Applications
That's amazing advice that many upcoming developers need to know.
I found your channel at the exact moment I needed to :)
thank you so much for all this great insight!
God bless you for dumbing this down for everyone to understand, and for including the chapters 👏
The chapters are auto generated. But Thanks:)
I never think that a video like this I will found outside university. Love for you. Keep rocking 😉
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
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.
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. "
best and fast video of all time, deserve a subscribed
SO thankful to youtube algo to show ur vid in suggestions today!! Thanks !!
Underrated TH-cam channel, you made me realized my mistakes. Thank you. You earned a subscriber.
Wow, thanks
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.
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...
♥
Bro your content is so helpful and unique. Keep it up. I'm so glad I found your channel right on time.
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!
phenomenal info in 10 minutes you earned my subs.
willl go with this workflow from now on !
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.
Yes
Summarized by AskTube
Understanding the Website Building Process 🚀
00:00 Two approaches to building a website: traditional coding and using a website builder. This video focuses on coding, but the concepts apply to both methods. Designing and planning are crucial to building a successful website.
00:24 Mistakes to avoid: not planning the website's design and functionality, leading to costly revisions. Takeaway: design and plan before building.
Designing for Success 🎯
01:14 Design first: identify your audience and their needs, then create a solid design foundation. This step is crucial for building a successful website.
01:38 Design includes content: determine headings, images, and overall structure. Think in terms of user experience.
Implementing Your Design 💻
02:03 Implement your design: use no-code tools or manual coding, considering the limitations of each approach. Plan everything in the design phase.
02:32 Tips for easy implementation: use repeatable design, break the page into sections, and focus on user experience.
Creating an Engaging Hero Section 📈
02:55 Hero section tips: make it consistent, use a strong heading, add a paragraph, and include an image or video. Capture the user's attention.
03:29 Break down the hero section: use two or one column design, and ensure it works on all screens.
Providing Value and Trust 🤝
03:49 Provide value: explain your product or service, and include a call-to-action. Win the user's trust.
04:13 Next section: provide more information about your product or service, and answer user questions.
Color Scheme and Fonts 🎨
06:41 Choose colors and fonts wisely: use at least four colors, and stick to one font per website. Use CSS variables for easy modification.
Building and Modifying Websites Efficiently 🔧
07:11 Use variables for easy modification: apply the same classes to repeating design elements.
07:34 Assign variables for easy modification: use CSS variables to change colors and fonts across the website.
Tips and Tricks for Exceptional User Experience 🎉
09:08 Easy tips for exceptional UX: dynamic heading size, flexible cards, SVG icons, snap scrolling, and scale up or down.
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!
This is such a valuable video for any beginner frontend developer
'If I have an hour to solve a problem, I'll spent 55 minutes thinking, and 5 minutes thinking about the solution'
- Albert Einstein
This approach is golden.
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. ❤
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 😎
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.
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).
Don't you think my career seems 50 times easier now?
-50 times
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
Sajid, going good bro. I have experience in this field for 7 years. I love your explanation. It's up to the mark ❣️
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.
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!!!!!
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💯
Thanks, this was very helpful. I'm halfway into my programming journey, and I've been wondering about design elements. Subscribed
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 .
One of the best web dev videos on TH-cam
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
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.
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.
This is amazing!!! I can blindly say I'm twice better in my skills than I was 10 minutes ago
Thanks a lot man 🙌🙌🙌
You just made my day :)
Simple, easy, effective and all of this is wrap in less than 11 min. Thx bro
Glad to hear that
this guy... doing Gods work right here. thank you
OMG 😭
I also wasted much of my time writing code directly without a design, but now I understand.
Glad the video helped you
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...
not a single second wasted!! totally worth it..
👍
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.
Wow this is the best! no story telling straigth to the point! thank you so much!