Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
17
Comments
6

anas ali

@anas-cd415 points

Junior Front-end developer excited to learn new skills and pressing forward for full-stack development path.

Latest solutions

  • Responsive Calculator with Keyboard support and Dynamic screen

    #node#animation

    anas ali•415
    Submitted over 2 years ago

    0 comments
  • Vue app useing rest-countries-api, built with Vue's compostion API

    #axios#bootstrap#sass/scss#vue#gsap

    anas ali•415
    Submitted over 2 years ago

    0 comments
  • Filterable Job Listing Page uscing Vue.js, SCSS, Fetch API

    #fetch#sass/scss#semantic-ui#vue#gulp

    anas ali•415
    Submitted almost 3 years ago

    0 comments
  • Responsive dropdown menu navigation bar using CSS only (scss,html)

    #sass/scss#gulp

    anas ali•415
    Submitted almost 3 years ago

    1 comment
  • Responsive comments section using Vue Framework with Vuex

    #sass/scss#vue#vuex#axios

    anas ali•415
    Submitted almost 3 years ago

    1 comment
  • Responsive URL shortenning page uscing SCSS, Flex, Gulp, API

    #fetch#gulp#sass/scss#node

    anas ali•415
    Submitted about 3 years ago

    1 comment
View more solutions

Latest comments

  • Álvaro J.•90
    @alvaro-j
    Submitted almost 4 years ago

    Fylo data storage component made with HTML and CSS

    2
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    one way you can use the " background-position-y " css property on the body element, set a background-position-y : 120% for example ^_^

    Marked as helpful
  • Júlia Barreto•20
    @BarretoJ20
    Submitted almost 4 years ago

    Huddle landing page - Main text on the right side

    4
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    you can wrap both sections in a container and use flex to arrange the sections next to each other using flex properties like setting the direction to row and the base for each section .. here is a good resource on how to use flexboxes https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Marked as helpful
  • Abhineet Kandele•320
    @abhineetkandele
    Submitted almost 4 years ago

    Solution using HTML & CSS only

    2
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    seems great, just try to change the arrow direction when the question box is opened

    also when the screen is at mobile width (~375px) the picture gets hidden and the user can't scroll up to it, especially if there are multiple questions opened at the same time.

    Marked as helpful
  • Tamilselvan S•165
    @tamil-hash
    Submitted almost 4 years ago

    FAQ-Accordion using HTML, CSS, JS

    2
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    nice work, there'r some little things that would make it the best tho ^_^,

    • the background color is darker than the design : white would do the trick i guess

    • in mobile view, if all questions are extended the last one can't be viewed : you can make the height of the card a bit taller or assign it to auto with a min height

    • when resizing, the pictures gets disproportionate in scal thus the overlapping of the pictures gets messed up a little bit.. not sure why but I noticed the extensive use of size percentages that I rarely see in stable designs

  • Brian Carlo Birondo•320
    @Briancarlo24
    Submitted almost 4 years ago

    Responsive-Page-using-Flexbox

    2
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    great work so far, and really nice layout

    • I just noticed the email input when it gets clicked it changes back to the original style

    I hope you find your solution to the <300px situation

    have a nice day ^_^

  • Srujan Baliarsingh•10
    @noobcoder02
    Submitted almost 4 years ago

    3-column preview card component solution using HTML & CSS

    1
    anas ali•415
    @anas-cd
    Posted almost 4 years ago

    really nice work you got there,

    • to make it even closer to the design you can use the line-height property for the paragraph

    • also to make it more responsive maybe make the breakpoint of mobile view switching before 375 pixels since some phones are a bit bigger than this resolution

    • last one there is a funny movement while resizing the screen from the buttons, I had the same thing when I did this challenge and I fixed it using the margin-top auto while in flex item, you can do something similar at yours but since you don't have it as flex inside each card you can do whatever makes the button stick to the end of its container

    have fun ^_^

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