Mojtaba

@MojtabaMosavi
1,790Points

I'm a mysterious individual who has yet to fill out my bio. One thing's for certain: I love writing front-end code!

Latest Solutions

  • Desktop design screenshot for the IP Address Tracker coding challenge

    ip-address-tracker

    • HTML
    • CSS
    • JS
    • API
    Mojtaba1,790
    Submitted

    Hi guys, this one toke a bit more time than I expected but I glad to be have completed it. I added some features not specified in spec and any though that you might wanna share is deeply valued and appriciated.

    The things I learned:

    1- Following a style guide that clearly defines how you approach all stylistic aspects of writing code such as commenting. This practise is highly beneficial and advantageous though is helps to improv the readability and reduce the difficulty of maintanance. For example when is commes to writing css, I usally use 7-1 file architecture and including a file with overview of what each folder contains and how it functions helps others to get a grasp of it much easily.

    2- Object-oriented programmering is great way to split a UI into seperate functioning object. This approach of writing js code allows you to keep your code much more structured origanized. In this project I tried this approach mixed with the observer pettarn and I am quite happy with the implementation but I am also aware of the fact the there is alot of room for improvment. This project was an intro to OOP in js for me.

    3- In This project I learned the basics of how to use API in js and asynchronous js. For this project I used the native fetch method but I am looking forward to learn a lot more about APIs and how to consum them. The API used in the project required authentication and for securing my authentiaction key I used the npm package.

    4- Parcel is "blazing" fast application bunder and in this project I used it for optimizing and minification. For small projects like this parcel is great tool that requires almost zero configuration in contrast to webpack.

    5- Design patterns such as observer pattern and subpub are really powerful and can help you write much more modular code. For instance in this project I got fimiliar to basic usage of subpub and tried to implement this project based on it but I faced problems that related to asychrounous operations and instead switched to the observer pattern. I am looking forward to learn more about design patterns.

    Keep coding :=)

  • Desktop design screenshot for the Blogr landing page coding challenge

    blogr-landing-page

    • HTML
    • CSS
    • JS
    Mojtaba1,790
    Submitted

    Hi guys, I built this one using reat, it took much more time than I expected mainly because whenever you get you hands dirty with a new piece of tech there are a infinete about of questions you need to find good answers for. For instance structuring the project, I would really apperiate if you guys who are a bit more exprienced with react share some thoughts on this how you go about structuring.

    I feel that a learned a ton doing this one and I also identified a bunch of things that I need to imporve. Beside the bg-pattern not showing on dektop view I'd be glad to hear any thoughts and qestions about my solution.

    Keep coding :)

  • Desktop design screenshot for the Loopstudios landing page coding challenge

    loopstudios-landing-page-main

    • HTML
    • CSS
    • JS
    Mojtaba1,790
    Submitted

    Hi guys, I learned quite a few new thing doing this one( see the repo for more). No qestions come to mind directly but as always I would love to hear any thoughts you wanna share.

    Keep coding :).

  • Desktop design screenshot for the Insure landing page coding challenge

    insure-landing-page-master

    • HTML
    • CSS
    • JS
    Mojtaba1,790
    Submitted

    Hi, here is my solution to this challenge, The things learned doing this project:

    1.That the behavior of z-index property is dependent on the positioning of the element and if specific styles such as trasnform are applied to the element.

    2.How to use pictur tag to create responsive images.

    3.Usage of object-fit property which is used to corp images.

    4.A basic understanding of how and when to use css animation, For example I learned that css animation should be avoided on the mobile screen if possible because it hurts the performance of a site and uses a huge amount of bandwidth.

    1. How to write much more modular and organized styles using the @use, @forward and 7-1 architecture pattern.

    6.How to write more accessible markup throught the usage of aria-label and aria-hidden attributes.

    7.Creating accessible icons.

    I would love to hear your thoughts,comments and qestions about any aspect of my solution.

    Happy coding :)

  • Desktop design screenshot for the Huddle landing page with alternating feature blocks coding challenge

    huddle-landing-page-with-alternating-feature-blocks-master

    • HTML
    • CSS
    Mojtaba1,790
    Submitted

    Hi Gays, here is my solution to this one, any thoughts that you wanna share about my solution or the following qestions is deeply appreciated.

    1. How do you implement your container for cetering content and what is the thanking behind it ?

    2. Is my project structure corrcet, what project structure would you use for this one ?

    3. Since larger projects are really time consuming using reusable components help a geat deal, what resuable components do you use in your project ?

    4. In many satuations there are a bunch of ways to achive the same thing, how do you navigate this situations ?

    5. How do go about defining you breakpoints ?

    Keep coding :)

  • Desktop design screenshot for the Fylo landing page with two column layout coding challenge

    fylo-landing-page-with-two-column-lay

    • HTML
    • CSS
    Mojtaba1,790
    Submitted

    Here is my solution to this one, I not totally satisfied althought it looks ok. Any thoughts about my solution that you wanna share are deeply appreciated.

    Keep coding :)

Latest Comments

    • HTML
    • CSS
    • JS

    Job listing board using React and React Context

    1
    Mojtaba1,790 | Posted about 4 hours agocommented on Jordan Lewis's "Job listings with filtering" solution

    Hi!, look nice and functions well, I am no expert in React but according to my limited knowledge the way you import assets if fine and a sublte improvement would be to a named import( assign the asset to variable on import). For example you can do something like this:

    import logo from "./src/assets/images/logo"

    Keep coding :)

    0
    • HTML
    • CSS
    • JS
    • API

    List countries app using React hooks, HTML, CSS , JS , API

    2
    Mojtaba1,790 | Posted about 4 hours agocommented on Maha's "REST Countries API with color theme switcher" solution

    Hi!, look nice, the only things that comes to mind is that to improve the readability the font-sizes on card compoenent should be a bit bigger, at moment it' kind of heard to read it on mobile view.

    Keep coding :)

    0
    • HTML
    • CSS

    Profile Card with HTML CSS

    2
    Mojtaba1,790 | Posted about 4 hours agocommented on Angel Lopez's "Profile card component" solution

    1- Upon resizing there is some overlapping issues. I suggest you put and max-width on your card instead of resetting the width.

    2- Regarding your markup, writing semantic markup is all about choosing the right html element for the right task, when you use an htlm element for a task ask yourself if it describes the content you put inside best. For instance the aside tag does not describe the card in any way.

    Keep coding :=)

    1
    • HTML
    • CSS
    • JS

    Responsive launching soon page using CSS and JS

    2
    Mojtaba1,790 | Posted 2 days agocommented on Ahmed Faisal's "Launch countdown timer" solution

    Well done, nice use of figure element, a subtle improvment would be to slow the clock down a bit so it chages state properly in combination with the animation, at the moment it takes two seconds for the card to flip, would be nice if you make one in my opinion.

    I am not much knowlegable about creating templates but the usage of bem is great way to go and if you bemed properly you should be able to resue it any other webb app.

    Keep coding :)

    0
    • HTML
    • CSS

    Profile-card-component using HTML & CSS

    2
    Mojtaba1,790 | Posted 2 days agocommented on Folkert van Marm's "Profile card component" solution

    Hi, nice job, alternatively you can remove the fix width and set it to contain and try to play around with background-position to get it positioned right.

    Keep coding :=)

    0