We need to refactor the code a little to make it semantically correct.
Existing tags need to be grouped into logical blocks for this to be semantically correct.
We also need to replace some of the tags with more appropriate ones....
We need to refactor the code a little to make it semantically correct.
Replace the required tags with semantic ones.
For the title, use the tags h1, h2 and h3 in decreasing order of block sizes....
Paragraphs render well on mobile displays.
But for large displays, it鈥檚 worth a little tweak.
Let鈥檚 change the paragraph styles for all devices with a display width greater than 480px:...
Your colleague added a navigation layout. But it won鈥檛 look very good on small devices.
Let鈥檚 tweak a bit. All changes should only show on screens smaller than 480px.
Navigation should be positioned at the top of the screen for its full width, with a height of 50px....
The subscription page should display well on all devices.
For screens up to 1280px, the .wrapper element must contain two columns of 300px width.
For screens up to 740px, the ....
All text inside h1, h3, li looks too large on screens smaller than 640px.
Let鈥檚 fix it. We need to reduce the font sizes for these screens by 1.6 times....
We will develop a landing page for a mobile game. This is where all the knowledge you gain will come in handy! Let鈥檚 get started?
At the first stage we鈥檒l add a page title....
The div.container from the second section must have a border-bottom class.
This class should add a bottom border - 1px solid #dee2e6.
The description-section element must have a top padding of 75px....
Let鈥檚 add another section .description-section.
Inside the first column there will be a div.section-image with the image screen2.png.
There will be div.content inside the second column.
The heading text is h1 - Learn with us....
Now let鈥檚 add a comment section - section.comments-section.
The structure is similar, but there will be two div.row.
The first should have an additional class one-column, the second should have a columns-view....