Front-End dev here, forgive me if this has already been asked before. When coding HTML/CSS from a sketch design is there a way to identify what kind of html element corresponds to the sketch component?
When I export to HTML using Anima or similar, it makes almost everything a <div> element. Some sketch components are self evident, such as links <a>, <images>, <button> etc. When it comes to text for instance, is there any way to tell if it's a <div>, <span>, <p> element, etc etc? Do I just need to use my judgement in this case?
Any guidance on this would be welcome. Thanks!
A good tool to help you import the sketch design file is Desech Studio. This will create a clean html structure, but most likely if you do it manually, it will be slightly better. Elements are also positioned with css grid, not position absolute.
This is a good place to start, otherwise you have to do it manually by looking at how the content can be split into grids, and create the necessary grids. With experience you get the hang of it.
Related
I am having a hard time understanding the layout of HTML. In particular, none of the book or exercises I read went into detailed description about what div is actually for or how to visualise it when designing or building a website.
I am just starting out on HTML and I am trying to build pages like these below:
http://activatedrinks.com/index.php/fr/#/activate
http://www.captaindash.com/captain-dash-english-version
I understand I'd have to go into JS and Bootstrap but I just want to ask any experienced mentor here what is the best and easiest way to visualise the layout/structure of HTML when building them? Also if anyone could elaborate on the relationship of them as well would be helpful.
The <div> tag defines a division or a section in an HTML document. Dividing or subdividing a page into many sections or functional blocks. The <div> tag is used to group block-elements or use as a container for other HTML items or elements to implement CSS styles to many elements at once.
To understand more get additional information I recommend the following sites for you to visit:
https://www.lynda.com/
https://thenewboston.com/
http://htmldog.com/
http://www.codecademy.com/
https://teamtreehouse.com
https://css-tricks.com/
https://tutsplus.com
https://www.smashingmagazine.com
https://www.sitepoint.com/
https://www.tutorialspoint.com/
https://www.w3schools.com/
http://www.html-5-tutorial.com/div-tag.htm
In addition try to understand different Frameworks (Front-End or Back-End) at http://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017/. "Although frameworks makes programming faster and easier, unless you know how they works, they may become more of a problem than being helpful" by Tesseract.
I have used HTML in its basic form, and I mainly work on "server side" (of Enterprise application, mainly based in Java EE).
From what I understand, HTML is the "pages" which we see in an browser (that source code which a GUI developer writes and which a browser renders appropriately).
For example in an HTML tag, we write "h1" element, and the browser displays the text within as bold.
Now why there is any need of css? From what I am aware of, CSS is used to give "style" to a html page. The confusion that I have, doesn't HTML in itself able to give the style? what were the compelling reasons for creation of css?
Can anyone help me understand this in simple words.
The code that you put in your html to style it is actually CSS. HTML actually has some built in CSS. So really, you are using CSS when you do that. Also people like to connect a separate file for CSS in bigger projects. It looks more organized, and it easier to keep track of. It is also easier to code the CSS, because it is less messy and it seems like you have a bit more functionality. In conclusion, the code in the html that you are using to style with, is actually CSS, just built in. Also, I would highly recommend separating your stylesheet and HTML file(the stylesheet is CSS). If you need help, go to codecademy and create an account. Take the HTML and CSS lesson. I found this very useful and is where I learned most of my knowledge. I would highly recommend going to that site also. The site is also free.
I have read a lot of criticism on using absolute positioning in HTML. Nevertheless, I am looking to have one simple Open Software tool which will enable me to have a quick HTML page PROTOTYPED with all elements having ABSOLUTE positioning through a drag and drop WYSIWYG mechanism. Typically even a SVG editor would have done and there are plenty of good ones but they do not have HTML form components to be dragged and dropped to give a more realistic HTML proto look-and-feel to a page having Forms. If the prototype is acceptable in presentation, then all the other HTML, CSS, Jquery and other coding continues from there with the absolute positioning in place. The styles generated may be inline or separate, does not matter.
So, you will ask me why not use a real HTML editor in the first place? Well, the problem is that the steps after the prototype is accepted requires absolute positioning of elements only and all the HTML editors I reviewed do not have absolute positioned elements. I do not wish to clutter this question with what and why that is a requirement.
The prototype pages will be developed by not-so-expert HTML coders. Just some basic HTML elements but certainly all Form elements are all that I need.
To summarize:
What is the best FREE HTML WYSIWYG editor that is available on Windows and Linux which can give a drag and drop interface where the underlying HTML code generated has absolute positioned elements.
While on this topic, though this is more of a post-mortem question: What are the biggest downsides, if any, to absolute positioning of elements in HTML?
The question asked earlier by someone: wysiwyg html editor build in html/javascript for position absolute elements does not help either.
That's a lot to ask for from an open source editor. I can only empathize with your plight, as I too am one to expect a lot from my tools. The way I code the web is by hand (IDE / Text Editor... usually geany, Anjuta, or wxDev-C++) or I use a templte if the project needs to be done quickly. Obviously custom layouts and themes are sacrificed for that. The number one reason I code from scratch, no code generators meet my standards.
About absolute positioning in CSS, small screens often struggle to resolve issues like how to display an element that's absolutely 500px right of the left side of the screen when the screen only has a width of 350px... Mobile browsers do funny things as is through in absolute positioning and things are bound to get difficult.
Sorry I couldn't be of more help, happy coding, hope you find a suitable tool.
I want to design my webpage layouts only using div tags. But i'm not good at it. I need to understand the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
I am making a learning plan so this will help me evaluate the time required better.
Is knowledge of HTML beyond the basics a prerequisite for learning CSS?
Absolutely. You won't be able to use CSS in a practical way if you don't know your way around the HTML elements to apply them to.
I'd say learn them both parallelly. Understand the basic HTML syntax and structure first; then start with CSS.
Whats the use of CSS if you don't know HTML?
So better get a good understanding of HTML first and then study CSS.
You can learn CSS from scratch, only basic HTML is needed to allow you to start! Good luck, w3schools.com is an excellent reference site and learning tool for HTML/CSS.
Good question. I'd say technically speaking you don't really need to know HTML if you're absolutely only going to work in CSS (styling somebody else's HTML), but you do need to know about the DOM structure and box model. As pertains to CSS, the DOM and HTML are so closely related as to be virtually indistinguishable. If you know enough about the DOM structure to be able to code CSS, you pretty much automatically know HTML with it.
This almost like asking if you can be an interior decorator without knowing what a house is or the different kinds of rooms.
The whole point of CSS is to make HTML look (and sometimes act) better.
It would be silly to use CSS to create indented lists, and only then discover the <ul> tag.
Or worse, I've seen people spend weeks trying to use CSS to put data in a grid, when one simple <table> tag did the trick. ;-)
Its better if you will go with HTML first, anyways it won't take much time, atleast you should have a basic idea about HTML, then you can easily move in CSS. Anyways CSS is nothing but the style sheet.