The Easiest Way to Build Websites

after watching this video you will be able to build better and profitable websites plus you will make them faster than ever before there are two ways of building a website the traditional way of building by writing code and the other is using a website builder like webflow or WordPress this video applies to both groups because it's the same concept but I will focus on writing code as it offers more creative freedom and is better so every time I say CSS it just means styling options in website Builders and every time I say code editor it translates as WordPress or webflow before I learned how to code I used WordPress to build websites and I made a lot of mistakes I kept making those mistakes even after I learned how to code because YouTube taught me how to use WordPress or how to write code but no one ever taught me how to build a website if that makes any sense tell me if it's relatable you have to rewrite the entire code again because you hate how the final website looks and function or you are staring at a blank page with no idea where to start what about your website is taking 10 seconds to load even on 4G or worst your client is asking for revisions after revisions and nothing seems to satisfy them so here here is the solution to make the best website possible with the least amount of effort and time you need to do two things number one design first I am talking proper design figure out who the audience is and what problem this website will solve for them design also includes content so once you have figured out who the audience is and what they want from your website the right headings and powerful images will come naturally to you not just that you will be able to create the right structure from the very beginning you will know whether to use cards or not if yes then how many cards how big those cards should be because you are now thinking in terms of what the users want it becomes easier to help them but design is only step one step two is actually implementing that design whether you use a no code tool or write code manually it doesn't really matter you just have to think and plan everything in the phase one itself so implementing those design will become a piece of cake just Beware of the limits of those no code tools or your own coding skill set you don't want to design something which is a pain to implement because most of the time the users don't even notice the effort you put into a website so we will look at some neat tips and tricks that deliver superb user experience but very easy to implement speaking of easy first thing you need to do is make a repeatable design repeating design make things consistent and look satisfying here are some examples another tip break your page into sections so you can focus on one thing at a time first section will be the hero section some might say it's the most important part of the website because an average user spends seconds deciding whether to stay or leave your website putting a nice and Powerful heading upfront will catch their attention coming up with the heading is easy your main heading should answer this question what problem you are solving that the user currently have remember the user doesn't care about you they care about the solution you are providing once you got their attention then you need to expand on that heading with a small paragraph ideally two or three sentences and add an image video or a product demo to complement The Heading by combining a strong heading and a paragraph with the right media you make it very easy for the user to understand your product or service and once they get what you are offering you need a call to action whether it's a learn more sign up or buy now button button whatever your goal is put it right there now there are two designs for a hero section the two columns and one column design two columns are more popular because it's easier to implement for any screen size but you can get away with one column as well just make sure that the design works on all screens and not just on computers and laptops once you have a strong and engaging hero section the next section should provide more information about your product or service once again no fluff just straight to the point the more transparency the better you have someone's attention now you need to win their trust so if it's a product explain the features and benefits explain the pricing and make it easier for them to choose you over the competition keep asking this question to yourself what is the purpose of this section if it's to explain something just do that in as simple words as you can if it's to show off do that in confidence whatever words you use they must answer a question that a lot of your users have to know those questions you can talk to your users and look at your competition most of the time a good heading is an offer that the competition doesn't have imagine a website that have this heading Unlimited downloads Unlimited fun and the competition doesn't have any feature like that you could also try to answer a very common question in your industry here is an example for a heading that is actually an answer no ads no privacy risks imagine a social media website telling this on their signup page now if you mix headings like these with some crisp illustrations or bold images you are golden there are plenty of free websites out there I am sure you will find them but the key thing is you haven't written a single line of code and yet you're so far ahead in the process like most things website building also follows the classic 8020 rule think and plan before building the website and save yourself from a lot of pain I have learned this the hard way now coming to colors and fonts you need at least four colors including black and white you can use variations of black and white but don't go too far the next two are your accent colors they will be used to add a bit of character and style use them to design your buttons borders and gradients the last part is fonts and it's best to just stick with one font per website if you have experience then you can use two or maximum three fonts per website but don't worry about fonts and colors we will use CSS variables to build our website in no code tools you can set them as Global colors and fonts the neat thing about variables is later you can change them and the results will apply to the whole website check it out if you are planning to use a dark mode toggle that will also be much easier with variables once we have our variables we need to assign the same classes to the repeating design because we don't want to write the same CSS over and over again speaking of writing less CSS by using the same classes and variables it becomes very easy to build and modify the website at any stage we want I used to directly jump into WordPress or vs code and start building the website from scratch with no design or content in mind the end result was an ugly and useless website that needed to be rebuilt again or worst keep adjusting colors and design till the client was satisfied so now I design first with all the final content and repeatable Design planned out and once I am happy with the design and content I open VSS code which is the best code editor for me speaking of best I promised some easy tips and tricks to deliver an exceptional user experience so for those of you who stayed till the end here they are Dynamic heading size flexible cards SPG icons snap scrolling scale up or down there you have it the easiest and fastest way to build powerful websites feel free to add a tip or suggestion in the comment section just below the like And subscribe button

Channel: Sajid

Views: 364,574

Keywords:

Id: OjEg0IBR_ak

Length: 10min 55sec (655 seconds)

Published: Thu Apr 18 2024