Intro
Now that I've finished up my first project it's time to give some more love to the website. The next few days I'm going to be looking into how to make a more responsive website. Some of the blog post will be a lot shorter as I do research on how to upgrade the website. The website will also get some heavy updates as I go through this. I'll also add all the links of articles and videos that I'm referencing throughout this process
Media Queries
Did you know that google ranks sites with how mobile friendly they are, it's true! That's another reason why you should be looking into a responsive website. With media queries you can check things within your website and the screen that your user is using to look at your site with. This could be width or height or even the ordination of the device. Media queries can be written in CSS like how piece of html is written and then nested in curly braces. Some of the common break points are
- Mobile devices 320px – 480px
- iPads and tables 481px – 768px
- laptops and small screens 769px – 1024px
- large screens and desktops 1025px – 1200px
- tv and extra large screens 1201px+
Flex Box and CSS Grid
Two more things that can help you organize your website and make things work a little better are Flex box and CSS Grid these both will help you design your site and make them fit and be responsive. I will talk about both of them in more detail tomorrow as I research more.
Responstive Text
Also when you are building your website you will need to think about text. Text will look crazy if you are looking at the website on your phone and it has text that should be the size for your phone
That's it for today with the responsive design. I will be talking more about flex box and CSS grid tomorrow and after that it will be applying our skills on the main website.
