NW6 | Nazanin_Saedi | Wireframe | Module-HTML-CSS | WEEK1 by nazaninsaedi · Pull Request #188 · CodeYourFuture/Module-HTML-CSS

nazaninsaedi · 2023-12-16T11:56:44Z

Wireframe

netlify · 2023-12-16T11:56:54Z

✅ Deploy Preview for cyf-module-html-css ready!

Name	Link
🔨 Latest commit	`ef70421`
🔍 Latest deploy log	https://app.netlify.com/sites/cyf-module-html-css/deploys/657d907f27d2b000087534fa
😎 Deploy Preview	https://deploy-preview-188--cyf-module-html-css.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: Accessibility: Best Practices: SEO: PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

pseudopilot

Great job, @nazaninsaedi !

I left some comments for you regarding HTML code formatting so that you could understand better why and where we need indents.
But we don't really always need to format the code ourselves (even though we try to watch proper formatting, we may miss something). For this purpose there are different plugins/extensions for your IDE (VS Code). The most popular is Prettier.
You can read here how to add and use it:
https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

My another recommendation is to make more informative descriptions of commits. For example, for the next commit where you're going to fix formatting you can write 'fix index.html code formatting'.

Good luck!

pseudopilot · 2024-04-30T18:42:25Z

Wireframe/index.html

+   <header>
+
+        <h1 class="header">Learning how to use Git</h1>
+        <p class="heading_summary">This page will help you develop some understanding of Git</p>
+   </header>


We may want to remove the extra empty line after <header> tag. We usually use empty lines do visually separate some semantic blocks. But here h1 and p are nested to the header.

pseudopilot · 2024-04-30T18:43:12Z

Wireframe/index.html

+        <p class="heading_summary">This page will help you develop some understanding of Git</p>
+   </header>
+
+      <main class="container">


You may notice that <main... tag has twice bigger indent from the left than <header> above. It shouldn't be so because these are sibling elements. We increase indents only for nested/child elements.

pseudopilot · 2024-04-30T18:44:05Z

Wireframe/index.html

+            <article class="article" id="article-1">
+
+            <h1 class="article-heading">What is Git?</h2>
+            <p class="article-summary">By far, the most widely used modern version control system in the world today is Git.


As h1 and p are child elements for article they should have bigger indent from the left.

pseudopilot · 2024-04-30T18:44:28Z

Wireframe/index.html

+
+                  Branching in Git is very lightweight and fast!</p>
+                <a href="https://www.w3schools.com/git/git_branch.asp?remote=github"><button class="article_button">Read more</button></a>
+                         </article>


</article> is a closing tag of the parent element. So, it should have smaller indent (same as opening tag <article>).

pseudopilot · 2024-04-30T18:45:00Z

Wireframe/index.html

+    </main>
+    <footer>
+      <div class="footer-content">
+      <p>Contact Us: <a href="[email protected]">[email protected]</a></p>


If you want this link to open user's email box and create a new letter you may want to modify this link the following way:

<a href="mailto:[email protected]">[email protected]</a>

You can read more about different link types here if you like:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

ziggyrafiq

Please consider renaming the images (1).jpeg, images (2).jpeg and images (3).jpeg to a meaningful name such as cake-01.jpeg

ziggyrafiq

please consider the recommendations and also look at the code I am using on my site https://ziggyrafiq.com/Styles/CSS/styles.css and understand how I have used CSS3 also you can look at my github repo https://github.com/ziggyrafiq to gain further understanding

ziggyrafiq · 2024-05-23T13:27:01Z

Wireframe/css/style.css

+    text-align: center;   
+}
+
+.footer-content {


please look at naming this as html5 semantic element footer tag ie footer

ziggyrafiq · 2024-05-23T13:28:37Z

Cakes-Co/style.css

+    border-radius: 10%;
+  }
+
+  :root {


please move this to the root/top of the CSS file

ziggyrafiq · 2024-05-23T13:29:23Z

Cakes-Co/style.css

+    border-radius: 50%;
+
+  }
+  .header-area {


please consider using html5 semantic element header then css3 class name here

ziggyrafiq · 2024-05-23T13:30:51Z

Cakes-Co/style.css

+    align-items: flex-end;
+    text-align: end;
+  }
+  #menu-inpt {


please consider using a name which everyone can understand such as #menu-input then the one you are using also if this is to hide a hamburger menu icon on desktop devices then please consider using more meaningful name

ziggyrafiq · 2024-05-23T13:31:36Z

Cakes-Co/style.css

+    height: 100%;
+  }
+
+  .header-area p {


please consider using html5 semantic element header then using CSS3 class name here such as header p to target the element

ziggyrafiq · 2024-05-23T13:33:08Z

Cakes-Co/style.css

+    align-items: flex-start;
+    gap: 1em;
+  }
+  .nav-a {


same as above

Suggested change

.nav-a {

nav a {

ziggyrafiq · 2024-05-23T13:34:04Z

Cakes-Co/style.css

+    justify-content: space-between;
+  }
+
+  #nav-footer {


consider using html5 semantic element footer to target then IDs or css3 class

ziggyrafiq · 2024-05-23T13:34:33Z

Cakes-Co/style.css

+      position: static;
+      justify-content: flex-end;
+    }
+


consider using something like this

Suggested change

nav ul

ziggyrafiq · 2024-05-23T13:36:02Z

Wireframe/css/style.css

+.article {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgb(58, 3, 44);
+    padding: 43px;
+    margin: 43px;
+}
+
+article:first-child {
+    background-color: rgba(89, 10, 65, 0.11);
+
+}
+
+.article-wrap {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    gap: 20px;
+    width: 100%;
+}
+.article_button {
+    border: rgb(235, 121, 227);
+    background-color: rgb(246, 185, 237);
+    color:rgb(126, 4, 101)
+    padding: .75rem;
+    border-radius: 8px;
+    text-align: center;
+
+
+}
+
+.read-more {
+    margin: 10px;
+    padding: 5px;
+    background-color: rgba(153, 8, 158, 0.63);
+    border: 0.1px solid rgba(148, 10, 125, 0.63);
+    border-radius: 6px;
+    color: rgb(208, 156, 194);
+}


please consider using html5 semantic element article for this and then target it take a look at this style sheet https://ziggyrafiq.com/Styles/CSS/styles.css

ziggyrafiq · 2024-05-23T13:37:02Z

Wireframe/index.html

+
+            <article class="article" id="article-1">
+
+            <h1 class="article-heading">What is Git?</h2>


consider using article h1 in css and then remove the class article-heading as not required

Nazanin Saedi added 8 commits October 18, 2023 23:14

final

0ba28fd

update

6cb019b

CakeProject update

c83321e

update

4b0d01b

NSwireframe update

5dae8fd

update

bafadfe

update wire

95387f7

NSwireframe update

ef70421

SpectacularLandscape mentioned this pull request Apr 22, 2024

[TECH ED] Wireframe to Web Code nazaninsaedi/Coursework-Planner#76

Open

pseudopilot suggested changes Apr 30, 2024

View reviewed changes

ziggyrafiq suggested changes May 23, 2024

View reviewed changes


		<article class="article" id="article-1">

		<h1 class="article-heading">What is Git?</h2>

Uh oh!

Conversation

nazaninsaedi commented Dec 16, 2023

Uh oh!

netlify bot commented Dec 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cyf-module-html-css ready!

Uh oh!

pseudopilot left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ziggyrafiq left a comment

Choose a reason for hiding this comment

Uh oh!

ziggyrafiq left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify bot commented Dec 16, 2023 •

edited

Loading