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 , 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. w3schools 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 and 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. CSS3 HTML5 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. : . 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 or . 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. Note a header cannot be placed inside a footer or inside a header element flexbox grid 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, 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. media queries 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 , a peer to peer learning program that helps you to improve your software development knowledge. Microverse

Fetch

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Skills That You Need to Have as Web Developer

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps