Is it possible to meddle in Odessa with such a level of work (front-end)?

Question

css

Good night,
I decided to change my specialization and began to study front-end.
Today I completed the first layout, please evaluate it - here is the whole code, as well as the source code.
You can play and poke here .
Throw tomatoes at me as hard as you can, this is my first layout.
The layout is not adaptive, in the following layouts I will do with @ mediaand, possibly, mobile-first.
If we imagine the situation that I hand over such a layout to the customer, will he accept the work? It took 3 evenings in total, i.e. somewhere around 9-10 hours, half of which related to js.
I have already made a profile on Odessa, I plan to make 3 more such layouts and already go to send applications.
By the way, an additional question - should the layout designer make the slider, portfolio (in this layout) workable or not?

Answer 1

I type a lot myself, so I'll try to give advice, but this is purely my opinion, so try to respond accordingly :)
First, on the questions directly in this post:
1) The customer may or may not accept this - it depends on how meticulous he is, that's all. In any case, you need to understand that it rarely happens that the customer understands something about what you are doing, so his "wishlist" will most likely refer to his subjective perception of the appearance of the site. But you also need to understand that attention to detail gives a good result on this perception, including :)
2) Personally, I make it so that in the template you can simply write something like
<? foreach ($slide in $slides): ?> <? endforeach; ?>
and not worry about what will happen next (within reason, of course - most often the slides must be of a certain size, but this needs to be talked about).
Now for your code:
1) Try using sass/less with auto-prefixes, compasses, etc. - it will be very convenient to write styles.
2) Personally, I rarely use third-party sliders, because they often use a bunch of obscure classes, divs, wrappers, inner wrappers, outer wrappers, containers, etc., although most often a few lines in js are enough, the task of which is simply to give the right classes for the right slides, and animations in css - as a result, it's even faster than customizing some third-party jquery slider. And if you make a blank for the future once, then in general everything can be done in a couple of minutes.
3) Instead of sprites, in many cases it is better to use font icons (for example, with icomoon.io). For example, for social media icons. Of the pleasant bonuses - fonts can be painted in any color and animated, as well as they are vector, which allows you not to worry about high-definition displays. You can also svg, but with them it's a little more complicated, but flexible.
4) Usually, on such sites, a fixed menu is sculpted, which narrows when scrolling down (which, by the way, is again solved by css transitions and a couple of lines in js to set a small type class).
5) #link-services feature is better to do not section, but article or figure - it will be more correct semantically. And it's better to make sections with #link-services, #link-portfolio, etc. Read on any resource about the semantic meaning of html5 tags, you can find a lot of interesting things there:
6) I would somehow highlight the form elements during focus, make them more contrast, otherwise on some screens the text may merge with the background of the input.
7) p.section-description is better done without a class at all, and in css set a common style for all paragraphs, changing it in specific cases if necessary.
8) Since the site is so animated, why didn't you animate the links :) ? At least for works in the portfolio, it is imperative to do this, and just pictures are not enough, you need at least more headings that can, for example, pop up on hover. Very beautifully obtained in such moments of the animation transform: scale(...) together with opacity.
9) header and footer are not always one in one document, these elements can also be nested in article or section. As a result, it is better to give your body > header and body > footer distinct classes or IDs that illustrate their belonging to the entire page, and not to individual blocks.
10) .feature > aside I may be wrong, but it seems to me that this is semantically incorrect. Aside should show some part of the document that helps you navigate the content on the site (eg filters, sidebar). In your case, it's just an icon, so it's better to just use a div here.
11) According to js: you have some strange block at the top, where global variables are set. You are using jQuery there without putting the code in $(document).ready. All jQuery code related to selectors (at a minimum) should always be inside ready. Yes, and some strange constructions there like var buttonAll = $('.works-button')[0], which are then used again as $(buttonAll). It's better to write lines with selectors in buttonAll then, and not use jQuery 2 times for the same thing. And constructions like $('.works-button')[0,1,2,3] are quite dangerous. Here it is better to give each button some data-category attribute (or even write #category-name in the href), and write one handler for all these buttons, which simply filters the work by the value of this attribute. So it will be easier to change something in the future,
In general, something like this.

Answer 2

Landing pages are not very difficult to make up, and there is no need to make them up; everything has been rolled up for a long time and is sold for $5-10 apiece, in any design.
If you didn't ask for help on the toaster when you did it, it would be great :)
The layout is quite clean, but there are a lot of classes, almost every element has too many.
I do not agree with the author above, the layout designer should be able to make a fully working template, this is still a front-end, not a back-end.

Answer 3

As a first job, not bad. As already mentioned above - there are many classes.
By the way, if you narrow the browser screen so that horizontal scrolling appears, then when scrolling, a bug appears f5.s.qip.ru/RFrXBkOf.png

Answer 4

Start with small work on the clothes and you will succeed.

Answer 5

And I thought frontend was words like requirejs, mvvm, SPA, localstorage, websockets, webgl, etc. :)

Answer 6

And this feature is such that the "All" button in the portfolio is not highlighted after clicking on the rest?

Answer 7

It can be seen that it is still "damp", but not bad. A couple of minor tweaks and it will be great.
Continue in the same spirit, make more examples and then there will be something to show to customers.
Just do not overestimate the prices, put below average and you will have orders.
Depends or he likes it. Customers are capricious people :)
There is no layout designer, it is the programmer who must set up all the nuances.

Answer 8

It’s too early for clothes, make another 30 pages to feel more confident and not only landing pages, but e-commerce, for example.

Answer 9

Damn cool, but how did you do all this, what knowledge is needed besides css and html? js jquery?
The site turned out well and everything is cool. it’s just that I personally don’t know how to make sliders yet, and when you click on the picture, it appears in a frame that you can close, so it’s interesting through what it was done))

Answer 10

You will be able to convince the customer that you will cope with the work - it will go) The projects there are different, both elementary and complex.

Answer 11

well, a very similar layout www.psdchat.com/resources/freebie-flat-single-page...

Answer 12

I don’t understand, but where is the Submit button on the feedback form?