Building web pages, how to start

You have great ideas about a new blog or eCommerce business? You want to offer value to your readers or customers? The only thing you need is an amazing website. Furthermore, you are ambitious to create it on your own, even better!

It’s clear. You must learn web design basics if you want to put your great ideas into practice. So the next logical question is: where and how to start? The good news is that nowadays you can learn from many excellent online sources.

We can help you to realize what you need to know and where to find it. The following tips will help you to learn how to create a website and inform you on the best practices.

 

What is HTML?

HTML stands for hypertext markup language and actually it is the first thing you should learn. This language will help you to create the structure of your website and more. HTML enables you to design and display your pages on the browser.

Even if you have no coding experience whatsoever, there are courses which could help you. You will learn how to create a functional web page quickly, how HTML relates to a web browser and how HTML elements make up websites. From there, you can base all your future designs on that.

Another great HTML tutorial that we find useful is the starter one by W3Schools. What’s awesome about their tutorial is that it provides many examples which you can mold and see how they work. They offer an online HTML editor, so when you edit the HTML, you can see the results right away.

Even if you think that learning HTML is a hard thing to do, using these tutorials you will see that it is actually quite simple.

 

Coding is easy with Codeacademy

If you are itchy to learn coding, Codeacademy is the right place for you. This website offers an amazing system. You will be actually guided through the learning process. Codeacademy helps you to start and points the right direction when choosing what to learn next.

Even if you’re an absolute beginner, you will be able to write a code that is real and works. Once you submit your code, you will get instant feedback on it. In this way you can see if you’re doing it well.

But what’s really great is that you can apply what you learn with actual projects. They teach you how to code through lessons that are interactive which helps a lot. With Codeacademy it is easier to learn HTML, CSS, and JavaScript, which you can use to create basic websites.

If you want to check your knowledge, there are quizzes that are specific to you. Coding with this website is really like an exciting adventure. 

 

Learn about CSS typography

As texts are the most important element of web pages, typography is a crucial styling type in web design and a great place to start learning CSS. What is it actually about?

The basics of web typography deals with things like which font and types of letters to use. It also includes the space surrounding the letters, as well as the words and lines in general. It is all about the sizes of different texts and how they correspond to each other on the website.

You can start learning with a course and envatotuts+ offers a great one for CSS typography. The course is divided into several parts. Firstly, you will be taught about CSS font properties.  After that, there are sections on web-safe fonts, CSS line-height, vertical margins, etc.

When you master CSS typography, you will be able to completely style the typography of a basic HTML page from scratch. Sounds great, right?

 

Produce a wireframe

Even if you have a clear idea of how you want your website to look, wireframe can help you to plan better. It is basically a blueprint of how the elements on your website will be arranged. Wireframes enable you to plan out the website structure without getting distracted by things like colors and images. 

It is important to underline that the wireframes aren’t so much about the design but more about the functionality of the screen. It showcases the page layout and how the website content will be put together. 

During your planning, you can use pen and paper as well, but we recommend a specific software as a better solution. Information on how to create a wireframe and the 10 best practices you can find in Digital Telepathy’s guide and a software tool you can use is Easy Wireframe by Edrawsoft.

 

Use a page builder

Coding is too complicated for you? We have good news for you! There is an easier way to design your website regardless of your coding skills. The magic tools are website and page builders!

A page builder can introduce you to the designing process. DragDropr is an excellent tool in this regard. You can start from scratch or use some of the many templates you can find here. You can play with design elements and see how easy and intuitive this tool is.

Page builder will help you to become familiar with how different web design elements work together and how to produce effective results. By dragging and dropping, you can easily build and customize the page. DragDropr provides you with an instant preview of any move that you make. In this way, you get the final result even before publishing.

 

Improve your coding skills at CodePen 

Once you master the coding process, you can use CodePen to improve your skills. On this website you can share and modify code portions which is really excellent. It basically represents a social development environment that permits you to type code in the browser and view the results. You can start coding by using HTML, CSS, or JavaScript, and the results instantly appear.

CodePen also offers a number of opportunities relevant to your web design skills. For example, you can upgrade to PRO which unlocks further options such as to work with others with Collab Mode.  There is also a job board at CodePen, and you can even chat with others or listen to a podcast.

CodePen is above all a community, and most of the creations on there are public and open source.

Do I need Sketch? 

And the answer is YES! Sketch is awesome vector-drawing software for Mac that allows you to produce design elements in a simple way. The great thing is that you can export code and use it however you need. There are also hundreds of plugins which makes the tool amazing for digital design. 

With Sketch, you can transform your static screens to dynamic pages. You are able to add simple animations and make clickable prototypes that you can share with others on Sketch Cloud.

Data in Sketch can be used for creating dynamic text and images. Meaning, you can enrich your prototypes with real content and you can also do a lot more. For example, you can transform your designs into stunning user flow diagrams, or create awesome timeline animations. Moreover, you can render React components to Sketch, and from there create a design system. 

So definitely yes. You DO need a Sketch!

 

Take advantage of Envato Tuts+ and Envato Elements 

If you subscribe to Envato Elements you will also get the learning assets of Envato Tuts+ at your disposal. This is very beneficial because they offer great courses and how-to tutorials to help you learn web design. These are thought by professional instructors and it’s very easy to learn the basics you need. Envato Tuts+ offers over 1,260 video courses and the tutorials are great for beginners.

As for Envato Elements, you should know that it is powered by a community of independent designers. They offer one simple license for all content that gives you wide commercial rights. With their subscription, you get unlimited downloads for a one time fee. This will discard your concerns about providing credits.

 Now you can let your creativity blossom.

 

 Use Google fonts 

As we mentioned above, text and fonts are the core of web content. It means that fonts have a major role in creating process. So we recommend  Google fonts a collection of open source web design fonts that you can use.

In this way, you can easily incorporate typography into your projects and accomplish more beautiful design for your website. The best thing about Google fonts is that you can be sure about the compatibility of typefaces with browsers, and you won’t worry about licensing.

Google’s font collection allows you to test, browse, and categorize fonts in over 135 languages. You have the option to organize fonts depending on trends and your location. You can even create collections of your own that you can share for easier collaboration.

Using Google fonts your web pages run faster and your privacy isn’t compromised. And that’s really a thing!

 

Learn JavaScript

JavaScript is a widely used interpreted scripting language and importance places it next to HTML and CSS. If you want your web pages to display animated graphics and other complex elements JavaScript is the right tool for you.

Therefore, if you master JavaScript, you will be able to do finalize demanding design tasks. You will get to produce dynamically updating content that is the most important thing if you want to be professional.

Once again, W3Schools has a solution when it comes to learning the basics of JavaScript. Similar to their HTML tutorial, you can edit the source code and take a look at the results. They also offer a lot of examples which makes it easier to follow along and understand the explanations better.

 To summarize here: HTML defines the content, CSS specifies the layout, and JavaScript programs the behavior of web pages.

 

Don’t forget about SEO

You want your website to have good position on web? Remember those 3 letterSEO stands for search engine optimization and the design of your website plays a big role in this regard. If your website has a clean code, properly uploaded images, and well-placed meta descriptions, this increases its visibility on web search engines. This means better traffic and more visitors.

Nowadays there are SEO specialists whose job is to optimize SEO and improve your position on the web. But we have to mention that your design has a big impact, too.

It is necessary to properly map out the structure of your website from the start and divide it into smaller sections. This will make your website perform effectively in search engines and lay the groundwork for your ongoing SEO processes. These include things like creating landing pages and link building.

More about the importance of SEO web design on this page by eLink Design.

 

Colors are really that important

There are numerous studies that explain the influence of the colors to human behavior and thinking. Keep this in mind when you choose the palette for your website. The right choice can make it look attractive and increase brand recognition.

First of all, you need to select the dominant color for both your brand and website. Coca-Cola is the right example for that. Even mentioning it makes you think about the red color.

Once you know your dominant color, the next step is to complete the color scheme by picking complementary colors. An easy way to tell which colors mesh well together is using a tool like Adobe Color CC. 

Use complementary colors to highlight website info that is a bit less important. But remember to use your dominant color in the few places where you want your visitors to focus on.

 

Conclusion

After all, we can conclude that learning web design basics is a bit demanding, but not that hard. There are many tools and websites that offer tutorials and ways for you to get closer to creating your final goal. In this article, we have offered many suggestions and resources to help you. These include things like HTML, CSS, Sketch, CodePen, Google Fonts, and more.

Remember that you can use our tool DragDropr which is a page builder that will make this process easier. It allows you to do web design without any prior knowledge or coding skills. You will realize that it is easy and intuitive to play around with web design elements.

DragDropr can help you create your website very fast and easy, and it will make web design an enjoyable process for you. You can pick one of the 200 content blocks that are provided, use the HTML embed option if needed, add and manage products in the simplest way, and much more.