Skills That You Need to Have as Web Developer

Before I became the person that I am now (Fullstack Software Developer), I
never believed in spending my precious time learning HTML and CSS.
Whenever I needed to create a web page, I could go to w3schools, fetch some markup and paste it in my HTML file. I had put my total focus on back-end technologies. I could write very good and optimized algorithms and SQL queries but I could not present my data well on the front side of my applications.

Back then, I used to think that learning HTML/CSS is a waste of time. Today, I am here to inform you (reading this article) that you need to understand HTML/CSS to become a great Web Developer.

It is the essential stage that you need to up your web design and development game even when you only need to be a back-end developer. In this article, I will explain why you need to spend more time learning HTML/CSS, what you will never understand if you don't spend quality time learning HTML/CSS and what I think is the best way to learn HTML/CSS.

Have you ever written a great API for a website but your front-end part of the site seems a little off? Have you ever worked as a back-end developer but your front-end guy can't represent your data as you wish?

Have you ever run into a problem that needed you to fix CSSpositioning but can't figure out how? do you still use floats to create your layout? If that is a "YES", then you need to spend quality time learning CSS and HTML. in fact, you need to learn CSS3 and HTML5 which are the latest specifications needed to create a modern layout, websites and web applications. You need to get your hands dirty by writing a lot of HTML5 and CSS3.

It is the only way that worked for me and should work for you too. If you don't spend quality time learning HTML5 and CSS3 you would run into many issues that would only derail your progress to publishing a great web application. first, the HTML5 specification requires web developers to use elements with semantic meaning.

this means that although you can style a div to look like a button, it is semantically correct to use a button and style it the way you want it to look like. with semantic HTML, you can only use heading elements (h1- h6) inside a section or an article element. A nav element is only used for navigation while the header element is used to group one or more headings elements.

Note: a header cannot be placed inside a footer or inside a header element. The main section of the page should be inside the main element while aside content should be inside an aside element. this leaves us with a div that can only be used to group elements together and create our layouts.

Secondly, CSS3 specification came with an easy way to a great way to create a layout in our web pages. if you still use floats to create a column-based layout, then you need to try either flexbox or grid. they are values added to the CSS display property. with these values, you can create a grid system with easy that responds to any screen size.

it is what I use mostly when I want to create different layouts for my site. it is a time saver and you should try it.

Lastly, media queries are the order of the day in today's modern websites and web applications. media queries help in designing a different layout
for different screen sizes. it enables you to specify the maximum and minimum width that a particular CSS style should apply. with media queries, you can style your website to look different on mobile while
maintaining the goal and objective of the site. media queries are the only way to achieve a responsive design.

Having said that, it is critical to learn HTML/CSS if you want to be a great
web developer. there are many resources online but I recommend creating web pages from scratch.

In fact, what helped me the most was cloning homepages of some of the leading organizations and businesses and having a friend to review what you have just done. I would recommend joining Microverse, a peer to peer learning program that helps you to improve your software development knowledge.