About this website
This is a learning or practice website for creating a first website. It's a professional website to highlight your career, skills and talents. This is required work for students in the Introduction to Multimedia, COMM 240, course at Saint Cloud State University. The design is responsive, adjusts to all devices, mobile to desktop, and is based on a website at w3school.com. Learn more details at instructor Jannet Walsh's website, Multimedia Toolkit.
Requirements for Home Page
No less than 100 words required, written in full sentences about your website and you. This is the welcome page to your website and a brief introduction to your site. Add photos, video or more as you like, but don't over do it! You must update the title of the page. Example: Home - Welcome to my website!
Adjust the screen size now!
See how a responsive website works now by adjusting the size of this web browser and see now the content moves around to adjust to the size of the page. That's just like viewing on web page on your iPhone, then on your desktop.
Setting the Viewport
The secret to this responsive design is called the viewport. This code is found the head of this page. Look for it now in the source code of this web page.
Dive right in to web design!
Welcome to the world of web design with Adobe Dreamweaver CC, the latest available application for designing your next website.
Always Required: H1 and H2
Headline - H1 and H2 headlines are required on each webpage. Search engines use the information in the H1 and H2 to to help visitors find your webpage.
Image Wrap Example
If you anat your image to be wrapped around an image, you can set up a CSS rule to do just that! The style sheet of this page already has it set up. You must need to add .image-wrap to the image in the Heads Up Display, the little blue box that looks like a sandwitch, and the CSS will know what to do. Look at the source code now and look for the .image-wrap rule. Learn more about floating and wrapping an image at w3schools.com.
Image Float Right Example
This is an example of an image that has been floated right. Just add .float_right to an image in the Heads Up Display and CSS does the rest. Look firth the .float_riight in the source code of this page now! Learn more about floating images at w3schools.com
Image Float Left Example
This is an example of an image that has been floated left. Just add .float_left to an image in the Heads Up Display and CSS does the rest. Look firth the .float_riight in the source code of this page now!
Responsive Image Example
This image will adjust to the width of the viewpprt of any device, mobile to desktop. Try adjusting the image now by pulling on the side of your browser or scrubber bar! Learn more about responsive images at w3schools.com.
Here is an example of a YouTube embeded in an HTML page. Look at the source code now to view the special attributions, code, that is placed around the YouTube iframe embed code. You'll need the code to make the vide responsive, adjust to all devices!
GitHub and Code
The code for the resposive video is found in the source code of this page or you find it at GitHub, see Responsive YouTube HTML.
Let's go social!
Write a short biography here or something important to tell your visitors!
Something else goes here.