 |
| Responsive Landing Page Using HTML CSS & JavaScript |
Hey friends, I hope everything is going well. Today in this blog we are going to be creating this Responsive Landing page using HTML, CSS, and JavaScript. earlier I shared a video on how to create a profile card using HTML CSS & JavaScript now we're going to learn how to create a responsive landing page using HTML CSS & JavaScript.
Firstly before we begin let me teach you the concept behind creating a landing page/website. Before creating a landing page/ website you must know three concepts first:
1. Using the right color
2. Always make it Responsive
3. Know who to use the right text/image.
4. Using the right font size/fonts and style
Using the right color: as a UI/UX Designer you should know how to use the right color always not all colors matches the site you're creating, that is why designer mostly stick to one color thereby not combining color's that's called a monochrome way, you should use standby colors always if there is a case you would need to use multiple colors like purple and green can go well in a portfolio but I would prefer sticking with purple and black. Also crimson and black, with crimson and purple go well together.
Always make it Responsive: when creating stunning websites you should always try your best to make them responsive for mobile it will get you the chance of getting hired fast normally I think responsive is included in all sites, I have never seen a popular site that doesn't have a responsive side of view. Yes, making site is also useful and helpful because the most used devices are mobile phones and tablets, think of it this way when you make up in the morning what is the first device you lay your hand on, it's a phone right if it leaves a comment below 😄. It's a mobile phone that is the most popular device in the world as a software engineer and a Web Designer you open your Gmail, Discord, YouTube, etc. You check all these social media platforms, I know now every site is trying to build an app version. but still on mobile Instagram is responsive so is Facebook YouTube, Twitter, etc. All these platforms try their best to make a responsive version for their site, Please I hope now you have learned how making a site Responsive can be useful and helpful to everyone.
Know who to use the right text/image. when creating a site you must know how to use the right image and text for example if you're creating a cryptocurrency website you can't use a dog image or a database image, that is just messed up it is a mixture of things that don't go together. For example chocolate and a pizza, some people might do it but that's not right. if you want to create cryptocurrency you should use a coin with a dollar sign or a guy pointing to a dollar sign.
Using the right font size/fonts and style: Now I know this is the part where we get it wrong using the right font size, font style, and the right font. Most people don't take a keen eye to this, now when using a large text it should be the introduction to the site for example in a portfolio you should use a large text Introducing your name, while the small text should be what you do for example,
"I am ____________"
"UI/UX Designer"
Above is an example of how to use the right font size, now the same example applies when using font style I can use for example "I am Creative Tutorials" - as you can see I made the text in a slanting form and the text indicating my name in bold.
Example2: "UI/UX Designer" - as you can see here also the same example from our example 1 applies here but this time the color changes, now that is it.
Now using the right font you can just flow with this because some people have different varies of font they like. So now we're through with the concepts I have just shown you let's move back to the topic.
Responsive Landing Page Using HTML CSS &
JavaScript{contd}
In this project Responsive Landing Page if you have watched the video you would notice that this page{the first page}links you to another page when the button clicked, with some cool loading animation, If you decide to go back to the previous page you can do so, I have also added another cool animation on going back, for those who have not watched the video I will be linking the video below, please do not just watch or download code please take time to learn each concept very well
Responsive Landing Page Using HTML CSS &
JavaScript{Video Tutorial}
With this video, I believe you have understood how to create the concept behind creating this video.
You might Like This: >>>
Responsive Landing Page Using HTML CSS &
JavaScript{Source Code}
To create this project "Responsive Landing Page" you have to create three files an HTML CSS & JavaScript file after creating these three files just paste the following code, you can also download the source code from the given download button.
Excellent blog.
ReplyDeleteAppreciate your thoughts.
Ecommerce website design Dubai
Post a Comment
We welcome relevant and respectful comments. Off-topic or spam comments may be removed.