The Coding Express

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"] {