Skilled e-learning landing page solution

1. how to set size on image. in most of cases put the image inside separate div on div set max-width or width property then give the image width 100% this will work you can use object-fit or object-contain... properties on your image div
2. variable names ? variable names should explain what is the job of variable and what will that variable contain

Are there any recommendations on things I can improve upon based on my code or implementations?

1. You are using px unit in many places where rem unit would make much more sense. Watch: Why You Should Use REM Instead of Pixels.
2. You have a habit of using large amounts of padding to "scooch" things over or create negative space. You can often accomplish the same result with more maintainable code using max-width and margin: auto.
3. Use additional semantic elements, like main instead of using div.
4. Validate your HTML. Currently, your HTML is invalid. For example, you put both the nav and the footer outside of the page. All page content should go inside the body. The majority of img elements on the page lack an alt attribute. You can use W3 Validator to see what can be improved. There are also extensions for HTML and CSS validation for Visual Studio Code. I would ignore the "INFO" messages and focus on the "ERROR" messages.
5. Your background is a bit off from the design. It should be a linear gradient from top to bottom, starting with white and ending with the gray you have currently.
6. You did not implement box shadows on cards, which is present in the design.

How do you think about naming conventions for variables and classes? I think mine got a bit messy and want to improve there.

The naming of CSS custom properties was fairly consistent, but make sure to pick a convention and stick to it. You mostly used kebab-case, but things like "headingL" and "bodyM" are outliers.

The naming of CSS classes was not particularly consistent but it also wasn't poorly organized. You would benefit from picking a convention, for example, BEM, and sticking to it.

An issue that stood out to me was classes like "button-one", "button-two", and so on. These class names are not descriptive. There was also a decent amount of CSS that could have be shared between these classes.

Check out MDN's article on Organizing your CSS for additional advice.

How would or did you tackle the image being half off screen for tablet and desktop designs?

Take note of how the hero image on the tablet and desktop design seems to flow outside/across the boundaries of regions on the page. For example, it goes to the right of the "main" area and also goes up, entering into the navbar area.

To me, this indicates that a solution will likely involve removing it from the document flow. You could do this with CSS position. You could also do this with CSS background-image and forgo an element all together.

Be mindful that information is contained within this image (e.g. course hours, number of members), so to be fully accessible, this information needs to be preserved.