Web layout training. HTML and CSS courses. Interneting is Hard — layout study service
- Styles are a set of settings that determine the position, appearance, and functionality of web page elements. The main advantage of styles is that they provide much more options for formatting, design and layout compared to native HTML. This powerful system can be assembled in separate documents, so it doesn't get mixed up with HTML code. This is the base; more, simpler and clearer - here: http://htmlbook.ru. Start your acquaintance with the “CSS” section from the “Tutorial”, and the reference book will greatly simplify the understanding of unfamiliar terms. In the future, you will also need the "Block layout" section.
- For those who are especially persistent and curious about programming, we recommend the sites http://www.xiper.net, http://css-live.ru. Here are lessons that reveal the secrets of using "advanced" techniques in HTML and CSS. If you speak English, be sure to visit the resources http://css-tricks.com/ , http://net.tutsplus.com/ , where you can find not only text, but also video lessons.
Aerobatics - JavaScript!
Using the JavaScript language will make your web pages interactive. As you explore this more serious layout, slowly incorporate JavaScript into your HTML.
- The resource http://javascript.ru has a sufficient information base for learning this language. It includes a lot of necessary materials, discussions and tips for quality learning.
- The first part of David Flanagan's JavaScript Detailed guide” will be a great guide to the basics of JavaScript. The second part describes the development environment for scripts provided by browsers. The third part is an extensive reference for basic JavaScript, the fourth is for client-side.
- In order to simplify the introduction of JavaScript into web pages, the jQuery library is used, also written in JavaScript. The official website http://jquery.com and the jQuery Advanced JavaScript Guide Definitive Guide (Ber Bibo, Yehuda Katz) lay out everything you need to know about the language in an easy to understand way.
- Mootools, a free modular framework, provides significant assistance in JavaScript development.
Small tricks from big masters
Even for experienced typesetters, we are ready to provide information that can significantly improve the work. When it comes to creating an optimized layout code, you will definitely need the hthttp://www.xiper.net website. Be guided by the sections "Learning" and "Ready-made tricks", which contain advanced solutions and technology for using scripts.
There are also many services for layout optimization. We recommend that you pay attention to the resources on this topic:
- http://www.google.com/webfonts; - will provide a collection of fonts that can be included on your pages.
- http://www.fontsquirrel.com/fontface/generator - Converts any font and generates CSS code to insert into the style sheet.
- http://stm.dp.ua/web-design/color-html.php - a wide selection of colors and their codes.
- The CSS sprite service will reduce the number of HTTP requests to download graphic assets sent by your site. The article http://www.xiper.net/collect/html-and-css-tricks/overclock-site/sprite.html will tell you more about this.
- The "Document Validation" section on the website http://htmlbook.ru will introduce you to the concept of validators. The code of each page must comply with the specification, which is developed by the W3 Consortium www.w3c.org. A few examples of validators (checking html code and css code) is available here: http://validator.w3.org/ , http://jigsaw.w3.org/css-validator/ .
- http://caniuse.com - cross-browser compatibility check - a service that will help to avoid different layout display in several browsers.
+ Promised nice bonus
If your thirst for professional knowledge has not yet been fully quenched, we hasten to please - that's not all. You can also learn HTML and CSS using the following literature:
- Mark Pilgrim HTML5. Up and Running»
- Eric Meyer “CSS - Cascading Style Sheets: The Definitive Guide”
- Peter Lubbers, Brian Albers, Frank Salim "HTML5 for professionals: powerful tools for developing modern web applications"
- Stephen Schafer HTML, XHTML and CSS. User's Bible"
- Eric Freeman, Elizabeth Freeman Learn HTML, XHTML and CSS.
P.S. Once you've decided to learn HTML, don't use special editors. Write in a regular notepad or Notepad++, this will help you quickly acquire the necessary skills. If you are a supporter of interactive communication - become a frequent guest of specialized forums:
- http://www.cyberforum.ru/html/
- http://ru.html.net/forums/viewforum.php?f=49
- http://www.html.by/
- http://forum.htmlbook.ru/
Ask advice from more experienced colleagues, share your own knowledge with beginners!
We hope this article will be a worthy guide to learning programming for you. The following material will be devoted to the server-side programming language PHP.
Are you interested in the question how to learn website layout on your own? With due perseverance, anyone can learn the layout of sites.
Topic of today's post: Where to start learning layout? This question is far from being idle, and everyone chooses his own path for himself. I will tell you about how I myself began this fascinating journey into the world HTML And CSS. I hope that for some of you this will become, if not a guiding star, then at least a guide to the goal.
So what is website layout? Who is not in the tank yet, listen: layout in this case does not mean typing a fresh article in the Iskra newspaper in lead letters, but turning a site layout drawn in Photoshop directly into a working site.
To put it differently, layout is coding, writing data in HTML that any self-respecting browser will convert into a beautiful and understandable site.
For an ordinary site visitor, this code will remain invisible, hidden behind the wide back of the browser. However, this does not mean at all that it can be anyhow. The code should be beautiful, convenient and correct!
So where do you start learning HTML? The first thing that comes to mind is to buy a book. And the thicker the better. Perhaps this will be of use to someone.
But personally, after some experience with such “bricks”, I developed a clear repulsive reflex. For the simple reason that the information there is supplied in excess.
Remember school? The average citizen does not need to know chemistry, physics, anatomy, etc., to the extent that they are trying to put into their brains.
So it is here: in a thick book there is a lot of superfluous, and when there is a lot of it, it clouds the eyes, evokes yawns and turns learning into 2-3 days of torment, followed by throwing this science far into the furnace. And that's it.
So I personally went the other way. I did buy the book. Not fat at all. And I still do not get tired of recommending it to my students, because the relevance of the book is still fresh and in demand. book author Artemy Lomov, but it's called "HTML, CSS, scripts: the practice of creating sites". Publishing house "BHV-Petersburg".
In this book, everything is in moderation: there is a bit of web history, a bit about standards. But most importantly, the basic material on HTML, CSS and JavaScript is very intelligibly and simply presented. For a beginner to learn website layout - it's just a must-have!
But one book is not enough. My method of study is by no means new, but at the same time very effective. We need not one book, but several. The trick here is that each author writes a little differently. When you read the same topic in different variations, the overall picture becomes clear much faster and is remembered much better.
My second such book was an electronic version of the Macromedia Dreamweaver tutorial by Vladimir Dronov.
In general, for a start it is very useful to acquire this program. dreamwiever is a visual editor that allows you to see both the external and internal side of the site. That is, its external representation as for visitors, and internal - directly the code.
A big plus of this program is the ability to view (again in dual mode) any site that exists on the network.
For example, I liked a site with a beautiful and convenient placement of blocks, I saved the entire page with pictures, and then launched this page in Dream. And voila! You can see everything, where and what. Although at first everything is not as obvious as we would like. That's just the book - just a great helper here.
Of course, I have not used any for a long time. visual editors, but I manage with a simple text editor like PSPad. But a lot of experience has been gained. And most importantly - versatile. Why the subject itself easily and quite structured fit into the head.
By the way, structure is the most important factor in learning any language. And HTML is also a language. And I will talk about this structure next time.
In the meantime, get yourself a couple of useful books. And read my blog Web advice. Here you will also find a lot of useful tips on site layout. Start learning website layout with at least .
UPD dated 10/25/2012: For beginners, I recommend this article - The Way of a layout designer. There everything is much more detailed, with links and other useful things.
From the author: Hello friends! Like people, websites have their own skeleton, which can be seen in their code. An ordinary user, "walking" through the expanses of the Internet, is unlikely to look into the HTML code. But not layout designers - they are always interested in looking at someone else's work. Creating code that is neat, balanced, and works in all browsers is a kind of art. Today we will talk with you about how to comprehend it, or, in other words, how to quickly and effectively learn how to layout web pages.
Where does layout start?
Website layout is a description of its visual component by the program code. At the same time, the site should look and work correctly on any browser (be cross-browser). Learning to build websites from scratch should start with creating a PSD layout yourself, despite the fact that, in theory, a web designer should create it.
The main task of the layout designer is to process the material that comes to him in the form of texts, images, catalogs, etc., and turn it into web pages based on the approved web design.
However, imagine that you are a kind of 2-in-1 layout designer, and for some reason you had to typeset the layout instead of a designer who does not care about your problems.
In order to quickly learn how to draw layouts, no matter how trite it may sound, you just need to draw a lot of them. Endless viewing of other people's work will also greatly help you. At the same time, pay attention to all the small details, to what colors, gradients, fonts, indents, etc. are used.
Over time, you yourself will begin to feel what looks beautiful and what does not. At the very beginning, you can simply take and draw, for example, other people's interface elements. This will make you think about how these very elements are built and what they consist of. And then beautiful designs will cease to be something mythical for you, because you will know how to create something similar.
Website Layout Tools
As for tools, many web designers use Adobe Photoshop to create interfaces. With this program, you can do anything.
There are people who work only with vector graphics and use them to create layouts Adobe Illustrator.
And another editor that I have not tried, but which, according to rumors, is a quite worthy alternative to the above, is Sketch, but it only works under Mac OS.
Getting Acquainted - HTML
The next step after drawing the layout is to lay it out and create an HTML template. HTML is a language that is used to mark up documents on the web and is interpreted by browsers to be conveniently displayed as a document.
With HTML markup, we mark where text, images, buttons will appear on a web page, and in what order they will appear next to each other. The main concepts in this language are tags, attributes, elements and entities.
The most elementary web resource is nothing more than a set of HTML pages. If the site is static, then after layout you will actually receive its final version, and not just a template. Now such sites, of course, are a rarity. All modern web pages are generated dynamically, using some server-side logic that you either write yourself or use ready-made with the help of some CMS (content management system).
Without this server-side logic, most of the online services that we use every day and that we are so used to would not be possible. As far as HTML is concerned, it is a completely uncomplicated language.
In Runet, there are a huge number of paid lessons on website layout, and other materials with a decent learning base. In my opinion, learning this language on your own is not a problem at all.
Getting Better - CSS
Once you master the basics of HTML, you can immediately start learning CSS (Cascading Style Sheets), which allow you to set fonts, colors, and the location of individual blocks of the site.
For CSS, I can recommend a good one that will help you build a career as a layout designer even if you do not have basic knowledge of web design and layout at all.
However, I want to warn you that learning to be a website layout designer is not such an easy task. There are many subtleties and nuances in layout. In general, in order for you to be able to look at the layout and immediately imagine the hierarchy of its elements, how exactly they can be laid out and with what properties, all this requires a lot of practical experience.
Is it necessary to learn all HTML/CSS tags, attributes and properties?
HTML has many different tags and attributes, and CSS has many properties that can have different values. Therefore, many beginners are concerned about the question: where to start layout of the site and whether it is necessary to memorize all these values, tags and properties?
Of course, if you have a unique photographic memory, then it will not be difficult for you to learn all this, and at the same time, the three volumes of War and Peace, by heart. Otherwise, you do not need to memorize all these words.
In the beginning, when you first get to know CSS, you will still look at what each property and each value of this property does. Over time, you will come to understand what you can do with the help of cascading style sheets, and some of these properties / values \u200b\u200bare already deposited in your head. Well, unless you suffer from amnesia of course.
The same goes for any language, including JavaScript, PHP, etc. Anything you use frequently will stand out on its own. Everything that you rarely use, you can peep in the reference book, of which there are a great many on the network. There is nothing to be ashamed of and, I'll tell you a secret, all webmasters do it.
We simplify the layout process
For those cases when you need to quickly create some kind of interface or prototype of a site, there are CSS frameworks such as Bootstrap. It allows you to become a webmaster, web programmer and coder in one person without knowledge of style sheets, programming languages and hypertext markup.
Once you get comfortable with CSS and start creating your own, unique CSS, you may no longer have the flexibility of this language and want to use some kind of CSS preprocessor. Preprocessors remove all garbage from CSS code, make it cleaner and more logical, increase the degree of abstraction with the help of variables and other "chips". The most popular preprocessors are LESS, Sass and Stylus.
Aerobatics - JavaScript
As you study more serious web design lessons, you'll come across JavaScript elements included in HTML that make web pages interactive. If you plan to do not only Back-end, but also Front-end development, then you need to know JavaScript at a very good level.
In addition to the language itself, you need to know all the infrastructure that exists around it (libraries, frameworks, browser interfaces, etc.). It can take you from one year to infinity to master all these elements (depending on whether you have a personal life).
Summing up
So, as you, I hope, have already understood, a layout designer is a very important and ancient Internet profession, on which depends:
site loading speed;
the adequacy of its display in various browsers;
adaptability to various user screens;
Compliance with HTML standards and search engine requirements.
So far, that's all. Do not forget to subscribe to the news of our blog, so as not to miss all the most interesting things about learning website layout from scratch.
Until we meet again, dear colleagues and those who are just embarking on this difficult, but very exciting path of web development!
Hello, my name is Alexander Zelenin and I am a web developer.
Many times I heard the opinion that layout is the lot of beginner frontenders. Although in fact it is the most important part of any (almost) web project. This is what users see first. At the moment, high-quality layout (especially block design) in a large project requires a large number of different skills.
In this article, I present a scheme for the development of a layout designer
[big click]
Of course, this is not a comprehensive and only true scheme. There is also a whole mountain of related skills, relevant technologies, and so on. Grading is subjective.
I want to add right away that there will be no specific links to educational materials in the article. I will be glad to add comments.
What do we expect?
First of all, it is necessary to understand what we expect from a person at each of the levels. Your expectations may vary.
Junior- knows the main tags, can correct the content on the finished html site, knows how to correctly format the text, inserts an embedded element without any problems (video from YouTube, Yandex map), works through the version control system only for himself (master, 1 contributor). It can make up something simple from scratch, and it won’t even go (personally with him). In general, it is not an independent unit and requires guidance from above.
Middle- more or less autonomous unit (or completely autonomous for small and medium projects). It can well layout a medium-sized site, and it will be displayed correctly in all current versions browsers. Understands how templating engines work and can use them (provided the rest of the code is provided). Able to plan and document their work and estimate deadlines. Understands the importance of maintaining code style. Understands why there are grid systems and css frameworks. Able to take all the necessary information from layouts from the designer. Can interact with a small team, create branches and pull requests.
Senior- can design a block system for a large project. Knows how to avoid repetition and problem areas when other developers use his code. Able to decompose complex tasks and correctly formulate tasks. Able to apply at least one development methodology (for example, BEM). Can make the project open as quickly as possible. Understands several popular templating engines well. Able to write assemblers and automate the process associated with it. Can conduct code reviews and supervise other layout designers.
Let us now consider a little more specifically what each of the blocks at each level includes.
Junior
HTML- knowledge of the main tags, attributes. Understanding how to write it in principle.
Typography- ability to format text. Text is the basis of almost any project. Insert non-breaking spaces where necessary, bold, italic, abbr and so on. You can use a typographer or similar service, but be able to understand the result.
Semantics- understanding that there are certain tags for certain tasks. Be able to choose the right tag.
Media- what types of media can be embedded in the page.
iframe- embedding third-party widgets (video, audio, maps, etc.).
Audio Video- You can postpone the study, because. partly solved with iframe. Understand what formats the browser can play, how to design the player, and so on.
Images- what graphic formats and in what form the browser perceives. Pros and cons of using certain formats.
Raster- jpg, png, gif. Understand the difference between formats and be able to apply what and where it is necessary.
SVG- You can postpone the study, because. used less often than we would like. Understand the pros, cons, limitations, etc.
Fonts- you can postpone the study. It's actually quite a complex topic, and in general I would advise beginners to use system fonts. Be able to load fonts, optimize display, minimize rendering lag with custom fonts.
Tabular layout- optional. For those who want to create high-quality email newsletters in the future.
css 1- fonts, colors, alignment, sizes.
CSS 2.1- block behavior control, positioning, full design.
Selectors- simple selectors for tag, class, nested element. Simple pseudo-selectors like :hover.
naming- how to name the classes so that it is not excruciatingly painful.
Block layout- break the picture into conscious blocks, embody the blocks in HTML, decorate with CSS.
Browsers- you can postpone the study. What browsers exist, what is their difference.
Developer Tools- you can postpone the study. Use browser tools to troubleshoot display issues.
Text editors- what text editors for developers are and why. SublimeText and Notepad++ are examples that are familiar to me. Be able to set up basic things in them, such as indents, line breaks, and so on.
Version control systems- I personally consider the ability to use them at least individually, personally for myself, very important. Understand why these systems are created and what they are.
git- understand in general terms the task and principles of the most popular version control system.
Github / bitbucket- be able to use one of the popular platforms for git.
checkout/commit/push/pull- basic operations for personal use.
Stash- to temporarily save unnecessary data at the moment.
10 works- make at least 10 works in different designs. You can test, it doesn't matter. It is important to be complete within current knowledge.
Middle
CSS 3- gradation, shadows, smoothing, filters, transformations.
Advanced Selectors- elements following the specified (+), specified by count (nth-child), shadow-dom, before/after and so on.
Animations- optional. transition and animation. Smooth transitions, animations. Understand the limitations and disadvantages.
Grids- why they exist, how to build them, what ready-made solutions are. For an example, you can look at the Flexbox grid or any other that you can find.
Frameworks (CSS) Why are they needed and how to use them. It is advisable to learn how to use at least one well. Very useful for prototyping. Significantly improves the quality of the project in the absence of a design budget (not unique, but usable).
CSS preprocessors- you can postpone the study. Optimization of work, more beautiful and readable code. Variables, mixins, etc. Work with one or more popular preprocessors like SASS, LESS, Stylus.
Media queries- you can postpone the study. Display the desired styles depending on the conditions (device, screen size, pixel density, print version, etc.).
Code style- understand what style conventions are for, study and start applying any (I recommend from AirBNB).
DRY/KISS/SOLID- you can postpone the study. Understand important development principles that significantly simplify the further maintenance of the project.
OOCSS- optional. Understand what object-oriented css is and what it is for. In one form or another, it is used in many projects (albeit without understanding what it is). Ideally, learn to design. Might be great for big projects.
Documentation- understand what and how to document. Document. You can postpone, but in the future, be sure to study the markdown markup.
Planning- to learn to estimate terms on a picture and to define sequence of works.
Decomposition- you can postpone the study. Learn how to break a task into subtasks. It's harder than it looks :-)
Setting goals- you can postpone the study. Learn to clearly describe tasks in text so that other developers, including those with lesser qualifications, understand quite unambiguously what needs to be done to complete them.
Flexbox- understanding of the model, the ability to apply fully.
Layout of letters- optional. In general, the skill is not superfluous. Understand the features of mail systems, keep a good appearance and not fall into spam (if it is not spam).
polyphiles- figure out how to use the latest development features while maintaining backward compatibility. Understand the pros and cons of this approach.
Cross-platform layout- understand what needs to be done to make the project look good not only under Windows, Linux and Mac, but also under SmartTV or PS.
Cross-browser layout- understand the difference in browser rendering and make them show the same way. The CanIUse website is very helpful with this.
Mobile layout- you can postpone the study. Understand the limitations of mobile platforms. Use limited space wisely.
Optimization- you can postpone the study. Understand the "price" of certain techniques. Understand what phases the display of the site to the user consists of. - you can postpone the study. Optimizations related to size, cache, compression, resource pooling, etc.
Rendering- you can postpone the study. Optimizations related to rendering speed after loading.
SEO- you can postpone the study. At least a basic understanding of how search engines work. Ability to help search engine figure out where to look and what is important.
Template Engines- understand how you can reuse code, group elements and compose pages. It is highly desirable to learn both server-side rendering and client-side rendering. This also includes templates in a "pure" language (such as simple PHP inserts). The work “before” (dataflow) of the template engine does not interest us.
PHP- you can postpone the study. Understand the basic syntax and be able to make minor edits related to page design.
CMS- you can postpone the study. Find out what CMS exist and why they were created. Learn to write templates for at least one (I recommend Wordpress).
javascript- you can postpone the study. Learn the basic syntax, understand how to hang up the simplest handlers and do simple work with the DOM.
jQuery- you can postpone the study. Learn how to save a lot of time for solving fairly typical tasks using plugins for the most popular js library (after vanilla.js, of course).
NodeJS- you can postpone the study. Understand how to run a simple server, distribute static and render on the server side. You can use Express or any other framework.
Assembly- optional. Learn how to assemble a project from a bunch of CSS / HTML files into what is needed. I recommend that you familiarize yourself with at least grunt and gulp, as representatives of "different" camps.
IDE- optional. Learn why IDEs are needed and how to use them. Switch to using some IDE to save time. Important: learning an IDE is comparable to learning a full-fledged programming language, and investing a lot of time in it may not be justified. Personally, I use text editors (and only turn on the IDE for very large projects).
branching- learn to manage branches in git.
Merge- learn how to merge branches with conflict resolution.
fetch/rebase- understand why they are used, when to use them, and start using them as needed.
Graphic editor- to understand what are, for what. How are vectors different from raster. It is important to understand the editor at least at the level of "reading" the layout from the designer. Choose the right font, size, color, etc. Not to the eye, but for sure. I recommend working with at least 1 raster (Photoshop) and 1 vector (Figma).
50 works- by the end of the stage you have about 50 different works demonstrating skills from the studied areas.
Senior
Although this group seems small in the diagram, in fact it is the largest. Because at this point, it is necessary to study everything that was postponed.
Adaptive / Responsive layout- understand the highest level and combine all the knowledge gained so far. The project should look good everywhere and on everything (within reason).
Gradual Degradation / Progressive Improvement- understand what it is and why. Use.
Gitflow- be able to explain to other developers how to create branches, where to merge them, how to be able to review code (layouts, of course, not code).
BEM- optional. Understand the methodology that allows you to create unlimited large projects so that with minimal synchronization, different teams can use each other's blocks. There are other methodologies that give not the worst result. By this time, you will know about them one way or another and will be able to study them if you wish.
100 works- have a total of one hundred works demonstrating the various acquired skills. In fact, it's all conditional. It is possible to have one work (consisting of various parts) in the portfolio, which will already show that you are not afraid of anything.
Conclusion
In fact, many of these topics are small. However, keeping a bunch of different factors in mind is very difficult. For 15 years, I talked with less than ten layout designers (and programmers in general), whom I would classify as Senior (there were much more layout designers, good programmers).
Offhand - it is quite possible to spend a year on a full-fledged study and practice of only layout from scratch (and more, if you go into the design of components).
I hope that for those who are at the beginning of the path, the scheme will tell you where you can still move, and that it is not necessary to immediately (or you can not move into it at all) to run into programming.
I also plan to create a complete free course with a detailed consideration of each of the topics-rectangles from the diagram. I will be glad to offer, feedback, wishes and so on.
The course will probably be in the format of video lessons with full text and graphic duplication. If it works, I'll add links in the comments in the future.
upd
There are many reports that a coder without knowledge of the framework is not needed. This is mainly written by developers in large projects. And, for them, it is quite true. But there are many more studios that make landing pages, various templates for WordPress and other CMS. This is quite a good market and an opportunity to earn. There are quite a few completely small projects, with much smaller requirements, that the layout designer is able to complete perfectly.
From the author: Good day! For the uninitiated, there is something mysterious and even, one might say, frightening in layout. When we go to the site, we see a beautiful picture, a slender structure and a smoothly moving menu. But behind all this is the work of a good person, a link between a web designer and a web programmer - a "gray cardinal", who not only created the code for all the elements on the site, but also tried to ensure that they are displayed correctly in all browsers. Let's talk about the nuances of this Internet profession and how to become a layout designer from scratch.
Don't repeat their mistakes!
As you know, a miser pays twice, or even more. However, many seemingly attractive sites have suffered from the stinginess of their customers and, upon closer examination, have hideous code. Often sites are riveted in haste in special programs that are not fully mastered. As a result, the code turns out to be clumsy, cluttered, inflexible and more like a dump than a slender row of HTML tags, CSS properties and Java scripts.
In the future, saving on high-quality layout can play a disservice: due to non-optimized code, site promotion costs increase, problems with cross-browser compatibility appear (individual elements of the site are inadequately displayed in some browsers and on different user screens), and in the future everything has to be reversed. whine…
But we will not repeat the mistakes of such would-be website builders, will we? If you are thinking about how to become a good coder, then immediately tune in to a serious study of HTML and CSS, and in the future you can master PHP, Java and other programming languages. Moreover, there are many excellent video courses on HTML layout for beginners on the Internet.
Where does the work of a layout designer begin?
As you already understood, the layout designer plays an important role in creating a site. It code web pages using HTML and XHTML markup languages using CSS Cascading Style Sheets.
JavaScript. Fast start
Initially, the layout designer receives a site layout from a web designer, most often in the format of the Adobe Photoshop program - a PSD template, which is a template for layout. The template fully reflects the design of the future web page, its size and layout of all components (images, logo, buttons, menus, etc.).
The main beauty of the PSD template is that it supports a layered image structure. This means that each design element is on a separate layer, so they can be edited independently. This greatly simplifies the layout, as it takes into account its capabilities when recreating the design using CSS and HTML.
Having admired the layout, the layout designer proceeds directly to the layout. It writes each element of the site as HTML code in a special program or text editor designed for programmers, such as Notepad++.
Of course, to become an HTML coder, you will have to practice a lot, learn tags, attributes and properties. In this article, I will not dwell on the explanation of this material, you can find it yourself, which, in my opinion, even a schoolboy can master.
Layout basics by example
For example, let's take an elementary 2-column template with a logo, which we will use as a background image. We will lay out the rest of the parts using HTML, and set the sizes and styles with CSS classes.
The site in our example consists of "Content", "Sidebar" and "Footer". The structure of a web page can be laid out using div tags. Each element must be located in a separate template container layer. For example, the "Content" and " Side panel» are inside the layer:
JavaScript. Fast start
Learn the basics of JavaScript with a practical example of building a web application
Content
< div class = "header" > < / div > < div class = "pages" > < div class = "content" > < h2 >Content< / h2 > < / div > < div class = "sidebar" > < h2 >Side panel< / h2 > < / div > < div class = "foot" > < / div > < / div > < div class = "footer" > < h2 >Basement< / h2 > < / div > |
Using CSS classes, we set the style settings. The background parameter specifies the background color. Set the dimensions with the height and width properties. The margins from the top, left, and right edges of the window are set by margin-top , margin-left , and margin-right .
For the upper part, the color and background are immediately set. The path to the image cut from the PSD template is specified in the special background-image field.
Header ( margin-left:auto; margin-right:auto; margin-bottom:10px; width:1000px; height:100px; border:1px solid #000000; background: #009966; background-image: url(img/1. gif); ) .pages ( margin-left:auto; margin-right:auto; width:1000px; ) .content ( margin-right:10px; width:806px; height:450px; border:1px solid #000000; background: #999999; float:left; ) .sidebar ( width:180px; height:450px; border:1px solid #000000; background: #FF9900; float:left; ) .foot ( clear:both; ) .footer ( margin-top :10px; margin-left:auto; margin-right:auto; width:1000px; height:50px; border:1px solid #000000; background: #333399; )
header ( margin - left : auto ; margin-right: auto; margin - bottom : 10px ; width : 1000px height : 100px ; border : 1px solid #000000; background : #009966; background - image : url (img / 1.gif ) ; Pages ( margin - left : auto ; margin-right: auto; width : 1000px Content( margin - right : 10px ; width : 806px ; height: 450px border : 1px solid #000000; background : #999999; float : left ; sidebar( width : 180px height: 450px border : 1px solid #000000; background : #FF9900; float : left ; This layout provides for separating the style of elements from the HTML code, as well as the ability to overlay layers on top of each other. With its help, it is easy to create various visual effects: tooltips, drop-down menus, lists, etc. We simplify the layout processIn general, it is not at all necessary to carry the entire burden of knowledge on layout on my hump. On the Internet, you can download already made templates or use CSS frameworks, such as Bootstrap. The beauty of using this framework is that its creators have already taken care of all the layout nuances (support for different screen resolutions, cross-browser compatibility, etc.). You only need to specify what, when and how to display on the screen, Bootstrap will do the rest. In addition, thanks to its popularity, it will be easier for your colleague to contribute to your code. Of course, frameworks also have disadvantages, where would we be without them. Their tools are more suitable for prototyping and creating web pages with secondary design, such as administration pages. A more specific design is best done with “handles”. Summing upIn the Internet, there are resources with a complex and very complex structure, in which layout is the most time-consuming step in creating a site. Absolute positioning with JavaScript code and complex nesting of layers greatly complicate the work of a coder, but make it one of the highest paid in Runet. To become a website layout designer from scratch, you will need to not only go through a few, but also invest maximum desire, effort and time into the business. It is also useful to subscribe to our blog updates and regularly read useful articles that will increase your qualifications, and hence your value in the labor market. Good luck with your layout, and see you on the pages of this blog!
JavaScript. Fast start Learn the basics of JavaScript with a practical example of building a web application |
