allenpeter25 / task Goto Github PK

The classname is related to form but not to the section wrapper

Should be used sans-serif according to design.

Design:

plz use more meaningful class names

Plz use only CSS properties for decoration elements

Plz don't use the way of increasing selectors via selector inheritance. We should have the class selector in a unique way for each element.

Your sidebar menu can be rewritten in the next way:

<aside class="sidebar">
                <a href="#" class="sidebar__item">Ramda</a>
                <a href="#" class="sidebar__item">Why Ramda?</a>
                <a href="#" class="sidebar__item">What's Different?</a>
                <a href="#" class="sidebar__item">Introduction</a>
                <a href="#" class="sidebar__item">Philosophy</a>
</aside>

without any nested tags and height property.

Plz compare the header view

Yours:

Original:

Plz try to not apply any properties to body tag besides the font-family, because each section can be dynamically changed

Plz compare the footer view
Original:

Please merge all properties into one class for each element (this way of styling with different selectors is good, but you need to know what exactly you can move into the universal selector and what not, this understanding comes with experience)

Please avoid using inline styles and use the approach of the container below.

The internal indents to design are 155px on each side, and the whole width is 1366px. 1366px - 155px * 2. Plz, find an appropriate container for your purposes in the table below. (1056px ≈1140px) (https://getbootstrap.com/docs/5.0/layout/containers/)

Generally, no one property which impacts external geometry or decoration for the whole page shouldn't be inside the container.

.container {
    width: 1140px;
    margin: 0 auto;
}

Plz consider hw4 hover design:

This is my mistake according to the background image problem because zeplin doesn't allow downloading background images...
You can download them below:

Plz, don't use the fixed width property inside the root tags. U have .container approach for that.

if you've decided to use the same photo, then please follow the design

Plz use BEM for class naming

The structure of the project should be following:

css
| - reset.css
| - styles.css
img
| - smartphone-381237_1920-1024x683.jpg
index.html
readme.md

Plz don't use the way of increasing selectors via selector inheritance. We should have the class selector in a unique way for each element.

Incorrect attr inside

The whole card is a tag

You can use one article with p tags inside instead of separating them into two article tags

The page isn't centered.
The view shouldn't have a horizontal scroll.

It's a redundant way to select the separated section for the one img, plz move it to the section with other content.

Please fix the redundant space at the bottom of the page

Plz align all tags correctly with required attrs:

                <a href="#">
                     <span class="w-59 h-14 ml-332 fs-18 nav-c fw-900 ls-2 .ff-roboto">
                         HOME
                     </span>
                </a>

And better to use the following link customizing:

<a href="#" class="nav-link">home</a>

.nav-link {
  ...
  text-transform: uppercasse;
  ...
}

The page isn't centered.

If you wanna use container restrictions for the page, you need to use the following implementation:

<header class="...">
   <div class="container">...</div>
</header>
<main class="...">
   <div class="container">...</div>
</main >
<footer class="...">
   <div class="container">...</div>
</footer>

.container {
    width: 1280px;
    margin: 0 auto;
}

Generally, no one property which impacts external geometry or decoration for the whole page shouldn't be inside the container.

plz, use more meaningful class names instead of company-name1 and company-name2

All classes can be written in a kebab-case or via BEM methodology https://en.bem.info/methodology/quick-start/

Plz fix the layout, according to the design

This property is redundant for this selector because the content should be formed automatically without any restrictions if you try to use correct styling according to font-size, indents (internal/external), line-height and others you will see the same result

Plz fix all incorrect links and tags:

We shouldn't have any other properties that can impact on .container selector as an independent wrapper for each section

Your nav menu can be rewritten in the next way:

<nav class="navbar">
                <a href="#" class="navbar__item">Functional Programming</a>
                <a href="#" class="navbar__item">Ramda</a>
                <a href="#" class="navbar__item">Fantasy Land Spec</a>
                <a href="#" class="navbar__item">Node.js for all</a>
</aside>

without any nested tags and height properties.

Contextually right way with width, but better to bring a special container for each section of the page.
If you wanna use width restrictions for the page, you need to use the following structure:

<header class="...">
   <div class="container">...</div>
</header>
<main class="...">
   <div class="container">...</div>
</main >
<footer class="...">
   <div class="container">...</div>
</footer>

.container {
    width: 960px;
    margin: 0 auto;
    text-align: center; /* can be used optionally if you wanna align the whole section */
}

plz use more meaningful class names for the whole file