Learn how to create your first responsive portfolio online
In this series we will take this static design from either Illustrator or Photoshop and together, step by step, build everything in HTML, CSS & Javascript. We will make our own navigation. We will make adjustments so that everything looks great on different mobile devices.
We will work with beautiful fonts & colours & even add Google Analytics to our site to get amazing information about exactly who visits your site.
There are also exercise files so you can follow along.
We’ll use Dreamweaver's handy templating tools to make updates to our site super easy. We’ll create our very own mobile 'burger menu' from scratch learning some basic Javascript & jQuery.
We will use Dreamweaver ‘split’ view so we can use all the good visual tools as well as doing some simple amends in the code as well.
Course Outline
Here's what you'll learn in more detail
-
1
Introduction
- Welcome FREE PREVIEW
- What we'll be building & resources for this course
- Exercise Files and Projects
-
2
Creating an HTML Website in Dreamweaver
- Setting up Adobe Dreamweaver to create websites. FREE PREVIEW
- How to create a new website in Dreamweaver.
- How to create a new HTML page in Dreamweaver & put in your logo
- How best to preview your website in Adobe Dreamweaver FREE PREVIEW
- Moving tags around in Dreamweaver
-
3
Using CSS in Dreamweaver
- How to create, edit & style your first CSS style sheet in using Dreamweaver
- How to change or adjust the CSS styles in your Dreamweaver website FREE PREVIEW
- How to centre your website in Dreamweaver using a container.
-
4
Responsive Websites
- How to make a website change for mobile cell phones & tablets using Dreamweaver
- How to test your Dreamweaver website on a mobile phone or tablet FREE PREVIEW
-
5
Mobile Navigation Menu
- How to create a hamburger mobile drop down menu in Dreamweaver FREE PREVIEW
- Using Javascript jQuery to make a mobile dropdown burger menu in Dreamweaver
- Styling our hamburger menu & getting our url menu to stack side by side
- How to add different fonts to a website in Dreamweaver FREE PREVIEW
- Fixing the style of the mobile burger drop down menu in Dreamweaver
-
6
Adding Content
- Planning for our Dreamweaver template FREE PREVIEW
- Add a background image that is outside our main container in Dreamweaver
- How to use the HTML5 main tag in Dreamweaver
- How to add the HTML5 footer tag to a website using Adobe Dreamweaver
-
7
Templates in Dreamweaver
- How do I make a template in Adobe Dreamweaver? FREE PREVIEW
- How to create new pages based on a Dreamweaver template
-
8
Adding Content 2
- How to create a responsive hero box for our website in Dreamweaver FREE PREVIEW
- Fix problems with div tags when you float left in Dreamweaver aka clearing the float
- How to add and change the styling of a horizontal rule HR in Dreamweaver
- How to create a button in Adobe Dreamweaver CC FREE PREVIEW
-
9
Responsive Content
- Change fonts & spacing of a website for Tablet & Mobile sizes using Dreamweaver FREE PREVIEW
- How to turn off parts of a website in different views like mobile or desktop
- How to create a responsive image grid in Dreamweaver
- How to make your images responsive in Dreamweaver to match the page size
- How to make different columns for desktop, tablet & mobile websites in Dreamweaver
- How to create a clearfix pseudo after class in Adobe Dreamweaver FREE PREVIEW
-
10
Other Pages
- How to create & link new pages in Dreamweaver using templates
-
11
Hosting & Analytics
- How to upload your website to the internet hosting via Dreamweaver
- How to add Google Analytics to your Dreamweaver website
BECOME A MEMBER
With a monthly or yearly subscription, you can have unlimited access to our ever-expanding library of top quality video training courses from the best instructors in the creative industry. The subscription plan gives you access to all training courses.
-
£19.00 / month
£19.00 / monthAccess All Courses
Pay monthly and cancel any time -
£180.00 / year
£180.00 / yearAccess All Courses
Pay annually and save over 20%