Correct frontend?

Question

css

Hello! Need advice!
You need to learn preprocessors (sass / scss for example), git, gulp ... thus reach a new level of frontend developer'a! I plan to make a small landing page using these technologies and study them! I want to study all this in conjunction with bootstrap!
Please tell me how to build the work correctly, some kind of algorithm of actions?
Interested in any details!
I would be very grateful for your help!

Answer 1

Here is my repository - this is a ready-made template for adaptive layout. Just there all charms are used (git, gulp, sass, autoprefixer)
There is an example .
I also recommend reading the Sass Writing Guide.

Answer 2

Grunt Tutorial: nano.sapegin.ru/all/grunt-0-4
Once everything is set up, you will understand that writing in LESS/SASS is no more difficult than writing in pure CSS, since grunt will do all the background work of converting to CSS for you.
Set the bootstrap aside for now. This framework will now prevent you from understanding how it all works. But in the future it will help a lot when you already know everything else.
I also recommend this topic: What are the practical courses / lessons on html5 + css3 + javascript?

Answer 3

Create a project structure like this:
project/
project/src/
project/src/scss/
project/src/js/
project/src/images/
Create a package.json with the npm init command, fill in all the information, project name, author, dependencies, etc. .d. Install gulp, create a git repository and a gitignore file containing the node_modules/ app/ folders, etc. Create gulpfile.js, add it to the index (to the repository) and make the first commit. Then write a couple of tasks in gulpfile.js and install a couple of modules. All your sources will be collected in the app/ folder, and it will already contain app/css, app/js, app/images, etc.
As a result, your project can be easily picked up by simply cloning the repository and doing npm install and then running gulp.

Answer 4

For starters, I can suggest this https://github.com/Insayt/frontend-devil , there is a link to an article on Habré about how to cook it)
I haven’t seen a more detailed manual. For starters, that's it :)

Answer 5

HTML5, PostCSS (you can also use LESS/SCSS/Stylus with it), Gulp (Browser-sync for live reload) it's faster, Bootstrap and of course a good attitude.

Answer 6

I highly recommend TARS , just right for the current task. There is a detailed description in two languages ​​+ articles on Habré .

Answer 7

1. First of all, understand what a package manager is (in our case, npm )
2. Try to understand how the project builder (Gulp) works. Gulp Basics .
2. Try to introduce there those technologies that interest you. (Even if you haven't learned them, there are plenty of guides on the internet for implementing different technologies in Gulp. This saves you from using programs like PrePros ).
3. Start learning SASS .
4. Embed bootstrap-sass in your project.
5. Keep practicing.
From the sources where you can learn all this well, I can highlight a few:
WebReference- Lots of goodies for beginners. It was this site that helped me at the beginning of the front-end path.
Frontender Magazine - a huge number of useful articles.
Zencoder - here you can also find a lot of things according to your preferences.
Progressor - similar to the previous one.
The information I have provided should be sufficient for you. Good luck!

Answer 8

Just follow twitter https://twitter.com/jsunderhood and in a couple of weeks you will have a good idea of ​​modern good frontend. Ask questions there as well.

Answer 9

What did they advise you here, it doesn’t even smell like a frontend ... Frontend is knowledge of js and the use of its frameworks, knowledge of some php frameworks and php itself in general (at least the basics), and the basics of a frontend are knowledge of a layout designer - html (or better jade or haml), css (or better scss or less) and jquery
, by the way, the sass dock in Russian - sass-scss.ru

Answer 10

The frontender needs to know the following technologies:
https://i.imgur.com/EB3TIdK.png (picture taken from here - https://parbhatpuri.com/skills-essential-for-a-fro... )
I know only half ( with a focus on layout, not JS), and this is enough for me for most projects. But it's better to study everything in the picture - then you will be a front-end ninja)

Answer 11

I would advise moving in steps that consolidate one (maximum two) technologies. But this is more a matter of psychological burden - it's easier when you use unfamiliar technology in 40% of cases, when the remaining 60% are technologies in which you already have experience.
In principle, you can use the following sequence of actions:
1) Write a small landing page (2 screens, I think, will be enough) using Bootstrap. If you have not worked with it before, then I will add that Bootstrap, if taken in general, has 2 functions - the structure of blocks on the site (with adaptability) and ready-made interface elements. That is, for a site with a non-standard modular grid and drawn by the designer, it is better to write a few extra lines of CSS, and for landings, Bootstrap is just right.
2) Install git. Create an empty project just to "feel" and then create a new project based on the landing page. Understand the basic git terms and work with the server (you can use BitBucket), read about gitHub, make any changes to the project and add them to git
3) Install SASS (before that Ruby). Rewrite all css code in accordance with the capabilities of sass. If the SASS documentation describes features that are not in the landing page, add a new block to practice with a particular feature. I read in the answers that they also advised to try less and Stylus. I won’t say anything about Stylus, because I didn’t work with it, and less, as for me, is not worth it - it has less functionality, and it’s much lower in popularity, so it will be more difficult to find answers to questions.
4) Automate processes using gulp (you can just go through the documentation to have a list of actions, you can read the instructions on the Internet
) figure it out. In any case, I wish you success in your studies!

Answer 12

I made a video about Git. I explained there about branches, commits, etc. Video

Answer 13

logtblog channel - https://www.youtube.com/playlist?list=PLY4rE9dstrJ...

Answer 14

I would advise you to find the third course on HTML and CSS from the Specialist, it just tells and describes in detail the technologies that you indicated and even more. You will learn about (SASS, LESS, STYLUS) for yourself, you will make a choice which one you like best. Learn about HTML preprocessors (Haml). About Gulp, you got a good link above from loftblog.