Scribd
Upload
17 views2 pages

Sketchware To HTML CSS Guide

This guide provides a comparison between Sketchware app development and web frontend development using HTML and CSS. It covers layout structures, margins, padding, positioning, alignment, sizes, colors, and styles, offering examples for each concept. Additionally, it includes a practical example of translating a login screen from Sketchware to HTML and CSS.

Uploaded by

bzsv996
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views2 pages

Sketchware To HTML CSS Guide

This guide provides a comparison between Sketchware app development and web frontend development using HTML and CSS. It covers layout structures, margins, padding, positioning, alignment, sizes, colors, and styles, offering examples for each concept. Additionally, it includes a practical example of translating a login screen from Sketchware to HTML and CSS.

Uploaded by

bzsv996
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Sketchware to HTML & CSS Guide

This guide helps you translate your Sketchware app-building knowledge into web frontend
development concepts using HTML and CSS.

1. Layout & Structure


Sketchware HTML Equivalent Example
LinearLayout <div> <div></div>
TextView <p>, <h1>, <span> <p>Hello</p>
Button <button> <button>Click</button>
ImageView <img> <img src='image.png' />

HTML acts as your layout structure, while CSS defines its appearance (like Sketchware’s
'Properties' tab).

2. Margins and Padding


In Sketchware, you set margin and padding through layout properties. In CSS:
.my-box {
margin: 10px; /* outside */
padding: 10px; /* inside */
}

3. Orientation & Positioning


LinearLayout orientation translates to CSS Flexbox direction.
.container {
display: flex;
flex-direction: row; /* horizontal */
/* column for vertical */
}

4. Alignment
In CSS, use justify-content and align-items for alignment:
.container {
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}

5. Sizes and Units


Sketchware CSS Equivalent Description
match_parent width: 100%; Fills parent width
wrap_content width: fit-content; Fits content size
dp px / rem / em / % Various web units

.box {
width: 100%; /* match_parent */
height: 50px; /* 50dp-like */
}

6. Colors & Styles


Sketchware CSS Property
backgroundColor background-color
textColor color
corner radius border-radius
elevation box-shadow

.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

7. Example: Login Screen


Sketchware Layout:
LinearLayout (Vertical) → TextView (Title) → EditText (Email) → EditText (Password) → Button
(Login)

HTML:
<div class='login'>
<h2>Login</h2>
<input type='text' placeholder='Email' />
<input type='password' placeholder='Password' />
<button>Login</button>
</div>

CSS:
.login {
display: flex;
flex-direction: column;
width: 300px;
margin: 100px auto;
gap: 10px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

You might also like