• Skip to content
  • Select language
  • Skip to search
OpenClassrooms.comOpenClassrooms.com
Our training programs
Online and at your own pace.
Compare our training programs
Learn a profession
Degree programs
Acquire in-demand skills with real-world projects and one-to-one mentoring.
Discover a topic
Free-access courses
Broaden your knowledge with 500+ regularly updated courses
Apprenticeship
Online and at your own pace.
Students
Start an apprenticeship
Kick off a new career with our 100% online registered apprenticeship degrees, which offer a monthly salary and no fees.
Consult job opportunities
Access thousands of apprenticeship job opportunities across France all year round.
Employers
Hire apprentices
Access qualified candidates all year round, create a job posting with AI, or receive a tailored selection of top talent.
Finalize the hiring of a candidate
Found the perfect candidate? Share their details to proceed with the hiring process.
Funding options
For employers
Train and recruit talents through an all-in-one space.
Discover our solution
Upskilling & reskilling
Enhance your knowledge
with a library of 500+ self-guided courses - SPARK
Promote hard and soft skills
with mentor-led intensive programs - BOOST
Support career progression
with mentor-led training programs - PIVOT
Recruitment
Foster talents
Access qualified candidates all year round, create a job offer with AI, or receive a tailored selection of top talent.
Finalize the hiring of a candidate
Found the perfect candidate? Share their details to proceed with the hiring process.
Break Down and Integrate a Mockup

Table of contents

  • Part 1

    Breakdown a mockup

    • 1

      Discover the concept of a mockup

    • 2

      Find and open a mockup

    • 3

      Translate visuals to HTML elements

    • 4

      Analyze dimensions and sizing

    • 5

      Breakdown images and fonts

    • Quiz: Mockup and Photoshop basics

  • Part 2

    Integrate a mockup

    • 1

      Set up basic HTML structure

    • 2

      Add page metadata

    • 3

      Integrate a Bootstrap grid

    • 4

      Understand basic CSS principles

    • 5

      Integrate specific CSS rules

    • 6

      Get some practice integrating a mockup in HTML and CSS

Table of contents

  • Part 1

    Breakdown a mockup

    • 1

      Discover the concept of a mockup

    • 2

      Find and open a mockup

    • 3

      Translate visuals to HTML elements

    • 4

      Analyze dimensions and sizing

    • 5

      Breakdown images and fonts

    • Quiz: Mockup and Photoshop basics

  • Part 2

    Integrate a mockup

    • 1

      Set up basic HTML structure

    • 2

      Add page metadata

    • 3

      Integrate a Bootstrap grid

    • 4

      Understand basic CSS principles

    • 5

      Integrate specific CSS rules

    • 6

      Get some practice integrating a mockup in HTML and CSS

Mockup and Photoshop basics

Test your knowledge!

Create an account for free or log in to take this course and complete this quiz.
Create an accountLog in

Question 1

Question 2