HTML/CSS Bootcamp


Guide to HTML

This sections walks through the basic syntax and structure for using HTML, including: choosing a text editor, how to use the HTML5 markup language, using divs, and built in HTML styles.

Outcomes:
  • Discuss usefulness of IDEs and text Editors
  • Define the basic structure on an HTML web page
  • Describe basic HTML syntax
  • Demonstrate how to implement HTML tags to build web pages
  • Create custom HTML tags
  • Utilize Web Developer tools provided by Chrome
  • Define an HTML ID, an HTLM Class and demonstrate use of these concepts to build web pages
Guide to CSS Styles

After completing this set of guides students will be able to work with CSS, including understanding how apply custom styles to HTML elements on a website.

Outcomes:
  • Describe the implementation of inline CSS styles
  • Utilize an embedded stylesheet for debugging and development
  • Identify CSS Best Practices, including Creation of an external stylesheet and a description of how this is essential to an organized codebase
  • Apply CSS selectors to target specific elements
  • Identify and reproduce Webkit animations while utilizing best practices
  • Demonstrate the ability to implement CSS styles
  • Add and implement custom fonts with CSS
  • Describe the use of CSS Pseudo Class Selectors
Guide to HTML Tables

After this section students will be able to work with HTML tables, including learning how to customize table structures, headers, cells, rows, and columns.

Outcomes:
  • Demonstrate the ability to create an HTML table
  • Apply CSS styling to table components differentiating between rows and spans
Guide to HTML Forms

In this guide students will learn how to work with HTML forms, including: how forms work, how to integrate various form elements, and how to structure HTML 5 forms to capture user data.

Outcomes:
  • Demonstrate the ability to create a basic HTML form
  • Utilize checkboxes, radio buttons, and select boxes with in an HTML form
  • Discuss the proper use of dropdown form elements
  • Create a form with calculated fields
  • Describe how and why to use HTML entities
Project: Create the Google Homepage

In this section you'll walk through how to build the Google homepage from scratch, including the HTML and CSS styles.

Outcomes:
  • Reconstruct the Google Homepage using HTML and CSS
  • Demonstrate the ability to build out basic HTML structure and add content
  • Integrate CSS style to build a Navigation component and footer
  • Create SCSS styles for buttons and hover effects
Project: Create the Pinterest Homepage

In this project you will learn how to design the Pinterest homepage, specifically you will learn how to create the pin styles and how to work with the Font Awesome icon library.

Outcomes:
  • Reconstruct the Pinterest Homepage
  • Demonstrate ability to integrate and style Font Awesome icons for the web page
  • Compose a grid style format using CSS styles
Project: Create an HTML Email Template

In this project you will learn how to build an HTML email template and style it. This includes integrating images and CSS styles with the format required by email clients.

Outcomes:
  • Prepare an HTML structure to integrate content and select tags
  • Create an HTML email template
  • Illustrate use of CSS to customize an HTML email template
Project: Create the Tesla Homepage

After completing this project you will learn how to build a corporate website and specifically how to integrate the styles associated with the Tesla homepage. This includes HTML, CSS, SVGs and fonts.

Outcomes:
  • Compose a corporate website by reconstructing the Tesla Homepage
  • Create a navbar with distinctive sections and styles
  • Incorporate an SVG into the webpage
  • Apply a responsive background image
  • Devise a footer that works as a secondary navigation system and includes an image
Project: Using Bootstrap and a Website Template to Design a Social Network

In this project you'll learn how to use the Twitter Bootstrap HTML/CSS framework and a set of design files created specifically for this course by a web designer to create a social network.

Outcomes:
  • Demonstrate how to incorporate the Bootstrap framework
  • Create a fully responsive design that renders differently according to screen size
  • Compose a navigation bar utilizing the Bootstrap grid system
  • Integrate dropdown components that render differently according to screen size
  • Explain how to use media queries to customize responsiveness
  • Reproduce the integration of custom fonts and Favicons
    Unsupported Browser

    devCamp does not support ancient browsers.
    Install a modern version for best experience.