Layout and web development of websites. Advanced level Web Develop - course 1990 rub. from Stepik, training 131 lessons, Date: December 1, 2023.
Miscellaneous / / December 04, 2023
Hello!
My name is Dima. And I invite you to plunge into the very depths of website creation and layout!
This course is for those who already know the basics, but want to move from a good level of website creation to an excellent one.
The course is for those who know the basics of HTML and CSS, but know that there are still many techniques, development techniques and technologies that are used by real pro-developers.
If this sounds familiar, then this course is for you)
Bring life to your websites with modern animations via CSS
We will start by introducing dynamics into our sites, that is, we will do animation. We will learn how to animate buttons, texts and headings using pure CSS, learn how to create card animations, create a dynamic navigation menu, and all this without a single line of JS code, only pure CSS.
This course contains best practices in responsive design.
You'll learn new ways and tricks to design your sites responsively, use new techniques for defining and writing media queries, and learn how to adapt all page elements by changing just one CSS property so your site looks better than ever on any mobile device device
Learn all the intricacies and advantages of modern preprocessors
You will learn how to speed up your website creation by several times by using the full capabilities of the SASS preprocessor, such as mixins, variables and functions.
Essential basics for using NPM
Also, NPM packages with the plugins necessary for every professional developer will give us the opportunity to create and optimize websites faster and more efficiently than ever before.
Git version control system will help you in your development
Additionally, you will learn the necessary basics for working with the git version control system so that you always have the ability to return to the correct version of your site, no matter how badly you messed up the last time update the site)
You are creating 2 modern websites for your portfolio
This course is built on practice and is divided into small video lessons in which we will step by step create 2 large modern projects based on the float system - so that you can support old projects and of course on the GRID CSS system, which allows you to create layouts of incredible complexity.
And of course, you won’t be ashamed to show these projects to your potential customers or future employers.
I'm always in touch!
And rest assured, you will not be left alone, because after each small lesson, you will have the opportunity to compare your code with mine or simply ask a question; the answers usually do not take long to arrive.
Money back guarantee!
And if you still have doubts, this course provides the opportunity to return the money spent on it if you don’t like it within 30 days.
Join me and together we will learn how to create professional, modern websites.
See you in class!
9
coursesI have been creating original online courses since 2016. I professionally teach working with Adobe graphic editors, teach design and web development.
Hello! My name is Dima! I don’t want to brag, but I have to) I have taught more than 5,000 students around the world in my proprietary online courses. Over 2,000 real reviews with an average rating of 4.83 out of 5.00! I teach web design, web development and the necessary software (Photoshop Illustrator, Figma). My teaching experience consists of 5 years of freelance tutoring, as well as teaching through online schools and courses, on global distance learning platforms. Students of my courses note my best qualities in the way I present the material without cramming, in a fun and interesting way.
Preparation / Repetition / First animations
1. Hello!) Download materials for the course
2. Install and configure the necessary software
3. New property clip-path. We begin to create the first section of the site
4. If scout-app does not work for you
5. Practice: Create your shape using Clip-path
6. Aligning elements vertically using absolute positioning
7. Meet @KeyFrames. Let's create the first animation.
8. Backface-visibility and creating buttons through pseudo-classes
9. Animating a button using pseudo-elements
10. Animation-fill-mode. Starting an animation from a specific point.
11. 3 principles of web development
12. Use REM instead of PX
Git and GitHub
1. What is this block about?
2. Basic commands in the terminal
3. How to edit files via terminal
4. Install the git system on our computer
5. How to run git in a specific project
6. Creating the first commit
7. Submitting a project to GitHub
8. If you have an error when submitting your project to GitHub
9. Login error when trying to push a project to GitHub
10. Practice: Create your own repository
11. How to delete a GitHub repository
12. How to download repositories from GitHub
13. We emulate the work of 2 developers on one repository
14. How to display information about commits in the terminal. Git log
15. What are branches
16. How to create and navigate branches.
17. We close the gap from the beginning of the mini course with the notations -u and -M
18. Unsaved commit error during checkout
19. How to push created changes to a new branch
20. How to push multiple commits to a new branch
21. What is the detached head condition? Detached HEAD
22. How to restore a specific file from a previous commit
23. Advanced git log and git show
24. How to merge branches using Git merge. Fast-forward method
25. How to delete branches
26. How to remove directory files from untracked state
27. Git reset --hard. How to hard rollback a commit
28. Second way to find a stuck commit using ORIG_HEAD
29. Git reset --soft
30. Git commit --amend changing the comment of a previous commit
31. Git reset --mixed
32. Difference between git reset and git restore
33. Introduction to git diff. Printing the difference of several commits to the console
34. Practical example of using git diff
35. How to display the branch diagram in the terminal. Git log --graph
36. We merge branches using git merge. Method "True Fusion"
37. How to roll back after a merge
38. How to copy a specific commit using git cherry-pick
39. Merging branches with git rebase
40. Which is better git rebase or git merge
41. How to use the .gitignore file
42. Final word
Advanced layout - CSS/SASS
1. What is this block about?
2. How SASS variables work
3. How mixins work
4. How to add arguments to mixins
5. What are SASS templates
6. How SASS functions work
7. Organizing SASS files for a large project
8. 3 ways to position elements
9. How does float work?
10. Creating our own grid system
11. Applying a gradient to text. Backgroud-clip
12. How to Create Symbols Using HTML
13. Animating and finishing the second section
14. How to create your own icon fonts
15. We use the perspective property to reflect the perspective of the elements
16. How blending mode works in CSS
17. Finishing the section with cards
18. How to round text using the shape-outside property
19. How CSS filters work
20. How to add a video to a page
21. Getting to know the form tag and its contents
22. Animating the form
23. Making your own radio button using CSS
24. Creating a website footer
25. Creating a navigation menu using pure CSS part-1
26. Setting up animation speed transitions using cubic-bezier
27. Animating a hamburger
Adaptive design
1. What is this block about?
2. How to create responsive websites
3. Creating a mixin with media rules
4. Adaptation of the project part 1
5. Adaptation of the project part 2
6. Adaptation of the project part 3
7. What are responsive images
8. How to Adapt Images in HTML
9. Let's adapt HTML images in our project
10. Adaptation of CSS images
11. A few final site edits
Node package manager
1. What is this block about?
2. What is node.js and npm
3. Preparing the first npm package for use
4. Launching the first npm package
5. Using gulp in our project
6. How to open a website on a mobile phone
Introduction to CSS GRID
1. What is this block about?
2. Preparation
3. How to create a grid template. Grid template
4. How fr units work
5. How to move an element to another cell
6. Placing multiple items in one cell
7. Practice: Create a website layout
8. Example of a teacher. Create a layout
9. How to rename every line in a grid
10. How to Create a Grid Template Using a Naming Scheme
11. What are explicit and implicit grids?
12. How to align elements inside cells
13. How to align a grid inside a container
14. Min-Max content
15. Auto-fill and Auto-fit. Cell sizes based on content
16. Conclusion. Grid garden
GRID CSS Project
1. What is this block about?
2. Preparation
3. Create a grid template part 1
4. Create a grid template part 2
5. How SVG sprites work
6. We are finishing the second section of the site
7. Creating the "Banner" section, part 1
8. Creating the "Banner" section, part 2
9. Creating a section with cards
10. Creating a gallery
11. Creating a footer
12. Making "Hamburger"
13. Creating header part 1
14. Creating header part 2
15. We adapt the site
See you again!
1. Goodbye!
Get your certificate
1. Test for obtaining a certificate of completion of the course