Learning to Become a Web Developer: CSS for Different Kinds of Devices

It had never occurred to me how people managed to get a website for the desktop and then for the cell phone. For some reason I thought they had to design the page twice. I know, I’m a fool.

Well, learning CSS had taken me to discover the secrets of the ancients!

Media Queries!!!

All I have to do is add @media and the range of the screen I want to impact and then tell the HMTL what CSS I want it to apply for each screen.

I mean, sounds easy, but I am now discovering by modifying my website that it can get confusing. Especially if you don’t plan well.

My latest screenshot shows my Dreamweaver screen with the CSS now calling for three different screen sizes. Right now, all @medias do the same, the only thing I modified was the font-size for the horizontal menu at the top.

Also, I change the horizontal menu to be displayed across the screen with a width of 20% per list item and also, I included the image (logo) as an item on the list. I floated the image left and the rest of the list right. Then, I figured how to vertically align this menu by using line-height. It took me a while to figure out how to do this, until I found a forum with the answer.

It’s true that what you don’t know, you google until you find the right answer, I guess.

Finally, I learned about Google Fonts! What a wonderful thing, isn’t it? Just choose a font in google.com/fonts and embed the code in your HTML and CSS and you get access to all these pretty awesome fonts! Amazing!

I like learning. Although, soon I will start JavaScript and I have a feeling that will be my downfall.

Wish me luck!