Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
20
P

webdevbynight

@webdevbynight530 points

Someone who dreams to be a front-end developer.

I’m currently learning...

HTML, CSS, JavaScript, TypeScript, Node.js

Latest solutions

  • Loopstudios landing page - HTML, SCSS, TypeScript, RWD

    #sass/scss#typescript

    P
    webdevbynight•530
    Submitted 3 months ago

    Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view.


    1 comment
  • News homepage - HTML, SCSS, TypeScript, RWD

    #sass/scss#typescript

    P
    webdevbynight•530
    Submitted 5 months ago

    Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view. I am wondering if there is a way to do that without JavaScript and in an accessible way.


    1 comment
  • Contact form - HTML, SCSS, TypeScript, RWD

    #sass/scss#typescript

    P
    webdevbynight•530
    Submitted 5 months ago

    Do not hesitate over giving feedback about accessibility if there are improvements in the way I implemented the validation errors and the toasted message.


    1 comment
  • NFT preview card component - HTML, SCSS, RWD

    #sass/scss

    P
    webdevbynight•530
    Submitted 6 months ago

    No particular help requested.


    1 comment
  • FAQ accordion - HTML, SCSS, RWD

    #sass/scss

    P
    webdevbynight•530
    Submitted 6 months ago

    No particular help requested.


    1 comment
  • In-browser markdown editor - HTML, SCSS, TypeScript, localStorage, RWD

    #sass/scss#typescript

    P
    webdevbynight•530
    Submitted 7 months ago

    Feel free to give me feedback about the class I coded to manage the Markdown-to-HTML conversion and about the tests I implemented.


    1 comment
View more solutions

Latest comments

  • CasperTheChild•420
    @CasperTheChild
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    :D

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

    No challenges

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

    he text in the photos also changes its opacity. I don't know how to stop it from changing.

    LoopStudio

    #accessibility#bootstrap#sass/scss
    1
    P
    webdevbynight•530
    @webdevbynight
    Posted 3 months ago

    Some feedback:

    • your HTML code is invalid according to the markup validator;
    • you should better organise your projects, grouping your stylesheets into a folder;
    • when translating a design into code, the result should be as close to the original design as possible and your solution is not close to the design in some aspects:
      • the “See all” button does not match the button in the design (all sides should have a border),
      • each card does not have a transparency gradient when hovered,
      • the colour of the copyright text in the footer does not match the colour used by the design;
    • some classes should be refactored: for example, to declare that the whole menu uses the Alata font, you should just select the selector .nav__links (this would help you maintain your stylesheets in an easier way, avoiding useless repetitions);
    • you should learn more about semantics in HTML:
      • you put the header in a nav element, while such a header should be within a header element, the purpose of the nav element being to structure a navigation menu (and only a navigation menu, even if such a menu is within a header);
      • the logo should be within a h1 element, while the “Immersive experiences that deliver” text should be treated like a paragraph;
      • the “See all” button is, in fact, a link, and should be marked up as an a element instead of the button one;
      • each card should be treated like a link and, therefore, the p element could be replaced by an a element;
    • the image of each card should be inserted as an img element, not as a background image in CSS: even if these images are decorative, they can often be changed and using img in such a context should make maintenance easier (in other words, think of the people who will manage the contents of the website and will want to add, update or delete some creations and their images: they should be able to do that without having to know how to deal with your stylesheets);
    • concerning the problem you are facing and for which you ask for help, the problem is the use of opacity, which applies not only to the background, but also to the contents and the children of the element concerned (see MDN): therefore, a better way is to use a background colour with an alpha channel or a background with a gradient if there is a gradient (you can have a look at my solution to have an idea of that);
    • if you want to challenge yourself, try to use CSS without using a framework such as Bootstrap.

    I hope this feedback helps you.

  • Stanley Nadar•370
    @istealersn-dev
    Submitted almost 2 years ago

    News Homepage using Grid, Typescript & Vitejs

    #sass/scss#typescript#vite
    1
    P
    webdevbynight•530
    @webdevbynight
    Posted 5 months ago

    Some feedback:

    • the ranking number on the three last articles are designed in light vermillion, not in silver;
    • concerning the use of interfaces in TypeScript, you should only use them when you want to extend another interface (check this section from Matt Pocock’s e-book);
    • on mobile view, I do not manage to reach the links and the burger menu using the keyboard: you should check that your app or your web pages are accessible using the keyboard only.

    I hope this feedback helps you.

    Marked as helpful
  • Ilya Andreev•880
    @NeoScripter
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    It was my first Laravel project. I drastically modified the initial project, using the design and colors for the entire app. I'm very proud that I manage to host this app and make it work properly. It dinamically displays the shares and time of submission, it allows the users to edit their shares and profile pictures, sets permissions correctly, validates the webform input and displays errors. This app is connected to a real hosting, but it doesn't have an SSL certificate, which makes it show as unsafe. The link to the actual Laravel app: http://shares.ru.swtest.ru/

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

    A lot. I had to figure out how to use Laravel migrations, how to set up database on a hosting. I couldn't connect to my hosting by SSH despite entering the password correctly. After many hours of struggling, I came up with a solution to create an SSH key file and upload it directly to the hosting, which made it unneccessary to enter the password. After that, I coundn't install Composer on the server as PHP version was too old and I couldn't use the new one for some reason. After that, the migrations didn't work properly. I could go on and on, but after all, I overcame all these hardships and now my website works!

    Laravel sharing app that uses webform for login and signup

    #laravel#sass/scss#vite#typescript
    1
    P
    webdevbynight•530
    @webdevbynight
    Posted 5 months ago

    The solution does not seem to match the challenge or is concerning another challenge.

  • Austin White•20
    @austinwhite
    Submitted almost 2 years ago

    Responsive, SASS, Node, Flexbox

    #node#sass/scss
    1
    P
    webdevbynight•530
    @webdevbynight
    Posted 6 months ago

    I cannot access both the repo and the preview site: I have a 404 status code.

  • Mohamed Ragheb•560
    @mohamed-fm
    Submitted 6 months ago

    faq-accordion-with-scss

    #sass/scss#accessibility
    1
    P
    webdevbynight•530
    @webdevbynight
    Posted 6 months ago

    Some feedback:

    • when clicking on the “minus” button, the expanded section does not close (is it intentional?);
    • when clicking on any “plus” button, the section previously opened gets closed, which may not be a best practice in terms of UX;
    • an user using the keyboard exclusively (such as a screen reader user) cannot access the answers at all, which means your solution has accessibility issues;
    • such an accordion can be done without JavaScript: check the details and summary elements on MDN.

    I hope this feedback helps you.

    Marked as helpful
  • Tonyac-create•220
    @Tonyac-create
    Submitted 7 months ago

    Responsive with Grid elements

    2
    P
    webdevbynight•530
    @webdevbynight
    Posted 7 months ago

    Some feedback:

    • beware of relative paths starting with /: they start from the website root and, as you host your challenge on GitHub Pages, where it is hosted in a directory, the images do not appear (start the relative paths with ./ to resolve the problem);
    • some elements from the design are missing: the “ in the purple card background and the box shadows for some cards;
    • the grid container should have a maximum width for it does not stretch too much on very wide screens like a 27-inch one;
    • you should avoid using the height property to set the height of blocks containing and instead use min-height: if the contents are long enough, they can overflow when a fixed height is used for their container;
    • when using grid-template-areas, try to give the areas more semantic names (imagine testimonials change with different names);
    • when naming a class, for the same reason as above, use class with semantics in mind (I am talking about the classes named following the names of the people leaving a testimonial).

    I hope this feedback helps you.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub