I took the assignments in the Stepik course Web Development for Beginners: HTML and CSS / Я взяла задания в Stepik на курсе Веб-разработка для начинающих: HTML и CSS

Houston! We have a problem! We need the page done right away! Psshhhhhhhhhhhhhh!!!

We need to cobble together a page from the layout "Houston - layout.pdf". There is also a screenshot of the "Houston.png" page that has already been laid out, so that you have an understanding of how it should end up.

Mandatory requirements:

1. The page must be semantically correct. If in doubt about the selected tag, go to the original site and maybe so you will be clearer: https://ru.wikipedia.org/wiki/Хьюстон
2. The page should be rendered without using CSS.
3. There should be anchors in the content for all titles.
4. Your page may or may not look the same as the layout. The main thing is that the layout must be semantically correct.

Layout, screenshot and pictures at: https://drive.google.com/open?id=1PWoLJnHDWB-gGCZV1Nlk9w0KnmvYwnYp

Don't worry if the resulting page is wider than in the layout. This is normal, because in this case the content is stretched to the full width of the browser window, and for the layout we just reduced its width.

The task is checked by yourself.

Хьюстон! У нас проблема! Срочно нужно сверстать страницу! Пщщщ пщщщщ!!!

Необходимо сверстать страницу по макету "Хьюстон - макет.pdf". Так же есть скриншот уже свёрстанной страницы "Хьюстон.png", чтобы было понимание, как в итоге должно выйти.

Обязательные требования:

1. Сверстанная страница обязательно должна быть семантически верной. Если ты сомневаешься в выбранном теге, зайди на сайт оригинала и может так тебе станет яснее: https://ru.wikipedia.org/wiki/Хьюстон
2. Необходимо верстать без использования CSS
3. В содержании должны быть якоря на все заголовки
4. Твоя страница может и будет отличаться внешне от макета. Главное - верстка должна быть семантически верной.

Макет, скриншот и картинки по ссылке: https://drive.google.com/open?id=1PWoLJnHDWB-gGCZV1Nlk9w0KnmvYwnYp

Не беспокойся, если в результате страничка шире, чем в макете. Это нормально, так как в данном случае контент растягивается по всей ширине окна браузера, и для макета мы просто уменьшили его ширину.

Задание проверяется самостоятельно.

The most important skill of any developer is the ability to pose a question and find the answer on the Internet.

You already know the syntax of CSS and how it works. So you will be able to search for the names of the necessary properties and examples of their use on your own. For example, if you want to emphasize text, but you do not know how to do this. In that case, you just google "how to underline text in css example" and click the first link.

Take your first completed homework and style it. Requirements:

Content takes up 70% of the width of the page. The content is aligned in the middle. Titles of all levels are in sans serif font. The top indent of the headers is set larger than the bottom (e.g. 1.5em) to comply with the rule of internal and external. The headings of the first level are 32px in size. Tables have continuous black borders which are 1px thick. Captions under pictures are in italics. Pictures are surrounded by text. Pictures on the right, text on the left. If some parts of the page will look strange, then do not adjust the general styles to private cases. To fix a particular place, write styles specifically for it, using selectors by class.

Here's roughly what you should get: Houston CSS (PNG, 3MB)

The assignment is self-checking.

Самый важный навык любого разработчика - умение ставить вопрос и находить на него ответ в интернете.

Ты уже знаешь синтаксис CSS и принципы его работы. Поэтому сможешь самостоятельно искать названия нужных свойств и примеры их использования. Например, тебе нужно подчеркнуть текст, но ты не знаешь, как это сделать. В этом случае тебе достаточно погуглить "как подчеркнуть текст в css пример" и нажать первую ссылку.

Возьми свою первую выполненную домашку и стилизуй её. Требования:

Контент занимает 70% ширины страницы. Контент выровнен по середине. Заголовки всех уровней выполнены шрифтом без засечек. Верхний отступ заголовков установлен больше нижнего (например, 1.5em), чтобы соблюсти правило внутреннего и внешнего. Заголовки первого уровня имеют размер 32px. Таблицы имеют непрерывные границы чёрного цвета толщиной 1px. Подписи под картинками выполены курсивом. Картинки обтекаются текстом. Картинки справа, текст слева. Если отдельные части страницы будут смотреться странно, то не стоит подгонять общие стили под частные случаи. Чтобы исправить отдельное место, напиши стили конкретно для него, используя селекторы по классу.

Вот, что примерно должно у тебя получиться: Хьюстон CSS (PNG, 3МБ)

Задание проверяется самостоятельно.