New Participant

Question

How to start to create a web page

Forum|Forum|3 years ago
July 21, 2022
6 replies
1282 views

hello!

I want to create a web page, but I don't know how to start. Maybe someone can help me?

in what program schould I make a template or layout of the web page?

Can I use ready elements of a template which I make in dreamweaver?

How to make a CSS elements on my web page?

What is Javascript and when I schould use it?

Sorry, my english is not very well.

This topic has been closed for replies.

Dan Rodney

Community Expert

Here's a video I made to help people get started in web design. I hope it may be helpful in getting you started understanding the general process. https://www.youtube.com/watch?v=yarjJxYys6c

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Nancy OShea

Community Expert

Given that this is the Dreamweaver product forum, it's interesting that your tutorial features XD and VS Code (or Sublime) instead of Dreamweaver.

This space rarely gets asked about XD. It might be helpful for prototyping complex apps but it seems like overkill for basic web page layouts.

On the other hand, one CAN create a fully responsive site layout with just 3 steps in Dreamweaver.

File > New > Starter Templates > Bootstrap Templates.
Pick a layout & hit CREATE button.

3. File > SaveAs > index.html

Easy peasy.

Beginners can (and should) learn code basics at their own pace from online resources like MDN and W3Schools. A good grasp of coding fundamentals, CSS Flexbox and Grids are invaluable skills to have.

- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/
- https://www.w3schools.com/bootstrap/

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

With just 3 steps in DW, I can't think of any less complicated way to get started that still affords users the freedom to design what they want and host on any server they choose.

By @Nancy OShea

Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self, apart from adding a few css styles from a list which is readily available.

I've got absolutely nothing good to say about Wix, thats for sure. Webflow well I think thats a little different because you do need to know html and css to get that to work. But its not something that I would use because of what you mention regarding, hosting (although I believe you can aquire the code and host it elsewhere), pricing, its not a stand-alone desktop application, etc

Apart from nothing much is learnt by just dumping something in the code editor. I call it 'cancerous' because its been spreading a lot and eventually kills the ability to do anything for ones self...
By @osgood_

=====

No worse than copying & pasting random bits of code from CodePen. There's no cause/effect between using frameworks and human ignorance. People have a willingness to learn or they don't. You can't make people smarter by telling them not to use frameworks. Offering them a red pill or blue pill, perhaps. But as yet, that's only in movies. 🙂

Nancy O'Shea— Product User & Community Expert

K

Konrad22082256ltl8Author

New Participant

how to paint the background of the <table> ??

Nancy OShea

Community Expert

To create a background, use the CSS background property.

Below is a working example. No tables required.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Centering with CSS Grids</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
width:100%;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
.container {
padding: 2%;
width: 75%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
font-size: calc(16px + 1vw);
line-height: calc(1.75em + 0.5vw);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Grids!</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>I'm vertically &amp; horizontally centered.</p>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

@Konrad22082256ltl8

Software doesn't build websites, people do.

Get some paper and pencils or crayons and make a rough sketch of your page layout as you wish it to appear on mobile, tablet and desktop devices. It need not be fancy or accurate. Just some basic boxes will do.

Once you have the basic layouts, go back and make notes about how many elements each box should hold and number them in sequential order. These are your design mockups.

On a separate page, briefly describe what the user experience should be. For example, when item #1 is tapped/clicked, what should happen? Repeat for other elements. This will be your Developer's road map. You will refer to this often during the coding phase.

See link below for basic design ideas and starter code.

https://www.w3schools.com/css/css_templates.asp

Hope that helps. If not, post back with further questions.

Nancy O'Shea— Product User & Community Expert