Posts

Minifying your CSS files

-
Image
What is minification and why minify your CSS files? When you minify a CSS file you're reducing the size of the file which makes it faster as it can render much more quickly. Minifying reduces the file size by deleting whitespace, comments, line breaks and anything unnecessary for the program to run which only makes the code more readable to the human but actually makes the file larger which isn't ideal for browsers because it may affect the time it takes to load the page, especially with larger projects. Why it's important Nobody likes a website that takes some time to load and in many cases, they'd just leave the website. It also improves SEO (Search Engine Optimisation) – how websites rank your website in search results. Faster load times will boost your website's ranking with search engines and this is one way to improve the speed at which your webpage loads. How to minify your CSS files? You could do it manually but that's not ideal, especially...
Post a Comment
Read more

CSS Flexbox made simple (Part 1)

-
Image
display: flex; This is used to create a flex container which becomes flexible. This is when the display property is given the value of ' flex ' as shown above. The default value of the flex container is row . What this means is where items in the container were otherwise in a column, i.e. vertically or on top of each other, these will default as rows in the flex container. This can be adjusted using the flex-direction property. EXAMPLE : flex-direction: column; This would make the items align in a column as opposed to the default row like when display: flex; is not used. This is shown in the code example section. Code Example: This shows the HTML used to help explain how the flexbox works. Here, the flexbox is within a flex-box container. This will be shown in the CSS which will be applied to the id of flex-container . The parent div is given the id of flex-container . Inside of this flex-container are two further div tags, one of which has an id of first a...
Post a Comment
Read more

Simple Beginner Guide to getting started in web development and writing code (2019)

-
Image
With so many resources out there, as a beginner, it's quite easy to get overwhelmed; wasting a lot of time and not actually getting anywhere. Progress is slow. This guide is written to tackle that. It's written for beginners to get you started writing code as quickly as possible. This guide covers the fundamentals to get you started. Step 1: Download Atom There's plenty of text editors you can use, including Sublime Text, Notepad++, Brackets among others. In this guide, I'm going to recommend Atom. It's an excellent editor for web development and it's free. You can download it on both Windows and macOS. Just visit the website here and you'll be able to download it. Step 2: Install atom-html-preview package Once you've downloaded Atom, go to settings and search for the ' atom-html-preview ' package. This is useful for seeing a live preview of your code as you type, i.e. how it looks on the webpage. This is not necessary however, you cou...
Post a Comment
Read more

Welcome

-
Image
Welcome to theWebDevBlog! This blog is all about web development and covers a range of topics and areas, including front-end and back-end web development! Follow us on Twitter @theWebDevBlog1
Post a Comment
Read more