![]() Now we will begin styling the mobile-style CSS and we will be only specifying those properties which we want to override in our original stylesheet (desktop-style).Īccording to the design we saw in the beginning, we want our content to have no margins and cover the entire mobile screen. This marks the end of our styling of the desktop-style CSS. ![]() The button and the hyperlink have been given some styling in accordance with the theme of the webpage. ![]() Here, the flex-direction property is a column which means the wallpaper image and the download button will be stacked one on the top of other. There is yet another flexbox used on the webpage, which is the div container with the class ‘ wallpaper-item’. The images inside the rows have been given padding of 5px and have been given a width which is almost 1/3 rd of the container’s width so that every image covers almost equal space. Then, the div container with the class row is also declared as a flexbox, but now the flex-direction has been specified as row, this means that the three wallpapers inside the row will be stacked one besides the other. Which means, the div containers with class ‘ row’ will be one on the top of other, giving us two rows on our webpage. ‘flex-direction: column’ will ensure that my items inside the wallpaper class are stacked on top of one other. ‘ justify-content: centre’ aligns everything inside the flexbox horizontally and centrally while ‘align-items: centre’ aligns everything inside the flexbox vertically and centrally. This is how you can incorporate the usage of flexboxes on your website.Įverything inside the section with the class wallpaper is now wrapped inside a flexbox. CSS Flexbox is a basic property which lets you create responsive websites in no time! The entire wallpapers container has been given ‘ display:flex’. Here is where your website’s responsiveness actually starts to build. ![]() I have also added a blockquote to highlight my favourite quote by Kakashi Hatake. It helps to make your code look cleaner and more readable. There are a header section and different sections for different content. Here I have put all the content to be displayed on my webpage into a container to give a nice centralised effect on the desktop screen. One thing you should keep in mind is, the stylesheets get executed from top to bottom, so make sure you have added them in the correct order. You can play around with different device widths and orientations and add as many stylesheets you want. Here I have added the property which will enable ‘mobile-style.css’ to get executed when the device width goes below 630px. This attribute controls the display of the stylesheet. Notice there is another attribute in this link tag, media. This stylesheet contains all the styles required for a pretty version of our website on a mobile. After that there has been added another stylesheet ‘desktop-style.css’, this is our main stylesheet which will contain styles that will make our website look pretty on a desktop.įollowing ‘desktop-style.css’, there has been added ‘mobile-style.css’. ‘reset.css’ is added to reset all the browser styles and make sure your webpage is viewed the same across all browsers. This is a basic head skeleton of our webpage. We need a header image, a bold heading of the webpage, some content, a quote, six wallpaper images with a download button associated with each image to offer a download functionality. Writing the HTML code is like preparing a skeleton for our webpage, let’s break it down in very simple terms. This is how the webpage will look on a mobile device: The introduction text on the webpage is taken from, the quote is an original quote written by Masashi Kishimoto (author of Naruto series) and the wallpaper images are taken from Pinterest. We will be building a basic webpage which will contain an introduction, a quote and some wallpapers of Kakashi Hatake, a popular Naruto character. But what if you have just started in web development and your mind has already overflowed with information about HTML, CSS and JavaScript? Even if you are already well versed with all the three technologies, and you are ready to use a framework, it is important to understand their ‘behind-the-scenes’, to understand how exactly responsiveness is being implemented within a few lines of code.Īlways remember, clarity of basic concepts leads to the creation of wonderful pieces of technology. There exist numerous frameworks which let you make your website responsive with ease. To ensure your website is easily viewed on each kind of device and each kind of user is able to use it completely, you need to think about responsiveness and apply it for a wholesome user experience.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |