If you are thinking of joining Web Design/Front End Web Development course, it will be better if you be familiar with some html and css codes before joining any learning center. The best way to do this is, there are several online resources where you can get proper knowledge not just this one but several other topics. Among them, I personally suggest “https://www.codecademy.com/“. I will guide you through the complete process here.
- Open https://www.codecademy.com/
- Sign in with one of the social media option (Facebook, Google, Github) given on the home page or sign up to create an account.
- After signing in, click on “Catalog”, select “HTML & CSS” in “BY LANGUAGE” heading.
- You will find list of courses there, click on “Introduction to HTML”
- Click on “Start”
- Now you will find a page with 3 sections where you carefully read first section, write code according to the first section instruction in the second section and view result in the third section.
- All you have to do is carefully read the instruction, code accordingly and then click on run. The next button will activate only if you have correctly finished the task assigned. It means your codes are being checked in every step whether it’s correct or wrong.
- Finish all the task until you finish the free section which will go from HTML and CSS basics and proper use of them simultaneously with projects they assign you to finish. You will learn more than basics to start learning professionally after that.
If you are going to join “Halftone Designs” for further learning, this learning from Codeacedemy will save you at least a week’s time and fee.
Read this article on Medium.
CSS grid layout gives us grid-based layout system without using float and position. It provides us to create two dimensional layout web page in the line items with both rows and columns. Like tables, grid layout also author to align elements into rows and columns. It is method of creating Grid-based layout that is described in CSS and not in HTML. Continue reading “CSS Grid Layout”
How many you know about this topic? Which html element is called block level and which is inline? I’m afraid most of you don’t have the proper knowledge. So, let’s discuss about it here, assuming you know the CSS.
Block level element is that which have by default the CSS property “display: block“, goes across the browser window when placed in an html document without any CSS properties applied. HTML tags in this category are div, p, form, heading tags following h1 to h6 etc. You can try it by yourself placing some elements. In other words, the element which by default, if placed after an element, starts from next line is block level element. CSS is very powerful that we can convert block level to inline level by applying attribute “display: inline“.
Now, talking about inline level element, I don’t have to tell further about it considering above discussion. But here, one new CSS attribute “display: inline-block” also. Inline level element doesn’t support width, height, margin and/or padding CSS attributes unless you make it “display: block” or “display: inline-block“. You need to add “display: inline-block” when you need two elements on the same line and with their margin, padding, width and/or height attributes. Or, if you need the inline elements to be appeared in next line, you have to add “display: block” attribute. In this way you can also skip “<br/>” (inline elements need <br/> tag for line break) tag for line breaks. HTML tags in inline level category are a, font, strong, span, strong etc.
Web development is not an easy job because a web developer has to deal with not only currently available Devices (Computers, Tablets, and Phones etc.), OS Platforms (Windows, OSX, IOS, Android etc.), Web Browsers (Google Chrome, Mozilla Firefox, Apple Safari, Internet Explorer etc.) Continue reading “Common mistakes of a Front End Web Developer”