Participating Frequently

Question

is this program is for someone who is new to html and css?

Forum|Forum|4 years ago
February 16, 2022
2 replies
1291 views

i just started learning css grid and html, i happened to see this program, is it for someone who already knows how to make websites or also for new learners?.

This topic has been closed for replies.

O

osgood_

Legend

i just started learning css grid and html, i happened to see this program, is it for someone who already knows how to make websites or also for new learners?.

By @Zaid231951099ddc

I don't think Dreamweaver provides you with any advantage over any other website editor UNLESS you have access to it through having a full creative cloud membership. If not then you are better off using a free web editor such as VS Code.

Css Grid is complex as it can be written in a number of different ways and I dont think any current editor has the ability to provide all of those options, so to get the best out of css grid you will need to learn to hand-code it, which means any web editor or text editor is all you really need and some good resources on css grid of course.

Z

Zaid231951099ddcAuthor

Participating Frequently

Do you have any advice for me? I just just started learning html and css grid like 8 days ago. I was mostly into games.

O

osgood_

Legend

Do you have any advice for me? I just just started learning html and css grid like 8 days ago. I was mostly into games.

By @Zaid231951099ddc

Below is a resource that may help you with css grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

However before learning css grid I would advise you to learn Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox is a much simpler workflow to grasp initially - you will need to use it in combination with css grid eventually, to leverage all of the benefits.

Css grid is more powerful as its more flexible in terms of producing layouts. The methodology it uses does not restrict it to linear columns/rows which makes the placement of items really easy when you are considering how you would like the flow of items to apppear on mobile devices.

Its going to take a while to grasp learning html/flexbox/grid, etc. I don't know what your long term goals are if any but if those plans consist of perhaps a career in development then learning to code IS THE ONLY WAY to progress, despite what you may hear from others about low-code/no code solutions, frameworks etc. Anyone choosing that route is on a dead end road.

Good luck and post back if you run into problems or have any questions.

Nancy OShea

Community Expert

If you want a tool that creates basic standards compliant code while you're learning, DW is a good place to start. The finer points of using CSS Flexbox and CSS Grids will come with repeated use and practice, practice, practice. To create interactive sites and advanced web apps requires good coding skills. Tools don't make good websites, people do.

You can try DW free for 7 days to see how you like it. If you don't cancel before the trial ends on day 8, your free trial will automatically convert to a paid annual subscription USD $21/mo.

https://www.adobe.com/products/dreamweaver/free-trial-download.html

Nancy O'Shea— Product User & Community Expert

Z

Zaid231951099ddcAuthor

Participating Frequently

What kind of advantages does it have over other editors If i get the clould membershib?. I started like 8 days ago im not putting a lot of effort to be honest. One thing im having problem with is the images and media queries.

Nancy OShea

Community Expert

Build for mobile first. Add a media query for Tablets if you need one. Add a media query for Desktops if you need one.

CSS Grid Example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
}
</style>
</head>

<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</body>
</html>

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.