![]() Often in the beginning they I'd ask you a few questions like, what color do you want in the background? Whether you want to be a designer or a developer? What you want to do is pick developer for this case. Start building: Okay, so first thing is open up Dreamweaver. Let's go off now and start building it.ģ. So we've worked out what responsive means, and we know what we're going to be building. We're also going to change the menu along the top here you can see in my Photoshop mockup that they're straight on desktop but they collapse into this other version on the smaller devices. So we're going to deactivate some of them. We'll also do some stuff where you'll notice that there are six on tablet, but only four on mobile. We're going to build this and get down to mobile where it's just stretching one across. But when I get down, watch this, watch this down to the tablet, can you see it changes there? I'm dragging my browser in and out, because the font size changes, becomes centered, the columns go from three close to two. This is the finished version of our website where you can see it matches my Photoshop mockup for desktop. So it doesn't matter Photoshop or Illustrator, but I've designed mine here in Photoshop. Responsive web design just means the website changes to best use the device. So that's our first big term out of the way. The website's going to change shape and change form a little bit depending on whether it's mobile, tablet or desktop. So there's just some font size changes and some reordering of boxes to make it look odd on the different devices. You can see they are very similar, but each design takes best use of the device sizes. So you can see here I've designed what my website looks like on a desktop, what it looks like on a tablet, and what it looks like on a mobile. So first up, you'll need to design your website first in something like Photoshop or Illustrator. Process : So first up, let's talk about the process. Let's get into it now and start working.Ģ. I'm pretty excited about going off and learning more and building my own site. But actually what I really want you to get from this video is to get to a point hopefully and you are like, actually, it's not as hard as I thought it was. We're also going to look at how Dreamweaver makes this super easy for us to do. They sound fancy, but they're actually quite easy once you understand them. We're going to look at terms like responsive HTML5 and CSS3. The goal of this tutorial is to expose you to modern web design. Now you can follow along this tutorial perfectly and you just need to download the exercise files, there's a link down in the description desk, free to download, go and get that, pause the video, come back once you've got the files. Introduction: Hi there, my name is Dan Scott, and in this video we're going to tune you from Web zero to web hero and look to build your very first responsive web page using Dreamweaver. If you prefer to work in code only then this course isn’t right for you.ġ. NO: This course is NOT suited to people experienced in using HTML & CSS. No previous Dreamweaver experience is necessary. Aimed at people new to the world of web design. Techniques used by professional website designers.īasic understanding of responsive web design. Email me what you’re trying to do and check if you’re on the right track. If you're not sure if this course is right for you. No previous Dreamweaver or web design experience is necessary. A free trial can be download from Adobe here. You'll need a copy of Dreamweaver CC 2017 or above. ![]() I'll give you a basic starting point of the site to get the ball rolling, then we'll preview our site and improve the responsiveness. We'll start with defining the site in Dreamweaver. We'll make 3 different responsive points, desktop, tablet and mobile. This would be the perfect starting point for anyone that wants to dip their toes into building responsive websites. I've even got fail-safe exercise files so you can never fall behind. I built this course for the super-newbies. We'll use Media queries to manipulate the sites styling at different widths to give our site responsiveness. We'll make the most of the most up to date web techniques, using HTML5 and CSS3 to present the best site possible. We'll look at responsive web design techniques, as well as making sure you understand exactly what you're doing. Hi, I'm Dan and in this free short-course we'll quickly go through all the basics to creating a simple responsive website using Dreamweaver CC 2018.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |