Html css session day 3 #1

gealsanchez · 2022-09-22T01:49:41Z

.github/workflows FOLDERS were CREATED workflows goes inside .github
linters.yml FILE was CREATED inside workflows folder
linters.yml HTML & CSS configuration

1 "CONTAINER" DIV WAS CREATED
3 DIVs WERE CREATED INSIDE THE CONTAINER
5 CLASSES WERE CREATED "CONTAINER" , "ICON" , "NAME" , "PROFILE" , "LEFTMARGIN"

"container" , "icon" , "name" , "profile" , "leftmargin" CLASSES WERE CREATED

linters.yml errors corrected

Optional Suggestions**

Update the document title Professional Portfolio GERSON SANCHEZ
Changed the width from px to %
Font families was setup
geometry.png added
"navigation" , "menu" CLASSES WERE ADDED
hamburguer.png ICON line WAS ADDED
hamburguer.png WAS UPLOADED
"navigation" , "menu" CLASSES WERE DECLARED
Linters.yml errors
13:11 heavy_multiplication_x Expected single space before "{" block-opening-brace-space-before
22:12 heavy_multiplication_x Expected a leading zero number-leading-zero

Required change

Kindly make sure you chose one temple to the Figma and your design must stick to the template design you have chosen as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma.

.github/workflows FOLDERS were CREATED workflows goes inside .github linters.yml FILE was CREATED inside workflows folder linters.yml HTML & CSS configuration

1 "CONTAINER" DIV WAS CREATED 3 DIVs WERE CREATED INSIDE THE CONTAINER 5 CLASSES WERE CREATED "CONTAINER" , "ICON" , "NAME" , "PROFILE" , "LEFTMARGIN"

"container" , "icon" , "name" , "profile" , "leftmargin" CLASSES WERE CREATED

Changed the indentation

Expected indentation of 2 spaces

Unexpected extra semicolon

Added semicolon 8:2

Unexpected extra semicolon no-extra-semicolons 10:1 ✖ Unexpected extra semicolon no-extra-semicolons 16:1 ✖ Unexpected extra semicolon no-extra-semicolons 25:1 ✖ Unexpected extra semicolon no-extra-semicolons 38:1 ✖ Unexpected extra semicolon no-extra-semicolons

Changed the "leftmargin" & "icon" classes indentation let them in 1 line not in 3

No space between classes

Missed semicolon 11:21

11:21 Missed semicolon

7:15 Expected a trailing semicolon declaration-block-trailing-semicolon 10:1 Expected empty line before rule rule-empty-line-before 16:1 Expected empty line before rule rule-empty-line-before

16:2 Unexpected whitespace at end of line no-eol-whitespace 17:1 Unexpected empty line before closing brace block-closing-brace-empty-line-before 18:1 Expected empty line before rule rule-empty-line-before

17:1 Expected empty line before rule rule-empty-line-before 18:2 Unexpected whitespace at end of line no-eol-whitespace 19:3 Unexpected empty line before declaration declaration-empty-line-before

Update License Link [MIT license](https://github.com/gealsanchez/portfolio/blob/htmlCSS-Session-Day-3/LICENSE)

mgmediaweb

Hi @gealsanchez ,

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

Highlights 💯

Professional-looking readme file. ✔️
Clear and descriptive Pull Request. ✔️
Clean and tidy code. ✔️

Required Changes ♻️

*** Kindly, I suggest you work a little more on your design, currently I can't tell which template you are basing on Figma

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

mgmediaweb · 2022-09-22T03:21:52Z

index.html

+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Document</title>


Kindly, I suggest you put a descriptive title to your website

Good job following the advice of the previous reviewer

mgmediaweb · 2022-09-22T03:22:48Z

index.html

+
+    <div class="container">
+        <div><img class="icon" src="geometry.png" alt=""></div>
+        <div class="name leftmargin">Gerson Sanchez</div>


Kindly, I suggest you use an H1 tag for the main header

Good job following the advice of the previous reviewer

mgmediaweb · 2022-09-22T03:23:38Z

index.html

+    <div class="container">
+        <div><img class="icon" src="geometry.png" alt=""></div>
+        <div class="name leftmargin">Gerson Sanchez</div>
+        <div class="profile leftmargin">Hello! I am a software developer! I can help you build a product, feature or


I kindly suggest using a "P" tag for traditional information

Good job following the advice of the previous reviewer

mgmediaweb · 2022-09-22T03:25:13Z

styles.css

+  flex-direction: column;
+  flex-wrap: wrap;
+  border: 10px solid blue;
+  width: 320px;


Kindly, I suggest you not to use fixed widths (it is preferable to use percentages) so that your website adapts to any size of mobile device.

mgmediaweb · 2022-09-22T03:27:17Z

index.html

+<body>
+
+    <div class="container">
+        <div><img class="icon" src="geometry.png" alt=""></div>


Kindly, I suggest you use a HEADER tag, and within it a NAV tag to contain the "hamburger" menu

Kindly, I suggest you check this image link because the image does not exist

Good job following the advice of the previous reviewer

Update the document title Professional Portfolio GERSON SANCHEZ

Changed the width from px to % Font families was setup

geometry.png added

"navigation" , "menu" CLASSES WERE ADDED hamburguer.png ICON line WAS ADDED

hamburguer.png WAS UPLOADED

"navigation" , "menu" CLASSES WERE DECLARED

13:11 ✖ Expected single space before "{" block-opening-brace-space-before 22:12 ✖ Expected a leading zero number-leading-zero

MaganaAsiati

STATUS: Required Changes ♻️♻️♻️

Hi @gealsanchez

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

Highlights

✅ No linter error
✅ README is professional

Required Changes ♻️

Kindly make sure you chose one temple to the Figma and your design must stick to the template design you have chosen as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma. 😀 😀 😀

For example if you chose a template one your design will look at the picture below

the toolbar (or header):

the headline section (right after the header):

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you take them into account as they can make your code better.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

MaganaAsiati · 2022-09-22T19:17:38Z

index.html

+    <div class="container">
+        <div><img class="icon" src="geometry.png" alt=""></div>


Kindly make sure the container of this section is a header tag.
Typically the header tag is used as a page header, it contains the site's title or logo (or both) and the main site navigation. Check this link for more info. 😀 😀 😀

The logo (if the design has one) is on the left and has a link (a tag).

This is for three reasons: convention, semantics, and user experience(UX). Check this link for more info. 😀 😀 😀

The hamburger button is on the right and has a nav tag.

The nav tag is for semantics reasons, and the right position for convention and user experience for mobile devices. 😀 😀 😀

check the example below 👍

<header> <a href="index.html"> <img src="images/logo.png" alt="Logo" /> </a> <nav class="hamburger-menu"> <div class="bar-top"></div> <div class="bar-middle"></div> <div class="bar-bottom"></div> </nav> </header>

Kindly make sure you chose one temple to the Figma and your design must stick to the template design you have chosen as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma.

23:12 ✖ Expected a leading zero number-leading-zero 46:3 ✖ Unexpected empty line before declaration declaration-empty-line-before

width: 50%

Placed the right image in the right bottom side

Added a div to align the social media links and the image of the left side

Duplicated lines deleted

54:8 ✖ Expected single space before "{" block-opening-brace-space-before

mgmediaweb

Hi @gealsanchez ,

Great work on making the changes requested by a previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some which aren't addressed yet.

Highlights 💯

Good job following the advice of the previous reviewer ✔️

Required Changes ♻️

Kindly, I suggest you check a white border and a horizontal scroll that makes your website not look very good, please check what element produces this and adjust it
Kindly, I suggest you revise the background image and social icons, so that it looks similar to the original Figma design.

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

Social media and images were uploaded

body margin 0%

gealsanchez · 2022-09-23T04:06:49Z

I forgot to upload the images my mistake sorry

No more needed

Nyame-Wolf

STATUS: APPROVED ✔️ 🟢

Hi @gealsanchez 😄 ,

Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! 🎉

Highlights ✨

Optional suggestions ☑️

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

APPROVED! 💯 💯 💯

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me, @Nyame-Wolf in your question so I can receive the notification.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

Nyame-Wolf · 2022-09-23T12:58:54Z

styles.css

+  display: flex;
+  flex-direction: column;
+  border-radius: 2%;
+  width: 375px;


[OPTIONAL]I suggest getting rid of this fixed width. The app looks good but can serve only devices that have a minimum width of 375 px while its meant to serve devices between 768px and 375px

Hi @Nyame-Wolf how do you describe that behavior, dynamic width?

Nyame-Wolf · 2022-09-23T13:02:35Z

index.html

+    <div class="container">
+        <header>
+            <nav class="navigation">
+                <p>John Doe</p>


[OPTIONAL] I suggest making this logo a link element <a> instead of a paragraph.

The logo (if the design has one) is on the left and has a link (a tag).
This is for three reasons: convention, semantics, and user experience(UX). Check this link for more info.

Nyame-Wolf · 2022-09-23T13:05:08Z

index.html

+<body>
+
+    <div class="container">
+        <header>


[OPTIONAL] The margin between your header elements is not similar to the figma design

Your design

Figma design

Please note that your color and fonts also do not match the figma design. Please fix this.

gealsanchez added 19 commits September 21, 2022 18:35

Create linters.yml

50f59e9

.github/workflows FOLDERS were CREATED workflows goes inside .github linters.yml FILE was CREATED inside workflows folder linters.yml HTML & CSS configuration

Create index.html file

0958cdd

Create styles.css file

0b56e8e

update index.html

fbdaf18

1 "CONTAINER" DIV WAS CREATED 3 DIVs WERE CREATED INSIDE THE CONTAINER 5 CLASSES WERE CREATED "CONTAINER" , "ICON" , "NAME" , "PROFILE" , "LEFTMARGIN"

Update styles.css

d30357e

"container" , "icon" , "name" , "profile" , "leftmargin" CLASSES WERE CREATED

Update style.css

7121e68

Changed the indentation

Update style.css

de25cf8

Expected indentation of 2 spaces

Update styles.css

00623c8

Unexpected extra semicolon

Update styles.css

6d5ba68

Added semicolon 8:2

Update styles.css

86e61c5

Changed the "leftmargin" & "icon" classes indentation let them in 1 line not in 3

Update styles.css

847fb6f

No space between classes

Update styles.css

e5064c8

Missed semicolon 11:21

Update styles.css

5b5f46d

11:21 Missed semicolon

Update styles.css

8975300

7:15 Expected a trailing semicolon declaration-block-trailing-semicolon 10:1 Expected empty line before rule rule-empty-line-before 16:1 Expected empty line before rule rule-empty-line-before

Update styles.css

afdd059

16:2 Unexpected whitespace at end of line no-eol-whitespace 17:1 Unexpected empty line before closing brace block-closing-brace-empty-line-before 18:1 Expected empty line before rule rule-empty-line-before

Update style.css

c967103

17:1 Expected empty line before rule rule-empty-line-before 18:2 Unexpected whitespace at end of line no-eol-whitespace 19:3 Unexpected empty line before declaration declaration-empty-line-before

Update README.md

2528eff

Update README.md

29eda64

Update License Link [MIT license](https://github.com/gealsanchez/portfolio/blob/htmlCSS-Session-Day-3/LICENSE)

mgmediaweb suggested changes Sep 22, 2022

View reviewed changes

gealsanchez added 7 commits September 21, 2022 22:41

Update index.html

1f4c6e7

Update the document title Professional Portfolio GERSON SANCHEZ

Update styles.css

c1f6254

Changed the width from px to % Font families was setup

Add files via upload

ab5b185

geometry.png added

Update index.html

73d5222

"navigation" , "menu" CLASSES WERE ADDED hamburguer.png ICON line WAS ADDED

Add files via upload

1158dcb

hamburguer.png WAS UPLOADED

Update styles.css

89b3cf9

"navigation" , "menu" CLASSES WERE DECLARED

Update styles.css

8c3059e

13:11 ✖ Expected single space before "{" block-opening-brace-space-before 22:12 ✖ Expected a leading zero number-leading-zero

MaganaAsiati suggested changes Sep 22, 2022

View reviewed changes

gealsanchez added 2 commits September 22, 2022 18:48

Update styles.css

d52dd88

Kindly make sure you chose one temple to the Figma and your design must stick to the template design you have chosen as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma.

Update index.html

bd8f675

Kindly make sure you chose one temple to the Figma and your design must stick to the template design you have chosen as much as possible (e.g. font, colors, images, text, margins) using the templates in Figma.

Update styles.css

a64334b

23:12 ✖ Expected a leading zero number-leading-zero 46:3 ✖ Unexpected empty line before declaration declaration-empty-line-before

gealsanchez requested a review from mgmediaweb September 22, 2022 23:58

gealsanchez added 5 commits September 22, 2022 19:45

Update styles.css

2f89029

width: 50%

Update styles.css

eb0bc6a

Placed the right image in the right bottom side

Update index.html

39d2d84

Added a div to align the social media links and the image of the left side

Update style.css

21fdff3

Duplicated lines deleted

Update styles.css

f10b725

54:8 ✖ Expected single space before "{" block-opening-brace-space-before

mgmediaweb suggested changes Sep 23, 2022

View reviewed changes

gealsanchez added 2 commits September 22, 2022 22:57

Add files via upload

3e3facb

Social media and images were uploaded

Update styles.css

194c29f

body margin 0%

gealsanchez requested a review from mgmediaweb September 23, 2022 04:08

Delete geometry.png

fdd7b64

No more needed

gealsanchez requested review from MaganaAsiati and removed request for mgmediaweb September 23, 2022 13:00

Nyame-Wolf approved these changes Sep 23, 2022

View reviewed changes

gealsanchez merged commit 0ebc29a into main Sep 24, 2022

gealsanchez deleted the htmlCSS-Session-Day-3 branch September 24, 2022 21:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Html css session day 3 #1

Html css session day 3 #1

gealsanchez commented Sep 22, 2022 •

edited

Loading

mgmediaweb left a comment

mgmediaweb Sep 22, 2022

mgmediaweb Sep 23, 2022

mgmediaweb Sep 22, 2022

mgmediaweb Sep 23, 2022

mgmediaweb Sep 22, 2022

mgmediaweb Sep 23, 2022

mgmediaweb Sep 22, 2022

mgmediaweb Sep 22, 2022

mgmediaweb Sep 22, 2022

mgmediaweb Sep 23, 2022

MaganaAsiati left a comment •

edited

Loading

MaganaAsiati Sep 22, 2022

mgmediaweb left a comment

gealsanchez commented Sep 23, 2022

Nyame-Wolf left a comment

Nyame-Wolf Sep 23, 2022 •

edited

Loading

gealsanchez Sep 23, 2022

Nyame-Wolf Sep 23, 2022

Nyame-Wolf Sep 23, 2022

		<div class="container">
		<div><img class="icon" src="geometry.png" alt=""></div>

Html css session day 3 #1

Html css session day 3 #1

Conversation

gealsanchez commented Sep 22, 2022 • edited Loading

mgmediaweb left a comment

Choose a reason for hiding this comment

Highlights 💯

Required Changes ♻️

Optional suggestions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MaganaAsiati left a comment • edited Loading

Choose a reason for hiding this comment

STATUS: Required Changes ♻️♻️♻️

Highlights

Required Changes ♻️

For example if you chose a template one your design will look at the picture below

the toolbar (or header):

the headline section (right after the header):

Optional suggestions

Choose a reason for hiding this comment

mgmediaweb left a comment

Choose a reason for hiding this comment

Highlights 💯

Required Changes ♻️

Optional suggestions

gealsanchez commented Sep 23, 2022

Nyame-Wolf left a comment

Choose a reason for hiding this comment

STATUS: APPROVED ✔️ 🟢

Highlights ✨

Optional suggestions ☑️

Nyame-Wolf Sep 23, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gealsanchez commented Sep 22, 2022 •

edited

Loading

MaganaAsiati left a comment •

edited

Loading

Nyame-Wolf Sep 23, 2022 •

edited

Loading