Assignment – Flexbox Javascript

#1

I am having a hard time with this assignment. I don’t know what I am doing wrong and am feeling overwhelmed that I can’t figure it out or understand. If there is someone willing to look at what I wrote and see if they can spot what I need to change to make it work, I would be grateful. I want to understand so badly because I want to progress and move toward web3.
I don’t know if I am coding on the wrong sheets or too much and need to take stuff out.

This is what I have on Style.css

html * {
box-sizing: border-box;
margin: 0;
padding: 0;

}

body {
background-color: off whitesmoke

}
header {
display: flex;
justify-content: Space-between;
align-items: center;
height: 70px;
padding: 0px 25px
}
header nav ul {

list-style-type: none;
display: flex:
justify-content: flex-end;
width: 100%;

}

header nav ul li {
margin: 0 10px;

}

hi, li {
font-family: Arial, Heletica, sans-seri

}

hi {

font-weight: strong;
color: rgb (100, 100, 100);

}

li a {

text-decoration: none;
color: black; 
font-size: 24px;

}

/* Header styles*/
.header-container {
display: flex;
}

}

.logo {
padding=left: 10px;
width: 30%

}

.main-nav {
width: 70%:

}

.menu-list {{
list-style-type: none;
display: flex;
justify-content: flex-end;
padding-right: 30px;

}

.menu-item {
margin: 20px;
padding: 16px;
box-sizing: border-box;

}

#moralis-reference {
text-shadow: 2px 2px 7px darkgray;
}

.first-paragraph {
border: 2px dashed darkblue;

}

.dashed-border {
    border: 2px dashed darkblue;
}

.column-container {
display: flex;
flex-direction: column;
align-items: center
: ;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

.column {
    width: 40%;
}

}
body {
background-color: beige;
}

button {
border: none;flexbox-shadow: 3px
box-shadow: 3px 3px 7px rgba(90, 90, 90
curser: pointer;
}

form{
padding: 15px;
border: 2px solid black;
margin: 30px;
}

[type=text], [type=number], [type=submit] {
padding: 8px;
}

Page_layout.html

<meta http-equiv="X-UA-Compatible" Home</l
  • About</
  • Contact

    Index.html

    DOCTYPE html>
    tml lang=“en”>
    ead>

    head> ody> Logo

    Article heading

    Lorem ipsum, dolor sit amet consectetur h1> Hello Moralis! iv class="column-container">...flex

    Lorem ipsum dolor sit, amet consectetur adipisicing elit.

    Lorem ipsum, dolor sit amet consectetur adipisicing el

    id=“moralis-reference”>
    Visit <a href=“http://Moralis.io/“target=”_blank”>Moralis.io<a
    and start
    buidling!

    >

    2>Part 1: Example

    Lorem ipsum dolor sit amet.>/P>
    suscipit eum necessitatibus a laborum.


    3>Chapter 1: Metamask login
    mg src="./Metamasklogin.png"
    alt=“Metamasklogin.png” />
    3>Loading NFTs>/h3>
    4>Section 2.1 BigBoy Pants
    4>Section 2.2: Pumkins
    h1>Part 2: Building a DEX
    1. Bitcoin
    2. Ethereum
    3. Tether
    • Bitcoin
    • Ethereum
    • Tether
    Coin: <input type="text" name="coinName" placeholder="Coin" Amount: <input type="number" min="0" name="coinQuantity" place Buy

    this is an update .

    body> html>
    • #2

    Hi Alex,
    i quickly had a look on the code but, as far as i check, i see some typo error, but don’t know if the real problem is this one. Anyway, please see, for example:

    list-style-type: none;
display: flex:
justify-content: flex-end;
width: 100%;

    the display: flex: property ends with : instead of ;
    Also

    header-container {
display: flex;
}

}

    has a wrong } between
    Also

    .menu-list {{
list-style-type: none;

    Opens the Css rule with a double {{
    Probably fixing this would help…

    Regards
    Andrea

    #3

    Thank you for taking the time to look and let me know. I appreciate that. I made the corrections and it helped.
    How do you open the page layout page on the same page as the style.css so that the page can be widened and shrink to see the content change?

    #4

    Hi, Good to hear it helped a bit…
    If i understood your question, you can use the Chrome/Firefox inspector (On the page, Right click > Inspect
    You can put on the right (or left) part of the page and inspect gthe code you want, see below. If you google a bit, you can easily find out more, if i understood the question. Pls, see below.
    Good luck :wink:

    image
    image1341×623 310 KB

    #5

    Thanks for the suggestion. I will check it out.

    1 Like
    #6

    Before starting with more complex code, please reflect on the source of typos. Every character counts. Before understanding Flexbox in depth, you’ll need to develop the skill of high enough accuracy that you make at most 1 typo per 100 lines of code. I am serious about this metric.

    Then the next step is self-correction, which can be imagined like the name of a Heroes of Might and Magic spell: eagle eye. You look at those 100 lines of code and spot the typo yourself.

    Then you free sufficient mental capacity on understanding Flexbox in depth, as you detach typos from semantics (meaning).

    The path towards this level is familiarity, code a lot, solve simple problems first.

    1 Like
    #7

    Thank you for contacting me. I want to learn JavaScript and whatever else necessary to enable me to work with Web 3, Smart contracts and Blockchain. Sometimes I get hard on myself when I struggle with understanding or making the code results what it should be, even though I am new to this and learning. I appreciate all of your comments and suggestions.

    Do you suggest I go back and start from the beginning of the course again? I have gone through the Flex-Box Zombies and various other games. I have recently started the Flex-Box Zombies over again and am on lesson 5. It is much easier this time round after having given it some time between the first time going through it and now.

    Thanks again for reaching out to me Zsolt. I am determined to complete this course with real usable knowledge.
    Thanks for teaching it.

    I hope you have an amazing day.
    Alex

    1 Like
    #8

    There is no free lunch.

    Good news: achievers are usually hard on themselves, because they still reliving their past of who they had to be to earn their parents’ love. Some choose achieving, others choose becoming a rebel, others choose retreating like a hermit. Achieving is by far the most lucrative option of the three, so you can be happy.

    So if you learn to accept to enjoy the process instead of being hard on yourself, you let go of unhealthy expectations. In other words, not wanting to accelerate your progress will indirectly accelerate your progress. But only if you let go of the desire to speed things up.

    I suggest doing whatever it takes to acquire strong fundamentals. Strong fundamentals pay dividends throughout the rest of your life. Only you know what you know well and what you don’t. Spaced repetition helps.

    For me, knowing about gases that P*V/T = m/M*R and R=8.31 is second nature, because 20 years ago I repeated it so many times. Opposed to gases, software development is actually useful even if you don’t work with physics.

    1 Like
    #9

    Hi Zsolt,

    I appreciate your response Zsolt.

    It made a positive impact on me. I have learned more about Moralis and myself through thinking about you wrote.

    I appreciate your teaching style more now because it is teaching and training me how to be part of a talent density organization. I want to excel not just be adequate.

    I appreciate your words of knowledge and encouragement. I also appreciate your saying that I can let go of unhealthy expectations and enjoy the process instead of being hard on myself.

    My goal is to work at Moralis. I can see that you are a valuable member of Moralis and I look forward to continuing to learn from you.

    1 Like