Welcome

-

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

Comments

Post a Comment

Popular posts from this blog

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...
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...
Read more