In my first encounter with web technologies, a lot of things were complicated to me and almost to everyone I know till now. There are a lot of questions about how a page works, how it is built and what is the logic behind it. So let’s clear out some things here for those who want to be Web developers and don’t have a clue about programming.
1. HTML and CSS first contact
I found necessary to learn HTML and CSS. They are the look of the page as well as the pillars of it.
HTML is a markup language that focuses on structuring your web page. It includes buttons, forms, headers, paragraphs and a lot more things that will be noted afterward.
CSS is about to organize your HTML elements, prettify them and make your web page look amazingly beautiful so that it can be attractive to your customers.
This is a necessary step to make as a beginner web developer as you won’t be able to produce anything without these required bits of knowledge of building up a web page.
You can check out the following links that will guide you through HTML and CSS to learn the basics and more.
Great! So if you have checked these links by now you get the general idea of structuring a page.
2. How to get a step ahead
All these things are looking like loads of new things that you need to learn. But where are you going to start so that you can be a step ahead and don’t get yourself confused about it? Let’s talk about grids and flexbox!
Here is a very common structure of a web page:
So how are we going to split things up on our page? Isn’t this difficult to place elements using margin and padding attributes? Yes, it is! That’s why you need to divide it into equal square sections and find a much easier and more organized way to do it. Here is how the content section looks when it will be divided.
That’s were grids and flexboxes kick in to make your page look awesome! Check out the following links about grids and flexbox:
3. Get Responsive
The last and very important part you have to complete to become a great web development is the responsiveness of your app or web page. Users can visit a website through a smartphone, a tablet, a computer or other devices that differ in their screen size. When you first build your page you can use your browser's tools to test your page’s breakpoints. Breakpoints are these points where your page looks different in various screen sizes. Right-click anywhere in your browser and click ‘Inspect Element’. Then click the devices icon
and play with the screen size so that you can understand where the problem is.
A simple way to fix responsive problems is through media queries where you can change an element's attributes in specific screen pixel range. Check out these links!
4. Ways to learn
The best way to learn is to try to copy some site’s front-end structure. You can find a great and beautiful website in CSS Garden to check your skills and learn a lot of great ways to handle an HTML or CSS element.
Follow CSS tricks snippets for a more advanced way to manipulate your ideas and thoughts! When you start all this you need to be focused and willing to learn.
Don’t give up! You got this!
5. What’s next?
If you feel comfortable enough about your HTML and CSS skills, the next important step is the Javascript section which is essential for many functionalities at your HTML elements and SQL for data manipulation in your app!