Digital Media Web Design 2a: Build a Portfolio Website

Before you can begin the process of creating a website, you need to know a few basics, which is what we’ll cover in this unit. We begin with a description of the devices and networks that make up the internet and an explanation of how data travels from one place to the next. We’ll also cover the web development languages and tools you’ll need to know about in order to effectively plan, create, publish, and host a website.

What will you learn in this unit?

• Describe the basic elements and networks that make up the internet
• Explain how data is transferred from one device to another via the internet
• Identify the most often used programming languages for creating websites and how they are used
• List and evaluate the tools necessary for web publishing and hosting

Our goal is to eventually create an engaging website. To accomplish this, we’ll begin the process of learning how to write code in HTML. We’ll start with learning about the required HTML elements that must appear at the top and bottom of every HTML document, and then we’ll analyze how to format text and data on the page using tags for headings, paragraphs, lists, tables, breaks, links, and images. We’ll also briefly cover the layout tags for headers, navigation, sections, asides, and footers. By the end of the unit, you’ll write your first page of HTML and preview it with a browser.

What will you learn in this unit?

• Describe what HTML does and how it has evolved into different versions
• Identify the most often used HTML elements for formatting text and data on a web page
• Identify the most often used HTML elements to format the layout and structure of a web page
• Use HTML elements to create a basic web page and then preview it in a browser

It’s important to understand the basics of how to use CSS in conjunction with HTML to create stylish web pages. We’ll begin with a brief history of CSS and the reasons it needed to be created as a partner to HTML and then learn some of the most often used CSS rules for styling web page elements, including how to style font, how to handle the positioning of text elements, how to style a table, and how to create a simple web page layout.

What will you learn in this unit?

• Describe how CSS allows for the separation of concerns in programming and briefly summarize its history
• Articulate the basics of CSS, particularly how to manipulate fonts and colors
• Format the style and flow of text with CSS
• Format the style of tables and web page layout with CSS

Once you understand the basics of how HTML and CSS work together to create a web page, the next step is learning how to make the pages more dynamic. As a web developer, you want to create pages that appeal to your users, and the contemporary web audience expects an interactive multimedia experience. Let’s take some time to walk through how to write the code to create web pages that include images, audio, video, and interactive forms.

What will you learn in this unit?

• Identify image formats used in website development and when to use each type
• Add images to a web page using HTML and CSS
• Embed audio and video in a web page using HTML and CSS
• Create an interactive form using HTML and CSS

Knowing how to write the code to create elements in a website is the first step to becoming a web developer, but before you can create stunning sites, you also need to learn some basic principles of website layout and design. Without knowing the rules of web design—like simplicity, usability, intuitiveness, and interactivity—it’s difficult to put together a site that is appealing to your users. Web design is not a static concept. Because the web is always evolving, web design evolves too. As a digital media professional, it’s part of your job to stay on top of how the rules evolve.

What will you learn in this unit?

• Identify and apply basic design and layout principles for website development
• Describe important trends in website design
• Use principles of website design to create an engaging and intuitive user experience
• Plan the design of a website using a site map and flow chart

You may have heard the saying “Rome wasn’t built in a day.” It’s a reference to the fact that if you’re building something big and complex, you can’t do it quickly. That is the case with developing a website: it takes some time, and you need to follow a process. It’s best to break the web development process into three stages: pre-production (planning), production (creating the site), and post-production (testing and maintaining the site).

What will you learn in this unit?

• Plan and design a website, including the creation, collection, and conversion of a variety of media files
• Choose the optimal development tool for your skill level and circumstances and use it to create a website
• Validate code, proofread, test, publish, and maintain a website

Presentations are a part of every digital media professional’s life. It’s a common occurrence in the business world for designers, developers, and project managers to present their work (or the work of the team) to other stakeholders in the company or to clients. Even if you curl up in a ball in terror at the thought of standing up in front of people, you can create and deliver an effective presentation. Just follow the best practices of the professionals who came before you.

What will you learn in this unit?

• Define and use best practices for designing digital slide presentations
• Choose appropriate software and create a presentation deck
• Articulate and use best practices for giving an oral presentation
• Identify appropriate formats for print materials and estimate printing costs

• Word processing software
• Slide presentation software
• Video camera (optional)