Skip to content
OverviewSolutions
22
Comments
19
Declan
@engelbrechtz

All comments

  • Declan•320
    @engelbrechtzPosted 22 days ago

    Well done on making it responsive, it is sleek on mobile, tablet, desktop.

    One suggestion, if your writing css make sure you use variables for the fonts, font sizes, font family, weight, color, etc. This will make it easy to declare when writing css code.

    Another one would be to not use

    Marked as helpful
    0
  • Declan•320
    @engelbrechtzPosted 25 days ago

    To improve your HTML code, focus on enhancing accessibility, structure, and maintainability. First, incorporate semantic elements such as <main>, <figure>, and <footer> to provide clearer meaning to your document structure.

    This helps both search engines and screen readers understand the layout better. Additionally, ensure that images have alt attributes that describe their content, and use aria-label on buttons to give users more context about their function.

    It's also a good practice to keep your styles in an external CSS file rather than using inline styles, as this helps maintain separation of concerns and improves readability.

    By implementing these changes, your HTML will be more accessible, organized, and easier to maintain.

    Marked as helpful
    0
  • Declan•320
    @engelbrechtzPosted 26 days ago

    I must say that you have done an awesome job!

    I admire the effort you put into this, I admire the thin text as it gives a professional look to the design.

    Your recipe page is well-structured but could benefit from a few improvements.

    Enhance accessibility by adding descriptive alt text for images and using semantic HTML elements. Consider moving internal styles to an external stylesheet for cleaner code, and ensure the layout is responsive.

    Improving table structure with <thead> tags and including additional content like preparation tips can also enhance user engagement.

    Finally, consider adding meta tags for SEO and Open Graph tags for better social sharing.

    Cheers! 👋

    Marked as helpful
    0
  • Declan•320
    @engelbrechtzPosted 27 days ago

    The layout is clean and the design is sleek. I recommend checking out the same challenge on my profile to see how I organized the components. I render the buttons individually using a for loop, which helps reduce the amount of repetitive semantic HTML I need to write.

    Heres my example code.

    const ProfileContainer = document.querySelector('.profile_links_container');

const buttonAttributes = [
    {text: 'Github'},
    {text: 'Frontend Mentor'},
    {text: 'Linkedin'},
    {text: 'Twitter'},
    {text: 'Instagram'}
]

// For loop to display buttons

function displayButton(){
   for (let i = 0; i < buttonAttributes.length; i++){
    // console.log(buttonAttributes[i]);
    const button = document.createElement('button');
    button.textContent = buttonAttributes[i].text;
    ProfileContainer.appendChild(button);
   }
}
    0
  • Declan•320
    @engelbrechtzPosted 27 days ago

    I really appreciate how concise and straightforward you've made this project; it’s easy to read. One suggestion I have is to separate the files into index.html, index.css, and index.js for better organization.

    0
  • devindubin•60
    @devindubinSubmitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of getting to about 70% completion without needing to check any documentation or search for answers.

    Not sure I would change much to my approach next time, I would like to read how others have solved the same problem to compare methods.

    What challenges did you encounter, and how did you overcome them?

    Mostly centering of blocks both horizontally and vertically. I am still getting comfortable with how margin: auto effects the centering of blocks horizontally.

    For vertical centering I ended up using a fixed position and defined the box's location using calc(50% - element_height/2). I feel like there must be a better way to do so without hardcoding the element height, so I am looking forward to learning more about variables and other layouts.

    What specific areas of your project would you like help with?

    Is there a way to center objects vertically the way we can horizontally using margin: auto? What is the most similar method?

    QR Code Beginner Solution

    1
    Declan•320
    @engelbrechtzPosted 27 days ago

    I guess a minor suggestion would be to add this line of css to ensure that users don't drag the image or overlap their view, I find this helpful.

    -webkit-user-drag: none;
    1
  • Greta Vasiulyte•20
    @great1gretaSubmitted about 2 years ago

    👋😊 Hi there! This is my first project completed on my very own, so, naturally, there are some areas i am unsure about.

    1. i struggled quite a bit to centre the project. I know that developers praise
      margin: 0 auto;
      ,however i do not feel its power, it doesnt do anything for me, so i had to use different approaches:::: .container { width: 700px; margin-left: auto; margin-right: auto;
      } -------i used the same code to centre the footer (the signature), however it didint centre in the same way. i then used
      .attribution { width: 700px; margin: 0 auto; text-align: center; } ,but it still wasnt ideal as both contents werent centred equally.
      Also, what do you think about HTML element <centre> ? would it be appropriate in this or any other case?
      I would appreciate if someone would advise on the best approach when facing this task.

    2. regarding responsive design (to show it on 375px screen) i could have used the approach @media (max-width 400px) and then select element by element making the sizes smaller. However, i feel there should be a better, faster way to solve this matter. I went through numerous YouTube videos and StackOverflow articles without finding an answer. This frustrated me immensely, i just KNOW that there should be a sophisticated way for this, i just cant find it😅 i am dreading for alternative suggestions, please.

    3. CSS selectors hierarchy. I am aware that some programmers lay down their selectors alphabetically (1st the elements, 2nd ids, 3rd classes, of course). However, it is intuitive for me to lay selectors from top to bottom as they correspond with the project layout (gosh, i hope i am articulating it clearly enough?). I guess, what im asking is, do you pay attention in which line you type your selectors in. Is it a matter of preference or there are more acceptable hierarchy to write a cleaner code?

    4. Taking into consideration current job market, which approach would make the employer the happiest? Maybe to use SASS instead of CSS? some other fancy approach in comparison to HTML and CSS? Or this project is not big enough to play with anything else but HTML and CSS?

    If you could share some of your insights, i would greatly appreciate it!

    Many thanks,
    Greta

    qr-code: HTML, CSS

    2
    Declan•320
    @engelbrechtzPosted about 2 years ago

    Hey, how's it going? 🙏

    Amazing Job!!!

    You did good. Html is clean, css is clean. Here are some changes I would recommend 🧐

    Changes To Consider

    • Use the root selector in css. This will allow you to create variables to call the same name without copying the same color code again and again. It saves time :)

    style.css file

    :root{
     --variable-name-example: white;
     --background: blue;
}

body{
     background-color: var(--background);
}

    index.html file

    <body>
     <h1>I have a blue background</h1>
</body>

    My Insights HTML and CSS are formally known as markup languages that everyone should master at a begineer level before jumping on to sass. SASS however, saves time when writing styles because you use less repitation of classes which is annoying. Sass is techniqully a programming language due to the fact the it introduces programmable logic, but for web applications. Using stuff like sass variables $variable: white; functions @function(){}, conditional statements, @if (variable === "red"){} and so on. You can use sass in any project even if it's small because it's quicker in my opinion.

    You can check out my front-end challenges that are done in sass for examples :) My Github Challenges

    Overall, You did a great job! 👏

    Regards, Declan

    Marked as helpful
    1
  • Declan•320
    @engelbrechtzPosted about 2 years ago

    Hey, hows it going? 👋

    Changes To Consider

    • Use sass variables not CSS variables since you're using sass.
    • Use variables for media queries
    • Make a separate file called _variables.scss to write and use variables from that file by using @import

    scss variables

    :root {
  $primary-red: hsl(1, 90%, 64%);
  $primary-blue: hsl(219, 85%, 26%);
  $white: hsl(0, 0%, 100%);
}

    css variables

    :root {
  --primary-red: hsl(1, 90%, 64%);
  --primary-blue: hsl(219, 85%, 26%);
  --white: hsl(0, 0%, 100%);
}

    Use variables for media quries like this.

    _variables.scss file

    $phone: 760px;
$tablet: 1024px;
$desktop: 1920px;

    main.scss file

    @import '_variables.scss';

@media (max-width: $desktop) {
      margin: 3rem;
}

    Overall, the project is completed, good job!

    Regards, Declan

    1
  • Diana Cruz•200
    @dianacruzproSubmitted about 2 years ago

    The most difficult thing in this challenge was positioning the images 😅, because they were always hidden 🤨 by having them in the same container. 🤷‍♀️ But if there's a better way to do it, I'd appreciate any suggestions.😊

    faq accordion card responsive

    1
    Declan•320
    @engelbrechtzPosted about 2 years ago

    Hey, how's it going? 👋

    Everything is perfection 🤌

    Amazing Sleek Animations!

    Changes To Consider

    • One suggestion would be to use variables for media queries. When defining screen sizes It's best to call a variable instead from writing out the sizes manually.
    
$phone: 760px;
$tablet: 1024px;
$desktop: 1920px;

    The question is, where are you learning Javascript currently? You are onto it! Remember, start off with small projects then scale 😄

    Otherwise, Keep up the work!!

    0
  • Sean•150
    @sjoseph91Submitted about 2 years ago

    I think I spent too much time with the form validation in JavaScript. Does anyone recommend a specific form, or form validation library that goes well in React apps?

    Interactive Card Detail Form built with React

    2
    Declan•320
    @engelbrechtzPosted about 2 years ago

    Hey, hows it going? 👋

    Everything seems to be looking good.

    "Does anyone recommend a specific form, or form validation library that goes well in React apps?"

    Yes. But, I wouldn't recommend using any libraries yet. I've made this mistake alot. I would not understand how you would do it in vanilla for that's what they ask you in job interviews for any developer field. Is... Can you do it without external libraries and how would you do it?

    You can check out Formik for form validation when it comes to using a framework like React.js.

    A part about being a developer is to, Build strength from struggle. A qoute that I came up with, I'm not certain if anyone else has. Besides the irrelevance. Build small projects that you find interest in.

    Otherwise, Enjoy!

    Marked as helpful
    1
  • Declan•320
    @engelbrechtzPosted about 2 years ago

    Namaste 🙏

    This is well profound. It's well-developed.

    I would recommend scaling the width and height of the card to match the design solution. Otherwise, looks perfect at completion.

    I see that you're fairly new. Welcome to the community of Developers.

    Keep this quote in mind when you write code.

    "It's not how good you are, It's how good you want to be."

    Regards, Declan.

    0
  • Caleb Sim•410
    @CodeLamp168Submitted about 2 years ago

    Came back to this solution after a few months to practice some scss to make some cleaner"ish" code, also applied some useful style methods to position some details onto the page without an over-extension of the code.

    Understood the concepts of the js. Although could have been simplified, its refreshing to know some of this code that looked gibberish to me before is understandable to me now.

    Interactive Card SASS Version

    1
    Declan•320
    @engelbrechtzPosted about 2 years ago

    Hey there!👋 Here are some suggestions to help improve your code:

    Changes To Consider

    • Make the input fields a little bigger.
    • Make the cards wider and apply letter spacing.

    Find a way to change the state of the credit cards numbers when someone writes something in the card number input

    Everything else seems neat. The responsiveness is clean.

    One quote I share with others is.

    "It's not how good you are, It's how good you want to be."

    Regards, Declan

    0