Yo ninjas, in this responsive design tutorial, I’ll show you how we can make our images responsive. There are 2 way – using relative measurements, or by using the relatively new HTML element, the picture tag, along with a polyfill called picturefill –
SUBSCRIBE TO CHANNEL –
========== CSS for Beginners Playlist ==========
========== HTML for Beginners Playlist ==========
========== The Net Ninja ============
For more front-end development tutorials & to black-belt your coding skills, head over to – or
Let’s talk about CSS media queries in this web development tutorial. And if you’ve never heard of what a media query is, that’s perfectly fine. We’re going to start from the ground up. A media query is a tool in CSS that allows for us to implement responsive design elements. When I say responsive, what I mean is what I’m going to show you right here. I have two nearly identical sites. One is responses and uses media queries, and the other one is not. We’re going to walk through, after this demo, we’re going to walk through the code and we’re going to implement a full media query for this homepage. Let’s first look at a media query based site. If I open this up, what I can do is it looks good on desktop and then if I were to access this on a mobile device, which I can mimic by just bringing this down here, you can see that the entire site readjusts. This is what someone coming on an Android or an iPhone would see. You notice how we have the logo has readjusted. It’s now at the top. And then we have the navigation elements are stacked on top of each other. And then the same thing with the contact information.
Then everything else has also readjusted. This is looking really good. This is the kind of experience you’d want to see on a mobile device. Now, if you open up a site that does not have the media query though, and then try to perform the same action, you’re going to get very different behavior. Notice now, if I take this down to the same size, that it does not readjust. Someone accessing the site’s going to load it up and they’re going to see this distorted looking page. They’re going to have to scroll to the right. A bunch of things are kind of shrunk in and overlapping. This is really not a good experience. This is the reason why media queries are so powerful. Now that we have a good idea on what they are, let’s walk through how we can implement them.
I have this page open and I have the code open for it right here. I’m going to start by creating a new style sheet here called media queries. This isn’t necessary, this is just because I want to be able to have all my media queries in one spot. It will also be easy for us to see them. Let me open that up and in the styles directory, I’m going to save a file called media queties.css. Then here, we’re going to be able to add all of those. Now, the syntax for using a media query is … it looks a little bit different if you’ve never used it before. It starts with a @ symbol. Then you say media. Then this is a method or a function. That means it takes an argument. The very first thing that we have to provide is the breakpoint. If I say medium max-width. Then I’m going to use 615 pixels. What this is going to do is this is going to say that whenever we have a screen that is below 615 pixels wide, which is a pretty standard size for using with smartphone devices, then I want you to apply these styles.
Now, whenever you’re using media queries, a trick to make sure that you are following is your media queries should be at the very end. They should be the last styles that you include. The reason for that is because if you have media queries and then you call other styles after that, they will override it. You need to make sure you call that at the very end. What this is going to do is the browser’s going to look, it’s going see all of these media queries, and it’s going to check and say, “Okay, these are the styles I am going to apply, and I’m going to run these if the screen is 615 pixels or less.” You could do this for any of them. Let’s just test this out.
If you look at the index here in the navigation wrapper, you can see that we have navigation wrapper and then we have all of these items inside of it. We have a left column, a center column div, and then a right column. I think this is going to be a great place to start. If I say navigation-wrapper. Then inside of here, I’m going to change the flex direction. Instead of having the default row, I’m going to change it to column. Then I also want to update the height so it’s 100%. Let’s see what this does for us on our site that previously was not working on mobile. Let me open this up in a new browser window. Now, if I shrink this down, you can see that when we hit that breakpoint, you see how this got readjusted. Before, that was not working. Before, it just simply went to the side and then it didn’t shrink down and it didn’t stack it on top of each other like that.
Host Unlimited Websites For $3.88 !
Unlimited Hosting, Free Domain, MySQL, PHP, CGI, SSL, FTP, Stats, $150 google adwords, E-Commerce Included, Dreamweaver Ready,
30 Day money back guarantee
In this Dreamweaver Tutorial by James at We will learn how to make the new CSS3 Rounded Corners to make our web pages look more bespoke.
Link to the Free Download will all of the Rouned Corners CSS3 Rules:
In the download you will get:
1 x web page with all CSS3 Rouned Corners Rules.
Designed by myself with my Hard Work for you to keep and most importantly learn how to used rounded corners css.
You will learn how to make curved corners css and the curnved corners will be make using CSS3 styling which is in the last phase of processing and is currently working on most Major Browsers except IE and Opera.
I have used html rounded corners on my designs for the last 10 months but now they are about to be release I have made a tutorial showing you how to utilise the curved edges css in your own website designs.
My Dreamweaver Tutorial Website:
Follow me on Twitter:
My RSS Feed for Tutorial Updates:
I hope you enjoy this dreamweaver tutroail on css3 rounded corners and if you have any questions please leave a comment for me to respond.
Let’s explore the Wedding RSVP template from Wix.com. Learn Web design along the way, from a Wix Certified Trainer.
I will teach you how to build Wix websites from concept to automation at www.webmasteracademy.online
Description of the template from Wix:
This fun, colorful design is guaranteed to get guests excited about your special event. Customize the template with your own details and easily collect RSVPs through Wix events.
Good for a Wedding, Anniversary, or Engagement
Hello everybody, I’m Michael Wood. Welcome to the Webmaster Academy. Today I’m going to be talking about the “save the date” template from Wix.com. This template is really great for
any type of special event where you want people to RSVP. So it’s not just for weddings. You can use it for anniversaries, or engagement parties, or anything else that you want to celebrate. This is a quick website template you can use to get people to easily RSVP to your event electronically. Now, there are
different services out there that do this sort of thing and they’re dedicated to that. That’s fine. But again this class is about web design, so you’re going to learn not only the functionality but you’ll learn the web design that goes behind it. That’s the advantage of using a web design program to create your RSVP. If you use a third party, you’re going to pay them a lot of money and you will not really learn anything along the way. So let’s go ahead and get started with the “save the date” template from Wix.com. Although, you don’t have to use Wix to understand the design principles that are being applied here.
Let’s first take a tour of the website itself and then at the end
of the video, I’ll show you how to customize the site to match your own theme or event. Let’s go into the site itself now and what I’ll do is I’ll do a quick refresh because this is the best way to see any kind of animations that might be happening. So you see, the title is animated that says “Emily and Daniel” “save the date” At the top left-hand corner, we have the home button and the RSVP button. Just two buttons. Very simple.
Scroll down and you could see the little animations and the fun cartoons that are here. By the way, you can use all of these cartoons and animations as part of your template. That
comes with the template itself. Here we have the couple dancing. It’s very fun. A little bit of a retro feel to it.
So that’s a pretty simple site. It just says “hey follow us” “check out the date” and “don’t forget to bring your dancing
shoes” and this site will allow them to RSVP. If you click on RSVP that then takes you to this button here, “RSVP button” And now we’re going to use Wix Events to get the job done. This will simply fill out their first name, last name, email. Hit submit.
Here’s the best part. They will get email confirmations and reminders about the event. They will even be able to cancel if they need to, electronically, so a lot of these things will be handled on the back end. And you, as that final user, will be able to get a list of all of your RSVP participants and you can then continue to send them Shoutouts and other types of emails. You will have control of that list and you know it’s happening all in the background.
This is really web design at its best, its simplest, and its finest. Because a great website allows you to do the things you love to do without babysitting the code in the website itself. Let the website work hard for you and that’s what this template does. It’ll collect those names and lets the guests know about the information, so once you build your website, you would go ahead and get that link and then share that link across all of your social medias or whatever campaigns that you want to launch. That link will give them the information and the ability to RSVP so it’s very simple to set up.
Now Let’s talk about how to customize the site for yourself.
See the complete transcript at www.webmasteracademy.online