How To Start Learning HTML And CSS3

Attention...

If you have already started to code on your own, then you know how frustrating it could be. It is also possible to have at some point stopped to ask yourself “how am I supposed to do this”?

"I know what I want to learn, I am reading about it, I am doing a little bit of practice but I am not sure of what else I need to know".

If this is or has been your thoughts, you are not alone. I started to code sometime in 2015, gave up and also only begun again in 2019. Trust me when I say you are not alone and if you have also given up or are about to then this article might be for you.

What you have been missing!

Learning platforms like Freecodecamp and The Odin Project have some amazing resources that have been helpful to me but have also discovered that by having a coding partner and a mentor, I can also have someone I can be accountable to. These both make your programming journey a lot easier and swifter.

Let me make HTML/CSS as simple as possible for you...

What is HTML?

HTML, Hypertext Markup Language is what gives a web page its structure. Every text on a page is in an HTML tag that tells your browser “hey, this a heading, a paragraph or an image”.

What is CSS?

CSS, Cascading Style Sheet is more like a presentation style language that tells your browser how to display your HTML tag by, for instance, giving it a brown color and pushing it to the center of your page.

Some things you want to pay attention to...

1. For a start, you can check out the chrome developer tools by right-clicking on any web page and selecting the“inspect” option. This will show you how the web pages are structured and give you a better idea of how web design is done.
2. One of the things you need to focus on is learning about HTML Page structure especially with the use of semantic elements.Semantic HTML gives more meaning to your web page. They give a more accurate description of the purpose of an element and the type of content to put in them.
3. CSS Box Model - The box model concept tells you that every element on a web page is a rectangular box and may have a width, height, margin, border and padding. In other words, every element on a web page conforms to the CSS box model.
4. You should also pay attention to typography. This includes text properties, font properties, color etc.
5. CSS Floats and Positioning - Floats and position attributes are how you get an element to exactly where you want it to be on a page.
6. CSS Flexbox fixes the limitations of floats.
7. CSS Grid affords you more layout opportunities for a wide variety of screen sizes including mobile phones and tablets. It is a system which works with rows and columns.
8. You also want to check out how to display pages on multiple view ports(mobile, tablet and desktop) using fluid layouts and media queries using CSS Frameworks such as Bootstrap.
   

Some amazing resources to help you understand some of this points are

• CSS Tricks
• ShayHowe
• WesBos' Tutorial

If you have decided to keep on being on this journey well..Congratulations.

Coding is hard but the best way to learn to code is to code.I have discovered by learning with Microverse that creating a from-scratch replica of a particular website, in other words, cloning a website, is one of the best and most practical ways to get to learn to code and to test to know if you know what you think you know.


So start coding today and always remember...

“the best way to learn how to code is to code”.

Follow me on Twitter , Github and LinkedIn