• 6 hours
  • Medium

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 9/29/22

Get some practice integrating a mockup in HTML and CSS

It's your turn!

You're going to cover the full range from a client meeting to a full-fledged HTML and CSS project!

First, you'll identify your client. Who are they? Where are they based? What are they looking for? Write up a good spec sheet detailing all this.

Next, you'll find a mockup that suits this need. Here are some helpful sites that can help you find mockup visuals (but you can use any site you want): Creative MarketThemeForestBlazrobarBreebiesbugUI8.net

Ideally, you'll find a PSD and use Photoshop to work with the visuals. If not, you can still find ways to measure widths, heights, and spacing of elements in your visual.

From here, create a basic HTML structure of the page using the Bootstrap grid to organize elements within columns. Note, you must use Bootstrap!

Add CSS as needed to customize the appearance beyond what Bootstrap offers you. You'll change colors, fonts (include a web font!), sizing, and more.

Try and get as close to the mockup as you can, but we understand it won't be a 100% match.

Check your work!

Check that the following elements are present:

  • the spec sheet includes a client and a full description of their needs

  • the HTML is well organized, indented, and includes all Bootstrap column classes

  • the CSS is well organized, indented, and includes many relevant style rules

Example of certificate of achievement
Example of certificate of achievement