The Coding Express

Welcome back, guys...it's been almost a week since the last post in which I wrote down some of the best ways to practice HTML and CSS. Hope you have tried at least some of them including Free Code Camp. Now let's move forward learn some important things in CSS.  Till now we have created so many CSS elements but they all miss one common thing in them. They are not responsive. Yes, all the components look good on our desktop's full-size screen but if you look them on mobile devices, they are really bad. That's where CSS Grid comes into the picture... What is CSS Grid? CSS Grid Layout is the most powerful layout system available in CSS which will make layouts responsive.  It is a 2-dimensional system, meaning it can handle both columns and rows. You work with Grid Layout by applying CSS rules both to a parent element (Grid Container) and to that element's children (Grid Items). Introduction While learning CSS to place our elements on the page, we used

Hi everyone, it's been 2 days seen my last post. So sorry, for this gap...but it was really unavoidable. I was also thinking what to do next in our web development journey. So let's discuss what I was planning... The Plan In the last 70 days, we have learned complete HTML and lot of CSS with various examples and layouts. We have covered almost all basic CSS needed for web development but yes, a lot is remaining which includes: CSS Grid CSS Flexbox CSS Animations Responsive layouts and much more... But before going any further, I think we should practice what we have already learned so that we become perfect in what we know.  How to practice? According to me(and many others) there is no better way to practice web development than Free Code Camp. If you have never heard about, freeCodeCamp is a nonprofit organization that consists of an interactive learning web platform. It has small quizzes where you have to write a code which will be checked and if it is correc

In the last two articles, we are creating a layout for the standard website by including various components we created while learning HTML and CSS. We have already added a header,  navigation bar and content with 3 rows which are not responsive. So let's start today with making it responsive... Make it Responsive If we see at our layout of the content, it always shows 3 columns side by side(Although not in Codepen as they add their own code to make it responsive). We will now write a piece of code that will change it to only one column on smaller devices. @media (max-width: 1200px) {     .column {         width: 50%;     } } @media (max-width: 600px) {     .column {         width: 100%;     } } What will above code do? If the width of the browser window is less than 600 px, the width of each column is 100% so that only one column in each row. Similarly, if the width is less than 1200 px, the width of each column is 50% so that there will be two columns in each row.

In the last article, we started creating a standard website layout and added a header to it which contains website name and logo. Now let's add more components to it to complete our website layout. Navigation Bar It contains links to various pages and topics for easy navigation. We have already created navigation bars in previous articles. Let's add one below header... See the Pen <a href='https://codepen.io/blackbird98/pen/parPmR/'>WDS70-1</a> by blackbird (<a href='https://codepen.io/blackbird98'>@blackbird98</a>) on <a href='https://codepen.io'>CodePen</a>. Now as we have implemented navigation successfully, let's see how we can add content. Content This is the part where website show creativity. We can have various types of layouts for this section like a single column, double column or multi-column depending on what content we have. Here, we will create three column layout and will change it to one co

In the last article, we learned about automatic numbering in CSS. Although you will not require in day-to-day operations, itis good that we learned about the concept of CSS variables. Now we have already covered basic concepts of CSS, today we are going to learn about standard website layout. Let's begin... Website Layout We see hundreds of new websites every day and of course, they follow different design and layout pattern. In this article, we are going to see one of the most followed layout patterns in terms of the website. The above layout contains following basic elements: Header which contains brand image and name Navigation bar containing links to various pages Main content Left and right sidebars containing extra information and links Footer containing copyright information and some extra links Now if you look carefully, we have created all these individual components separately and this is time to put them together in proper method and layout. Heade

In the last article, we learned about styling forms in CSS. Till now we have covered many major things in CSS. Today we are going to learn one more thing which you may use for sequence creation. Let's begin... CSS Counters There are some variables maintained by CSS whose value can be incremented by CSS rules. Counters are one of them. We can use them to count of some type of content. Automatic Numbering Counters can be used for automatic numbering. Following properties are available related to counters: counter-reset - Creates or resets a counter counter-increment - Increments a counter value content - Inserts content counter() or counters() function - Adds a value of a counter to an element Here is an example of what we are talking... See the Pen WDS68-1 by blackbird ( @blackbird98 ) on CodePen . That's all for today. It is really short and easy concept. It is required very few times but it is better to have knowledge. In the next few articles, we a

In the last article, we learned about styling the form elements and we covered input part of forms. In this article, we are going to cover remaining parts of form like menus and buttons. Let's begin... Style Menus As we know, that to menus in HTML we use a select  tag with dropdowns defined in options.We can use this select tag to style the menus. select {     width: 100%;     padding: 15px 15px;     border: none;     border-radius: 4px;     background-color: #f1f1f1; } Button Styling We have to cancel all text decorations to remove underline which is default. Also set cursor value to pointer so that to change how our mouse works. input[type=button] {     background-color: blue;     border: none;     color: white;     padding: 15px 30px;     text-decoration: none;     margin: 4px 2px;     cursor: pointer; } Let's create a final form using all the points learned in this two articles... See the Pen WDS67-1 by blackbird ( @blackbird98 ) on CodePen .

In the last article, we learned about attribute selectors in CSS and it is really great to have some more selectors than just class or id. Moving forward, today we are going to style the forms using CSS. We have already learned to create forms using HTML. Let's style them so that they become more appealing to users... Add Basic Styling See the Pen WDS66-1 by blackbird ( @blackbird98 ) on CodePen . Explanation : width is set to 100% so that it occupies whole horizontal space padding is used to get padded inputs inside the input box the margin is used to get proper space between to input fields border-radius is making curved corners Colored Inputs Add background-color to input and color property to change the color of the input text. Focused Inputs Add hover pseudo-class to change input field when the user focuses on input. See the Pen WDS66-2 by blackbird ( @blackbird98 ) on CodePen . That' all for today. You can use various styling techniques learn

In the last article, we learned about creating tooltips using CSS and we can now place help text on web pages easily using CSS. While using CSS so far, we are selecting elements by their tags, class or id. Today we are going to learn to select elements based on attributes they have so that you can select elements more easily.  Let's begin... CSS [attribute] Selector With the help of [attribute] selector, we can select elements with the help of specified attribute. To select all the images with attribute alt , we can write following CSS: img[alt] {     border: 1px solid black; } This code selects all the images which have alt attribute and apply a border to them. CSS [attribute="value"] Selector With the help of [attribute="value"] selector, we can select elements with the help of specified attribute and value . To select all the images with attribute alt and its value equal to nature , we can write following CSS: img[alt="nature"] {  

In the last article, we learned about dropdown menus using CSS. It uses very simple concepts like pseudo-classes, display property in CSS and HTML lists. Today using same concepts, we are going to create tooltips. Tooltips are used for giving user extra information about a hovered item like buttons, links or any other text or images. Let's begin... Create Basic Tooltip Important points to note: Create div containing text to hover inside which another div containing text to be shown after hovering Initially hide the content of second div using visibility property Use :hover pseudo-class on the first div to change visibility property of the second d iv Create tooltip example yourself before looking the code... See the Pen WDS64-1 by blackbird ( @blackbird98 ) on CodePen . Position Tooltips In the previous example, the tooltip was positioned on left, but we can change position as per our choice. We can do this by setting left, right, top and bottom properties on

In the last 3 articles, we learned about various ways to implement navigation bar using CSS and now you can easily implement them in web pages. Moving forward, we are going to learn about dropdowns in CSS. Dropdowns are used when you have to give more information about a particular element but do want to show only if the user is interested. Create Basic Dropdown Important points to note: Create div containing text to hover inside which another div containing text to be shown after hovering Initially hide the content of second div using display property Use :hover pseudo-class on the first div to change display property of the second div Now create dropdown yourself without seeing the code... See the Pen WDS63-1 by blackbird ( @blackbird98 ) on CodePen . Create Dropdown Menu The example is very similar to the previous one except we will add a list of links inside hover content. See the Pen WDS63-2 by blackbird ( @blackbird98 ) on CodePen . Create Dropdowns Inside

In the last two articles, we learned about vertical navigation bar and also created a full-size navigation bar in one example. Although it looks's awesome, most of the websites still use horizontal navigation bar. Let's learn how to make it... Horizontal Navigation Bar All the basic concepts learned while creating vertical navigation bar will remain same. So first create from what we already know... See the Pen WDS62-1 by blackbird ( @blackbird98 ) on CodePen . Right Align Links We usually see that some links in the navigation bar are aligned on the right side so that they become separate from other elements and they represent some important action. Its mostly used with Login and Register buttons. To achieve this, just add float:right to that element. Add Dividers You can add dividers between each element in navigation bar by using border-right property on each list element except last-child of list. li {     border-right: 1px solid white; } li:last

In the last article, we learned about navigation bars in CSS and designed one decent looking vertical navigation bar. Let's continue our learning to design a perfect navigation bar... Help user to know page/ link We can add the active class to current link to let the user know which page or link he/she is on...Let's say on the Home page, you will add the active class to the Home section of the navigation bar. .active {     background-color: #FFC300;     color: white; } Little bit of Styling We can add a border to the navigation bar and also to individual elements. The only thing to note that, while applying a border to elements only use border-bottom on each element. If you use the border, then you will get double borders due to bottom of above and top of the below-placed element. You can also align elements to center to look beautiful. ul {    border: 1x solid black; } li {    text-align: center;    border-bottom: 1px solid black; } li:last-child {    bor

In the last article, we learned about opacity property in CSS and I concluded the article with one example for you to solve. Hope you completed it... Now in this article, we are going to learn to create navigation bar which we frequently see on any web pages nowadays. Although we will learn easy and better way to do this using Bootstrap letter, navigation bars will make your web pages better for sure.  So let's begin... What is Navigation Bars? It's just 'list of links'. We will create a simple unordered list of links in HTML and will change that boring looking menu of lists into something beautiful. Let's create a simple menu just using HTML and apply a little bit of CSS. We have just used CSS to remove bullets, margin , and padding of elements of the list. This will also be our base HTML code to create navigation bars. See the Pen WDS60-1 by blackbird ( @blackbird98 ) on CodePen . Vertical Navigation Bar To make a vertical design bar, we have to styl

In the last article, we completed learning pseudo-elements in CSS and now it's time to move into ' real ' world  😃. In today's article, we are going to learn about making elements transparent using CSS. Let's begin... Make Images Transparent The opacity  property is used to make images transparent. It takes value in range 0.0 to 1.0. A lower value represents a more transparent image. Although this opacity is property works in all browsers, for Internet expolrer(version 8 or earlier), use:  filter: alpha(opacity = x) ,  where takes value in range 0 to 100 with lower value represents more transparent. Here is an example... See the Pen WDS59-1 by blackbird ( @blackbird98 ) on CodePen . Combine Pseudo and Real As we have already learned pseudo-class :hover , we will use it to style our image. We will put a default value of opacity to 0.4 and will change to 1.0 when hover class is active. See the Pen WDS59-2 by blackbird ( @blackbird98 ) on CodePen . T

In the last article, we started learning about pseudo-elements in CSS and we covered two pseudo-elements: ::first-line and ::first-letter which are very helpful in selecting first line and the first letter of text easily. In this article, we are going to learn some more things about pseudo-elements. Let's begin... Combine pseudo-elements with CSS classes We can use CSS classes to select elements more precisely using pseudo-elements. Let's say we have two paragraphs and we want to customize first-letter of the just first paragraph. In this case, we will give some class to first-paragraph and then use it while applying pseudo-elements. If we give specialPara  class name to that particular paragraph: p.specialPara::first-letter {     color: #00FF00;     font-size: 1.5em; } Can we use multiple pseudo-elements? The answer is why not? You can use as many pseudo-elements you want on any given element. Till now we just know ::first-line and ::first-letter . S