Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Greta Vasiulyte• 20

    @great1greta

    Submitted

    👋😊 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• 220

    @engelbrechtz

    Posted

    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• 220

    @engelbrechtz

    Posted

    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

    @dianacruzpro

    Submitted

    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• 220

    @engelbrechtz

    Posted

    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

    @sjoseph91

    Submitted

    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• 220

    @engelbrechtz

    Posted

    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• 220

    @engelbrechtz

    Posted

    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

    @CodeLamp168

    Submitted

    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• 220

    @engelbrechtz

    Posted

    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
  • Paul Janne• 80

    @arudu

    Submitted

    I found changing picture size to match up with card difficult Looking for any type of feedback and to get better

    Responsive qr code card

    2

    Declan• 220

    @engelbrechtz

    Posted

    Well Done!!!

    Looking, Good Man.

    Changes to consider. Prior to reading, you're CSS code. I came across that you copy and paste colour codes throughout the script. Try using this instead :)

    • Apply the text-align: center; property to class card which acts as you're container.
    • Apply width: 90%; to you're img element.
    :root{
     --color-for-box: white;
     --color-for-box2: red;
     --color-for-box3: yellow;
     --color-for-box4: green;
}

    this creates a variable for you to call upon more than once without needing to copy the givin hex colour code twice.

    Overall, everything is looking awesome.

    Regards, Declan.

    0
  • Declan• 220

    @engelbrechtz

    Posted

    Hey, hows it going.

    Looks really good!

    Changes to consider

    • Apply the background colour which was provided to you in you're style-guide.md file. use this colour for the background hsl(30, 38%, 92%)
    • Remove margin-bottom: 2rem from rate div and add margin-top: 50px; to the rate div.

    Apply these changes to the #para

    font-size: 1.2rem; color: lightgrey; line-height: 25px; font-family: sans-serif; } Make sure short classes like #para also known as paragraph are meaningful and readable class names.

    Apply these changes to right-up-content h1 margin: 0; width: 90%; font-size: 40px;

    Make sure to add these font familes to you're css and apply to replicated design. Montserrat Fraunces

    Everything else seems to be good.

    Keep coding, Regards.

    0
  • stiratto• 160

    @Stiratto

    Submitted

    I made this project, I added some animations to it for PC, I don't know, I feel that it looks more beautiful, is it? correct me if I did something wrong, although I don't know if in such a case the code can be scanned

    QR Code component

    2

    Declan• 220

    @engelbrechtz

    Posted

    Well Done!!!

    I see that you're using the root element selector in your CSS file for declaring colour variables. I like the keyframes. The animation is neat and minimalist.

    One small change that I would recommend would be to use max-width and max-height for the container element, as this requires you to use fewer media queries as you write out the CSS.

    Overall, Keep coding!!!

    You can review my GitHub projects to gather inspiration if needed. DevDeclann

    Marked as helpful

    1
  • Declan• 220

    @engelbrechtz

    Posted

    "Can someone explain what they are to me"

    These are frontend website challenges, designed for you to challenge your frontend coding skills. You learn, upscale and create small projects to advanced-level projects to learn the skills that are required to become a web developer.

    Skills such as, Html, Css, Javascript, etc.

    0
  • Declan• 220

    @engelbrechtz

    Posted

    Hey, how's it going?

    This is really well done. Good job!

    A small change that you can do next time would be to, Create a separate file called style.css and link it to you're HTML using <link rel="stylesheet" href="style.css" />

    Using the style tag can make the HTML file long and difficult to read having to scroll back to review the code. It's clean to keep them separated, it makes it easier to read and write CSS.

    My second piece of advice would be to use the root element in CSS. This is how you can use variables to save CSS colours instead of copying and pasting the same hex code.

    :root{ --colour-of-box: white; }

    You can review my code on GitHub. My Code.

    Overall, everything seems to be perfect!! keep it up.

    0
  • Declan• 220

    @engelbrechtz

    Posted

    I'm open for feedback to improve.

    0