Edit the front end page with contributions from reviewers.

[MichaelKentBurns]

I got good comments from all 3 reviewers (A,P,E) on front end. I would like to create an Upwork job for Philemon to edit that page with input from Ash and Efatha.

[MichaelKentBurns]

Use your discretion in updating our pages. Remember that we are not trying to teach all this material, just providing perspective and links where important things can be learned.

Efatha's comments via an email April 2:

The very first paragraph is more significant and well-explained. Seeing that it has some lack of information for the better understanding of beginners. I would suggest to add more detail for the beginners.

The front end development refers to the part of web development that deals with the user interface(UI) and user experience (UX) of a website.It involves designing and developing the visible parts of website that users interact with. As a beginner in front end web development it is important to learn all of that and follow some best practices to create efficient , user friendly. Here is some tips for a good starting point.

1. Use Semantic Html They refer to the use of HTML Markup to convey the meaning and structure of the content on a web page, rather than just the appearance . Look at these closing tags. for instance:
   ,
   ,
   ,
   ,
   ,
   ,... these semantic elements should be in your the body element . using these descriptive HTML tags helps the developers to easily understand the purpose and function of different sections of the website. 2.Use a Responsive Design When people use different screen-sized devices to access websites .This is why web developers should make a website that adapts and responds to different screen sizes and devices, to optimize an affordable view experience for all users. to achieve the responsive design you can find out the use of some CSS properties such as Media queries, flex layout, grid layout. The media queries allow developers to specify different styles for various screen sizes, while the flex layout helps to ensure that the layout of the website adjusts fluidly to fit the available screen space .
2. Use CSS tools and frameworks Tailwind, CSS is a Cascading style sheets framework that comes with a set of predesigned CSS classes that can be used to style HTML elements without having to write custom CSS which helps developers in a lot of different ways. moreover there are other different CSS tools and framework like Bootstrap, materialize, and styled-components you can use to boost your productivity
3. Comment your code It's reasonable to comment your code for some reasons: behold,it can help you remind about your previous code, and not only do these comments help future readers understand the code in its new state, they help determine whether the code is still needed in the future and how to test it. They will make the next developer who touches this part of the code aware of pitfalls that have resulted in bugs in the past.
4. use javascript Libraries and frameworks javascript libraries and frameworks such as React, angular, vue.js, etc are highly in demand as they allow developers to build complex and responsive web applications quickly and efficiently. These Javascript libraries and frameworks are designed to be scalable, meaning you can use them to build larger and more complex applications like Facebook, instagram, etc
5. Don't jump to the frameworks/libraries As a beginner, it's recommended to take a javascript course and strengthen your foundational knowledge before moving on to libraries and frameworks.without a strong understanding of the fundamentals, learning these tools can become challenging and confusing.

A web developer should be aware of every single detail HTM or HTML Extension? When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser . HTML files have an .html or .htm file extension. A file extension is an abbreviation that associates the file with the appropriate program or tool needed to access it. In most cases, this abbreviation follows a period and is three or four letters long. basic tags on HTML.

- Surround entire document - Surround header material (titles, css info, etc) - Contains the main content of the page

- Hold a single paragraph that the browser will typeset.

,

...,- Hold a heading line that is used to mark sections of a document for the read JavaScript allows you to add additional features that a static page of HTML can’t provide without some sort of scripting or programming help. So ,it аllоws dеvеlореrѕ аn improved way tо implement uѕеr intеrfасе аnd dynamic fеаturеѕ in wеb раgе.

[MichaelKentBurns]

An email from Ash on March 21st:

Hello Michael, My feedback after reading the Frontend page is subdivided into the following points:

1) Clarity and Structure: The content is well-structured and easy to follow. Each technology is explained clearly, making it accessible for beginners.

2) Engagement: To enhance engagement, it would be important to consider adding interactive elements or examples. For instance, integrate live code snippets that users can edit and run directly on the page to see how HTML, CSS, and JavaScript interact.

3) Visual Enhancements: Incorporating visual aids such as diagrams or infographics could help reinforce concepts, especially for visual learners. For example, illustrate the relationship between HTML, CSS, and the final web page layout.

4) Depth of Information: While the content provides a good introduction, it could benefit from expanding on certain topics. For instance, briefly mention HTML5 but could elaborate on its key features and improvements over previous versions. Similarly, it would be important to delve deeper into advanced CSS techniques and JavaScript frameworks/libraries.

5) Interactive Learning Opportunities: Encourage hands-on learning by suggesting resources or exercises where readers can practice their skills. You already mention Frontend Mentor, which is great, but I would also suggest other platforms, coding challenges, or projects to undertake.

6) Future Directions: Consider adding sections on responsive design, accessibility best practices, and modern web development tools and workflows (e.g., version control, package managers, build tools). These topics are essential for aspiring web developers and would complement the existing content well.

7) Links and Resources: Provide links to additional learning materials, documentation, and relevant websites for readers to explore further. This could include official documentation for HTML, CSS, and JavaScript, as well as tutorials, articles, and community forums.

8) Community Engagement: Encourage readers to join online communities or forums where they can ask questions, share their work, and collaborate with other learners. This fosters a sense of community and provides valuable support for those embarking on their web development journey.

[MichaelKentBurns]

Upwork job posted and accepted by Philemon

[bahati7]

Use your discretion in updating our pages. Remember that we are not trying to teach all this material, just providing perspective and links where important things can be learned.

Efatha's comments via an email April 2:

The very first paragraph is more significant and well-explained. Seeing that it has some lack of information for the better understanding of beginners. I would suggest to add more detail for the beginners.

The front end development refers to the part of web development that deals with the user interface(UI) and user experience (UX) of a website.It involves designing and developing the visible parts of website that users interact with. As a beginner in front end web development it is important to learn all of that and follow some best practices to create efficient , user friendly. Here is some tips for a good starting point.

1. Use Semantic Html They refer to the use of HTML Markup to convey the meaning and structure of the content on a web page, rather than just the appearance . Look at these closing tags. for instance: , ,,,,,... these semantic elements should be in your the body element . using these descriptive HTML tags helps the developers to easily understand the purpose and function of different sections of the website. 2.Use a Responsive Design When people use different screen-sized devices to access websites .This is why web developers should make a website that adapts and responds to different screen sizes and devices, to optimize an affordable view experience for all users. to achieve the responsive design you can find out the use of some CSS properties such as Media queries, flex layout, grid layout. The media queries allow developers to specify different styles for various screen sizes, while the flex layout helps to ensure that the layout of the website adjusts fluidly to fit the available screen space .
2. Use CSS tools and frameworks Tailwind, CSS is a Cascading style sheets framework that comes with a set of predesigned CSS classes that can be used to style HTML elements without having to write custom CSS which helps developers in a lot of different ways. moreover there are other different CSS tools and framework like Bootstrap, materialize, and styled-components you can use to boost your productivity
3. Comment your code It's reasonable to comment your code for some reasons: behold,it can help you remind about your previous code, and not only do these comments help future readers understand the code in its new state, they help determine whether the code is still needed in the future and how to test it. They will make the next developer who touches this part of the code aware of pitfalls that have resulted in bugs in the past.
4. use javascript Libraries and frameworks javascript libraries and frameworks such as React, angular, vue.js, etc are highly in demand as they allow developers to build complex and responsive web applications quickly and efficiently. These Javascript libraries and frameworks are designed to be scalable, meaning you can use them to build larger and more complex applications like Facebook, instagram, etc
5. Don't jump to the frameworks/libraries As a beginner, it's recommended to take a javascript course and strengthen your foundational knowledge before moving on to libraries and frameworks.without a strong understanding of the fundamentals, learning these tools can become challenging and confusing.

A web developer should be aware of every single detail HTM or HTML Extension? When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes from the past when some of the commonly used software only allowed three letter extensions. It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as different files by the browser . HTML files have an .html or .htm file extension. A file extension is an abbreviation that associates the file with the appropriate program or tool needed to access it. In most cases, this abbreviation follows a period and is three or four letters long. basic tags on HTML.

• Surround entire document - Surround header material (titles, css info, etc) - Contains the main content of the page
• Hold a single paragraph that the browser will typeset. , ...,- Hold a heading line that is used to mark sections of a document for the read JavaScript allows you to add additional features that a static page of HTML can’t provide without some sort of scripting or programming help. So ,it аllоws dеvеlореrѕ аn improved way tо implement uѕеr intеrfасе аnd dynamic fеаturеѕ in wеb раgе.

I've updated the introduction with more information on front-end web development based on Efata's suggestion, but I can't go any further as the aim isn't to teach all this material and there are already some good links on the page where the learner can find resources.

[bahati7]

An email from Ash on March 21st:

Hello Michael, My feedback after reading the Frontend page is subdivided into the following points:

1. Clarity and Structure: The content is well-structured and easy to follow. Each technology is explained clearly, making it accessible for beginners.

2. Engagement: To enhance engagement, it would be important to consider adding interactive elements or examples. For instance, integrate live code snippets that users can edit and run directly on the page to see how HTML, CSS, and JavaScript interact.

3. Visual Enhancements: Incorporating visual aids such as diagrams or infographics could help reinforce concepts, especially for visual learners. For example, illustrate the relationship between HTML, CSS, and the final web page layout.

4. Depth of Information: While the content provides a good introduction, it could benefit from expanding on certain topics. For instance, briefly mention HTML5 but could elaborate on its key features and improvements over previous versions. Similarly, it would be important to delve deeper into advanced CSS techniques and JavaScript frameworks/libraries.

5. Interactive Learning Opportunities: Encourage hands-on learning by suggesting resources or exercises where readers can practice their skills. You already mention Frontend Mentor, which is great, but I would also suggest other platforms, coding challenges, or projects to undertake.

6. Future Directions: Consider adding sections on responsive design, accessibility best practices, and modern web development tools and workflows (e.g., version control, package managers, build tools). These topics are essential for aspiring web developers and would complement the existing content well.

7. Links and Resources: Provide links to additional learning materials, documentation, and relevant websites for readers to explore further. This could include official documentation for HTML, CSS, and JavaScript, as well as tutorials, articles, and community forums.

8. Community Engagement: Encourage readers to join online communities or forums where they can ask questions, share their work, and collaborate with other learners. This fosters a sense of community and provides valuable support for those embarking on their web development journey.

I've been working on Ash's second suggestion. Since it's difficult to add live coding snipet, I've added a paragraph that leads to https://www.w3schools.com/ a live coding site where learners can practice HTML, CSS and js.

[MichaelKentBurns]

Philemon said on Upwork:

Hello Michael, Can you check the frontend page? I've updated it based on Ash and Efatha's suggestions and I think I'm done as the main aim is not to teach all this material. Please let me know if you have any suggestion

[MichaelKentBurns]

Michael's response: Glad to. So far it looks good.
In the CSS section you added an example CSS file, and I'm a newbie to CSS, but your example looks like simple HTML. The example CSS files I'm finding don't have any of the HTML markup.

body { align-items: center; background-color: #000; display: flex; justify-content: center; height: 100vh; }

.form { background-color: #15172b; border-radius: 20px; box-sizing: border-box; height: 500px; padding: 20px; width: 320px; }

.title { color: #eee; font-family: sans-serif; font-size: 36px; font-weight: 600; margin-top: 30px; }

.subtitle { color: #eee; font-family: sans-serif; font-size: 16px; font-weight: 600; margin-top: 10px; } ...

I'll keep reading...

[MichaelKentBurns]

Regarding the previous comment, I have come to the conclusion that you somehow grabbed the wrong image file.

Anyway, the rest of your changes look good. They are an important contribution.

BTW: Are you aware of the ability to view revisions of a page? When editing a page, the right sidebar shows something like "17 revisions" which is a link to this: https://michaelkentburns.com/wp-admin/revision.php?revision=349

You can step forward and backward through the history. I just used that to view each of your revisions.

Are you planning on making more changes to this page? (you are welcome to).

Finally: Feel free to edit your 'contributor' page and include a picture of yourself and links to your profile or portfolio. I plan on incorporating the photos you already sent me, but just have not figured out how I will do that. I should do that soon.

[MichaelKentBurns]

[bahati7]

Ah ok, thanks for showing me how to view revision of the page, I wasn't aware of that, I'll give it a try.

[MichaelKentBurns]

I just committed your update to the GitHub repository. Normally Git would not see your edits because the pages are stored in the SQL database. But, I have a way of extracting the source of pages from the code editor into a file with the extension .wpmu (word press mark up). This way our GitHub project shows the precise changes you made. See my latest commit.

[bahati7]

I just committed your update to the GitHub repository. Normally Git would not see your edits because the pages are stored in the SQL database. But, I have a way of extracting the source of pages from the code editor into a file with the extension .wpmu (word press mark up). This way our GitHub project shows the precise changes you made. See my latest commit.

It's amazing, I'm just curious how you can push an entire wordpress site onto github.

[MichaelKentBurns]

You can make a Git repository from any directory. You just cd into your project directory, which for a WP site is the public_html directory. Then use 'git init' to create the .git subdirectory. https://git-scm.com/docs/git-init

See: https://michaelkentburns.com/index.php/how-to/how-to-administer-a-wordpress-site/how-to-use-github-to-source-control-a-wordpress-site/

[efatha]

These changes are good so far. We are happy that, these lines were considered. It's a great thing to work on this page.

[AshDest]

@bahati7 while browsing the page, I see that the content is really interesting, especially in relation to my comments. thx!

[bahati7]

@bahati7 while browsing the page, I see that the content is really interesting, especially in relation to my comments. thx!

Thank you so much

[MichaelKentBurns]

I see that you corrected the graphic for a sample CSS document.
In reviewing the document again, I just noticed that the paragraphs starting 'As discussed above' through 'Then using your file browser... document.' seem out of place in the middle of the JavaScript section.

I think these should be moved up between the HTML headed section and the HTML5 section. That gives the reader a very simple example that they can try themselves to make their own web page. You might clarify that into a mini challenge that they can try right after reading it.

Then with that in their mind, you can then move onto CSS and JS as more advanced front end concepts.

[MichaelKentBurns]

Now that you have had E and A reviews, and you have addressed my most recent comment, we should consider whether this issue is complete. When you feel it is, you may add a final comment and use the 'Close with comment' button to mark it closed. If I agree, then I'll go ahead and close out the Upwork contract.

[bahati7]

Hi Michael, I've just implemented your recent suggestions and even updated the challenge slightly. What do you think?

[MichaelKentBurns]

It looks good. Thanks for fixing that. Well done.

[bahati7]

great! thank you. But I don't see the 'close issue button' from my side. I don't know if I have the right to do so.

[MichaelKentBurns]

Maybe I have to close it since I started it. I'll close it, but this is what it looks like from my end:
![Uploading Screenshot 2024-05-01 at 11.28.36 AM.png…]()