I am proud of my growth with every challenge that I take on.
What challenges did you encounter, and how did you overcome them?I did struggle with making the site responsive but through watching tutorials and researching I was able to get to the solution.
What specific areas of your project would you like help with?Any feed back on standard HTML and CSS best practices.
Wow, well done. I had to look up BEM to learn about your class names. I hadn't seen that done before, but I really like it. It makes it easy to see how your elements flow, and I could see it being very helpful when working with a bunch of style classes. Your HTML is well done semantically as well.
The only thing I see that I would do different is in the CSS. I don't like having two selectors for the body as I think it makes it easier to miss something when reviewing code. That's completely a personal bias on my part though.
Excellent job and stay awesome!
I did all of this alone even though it was hard to fix the github etc.. I managed to learn github and make a new website! Now i have learnt how to make a live-url!
What challenges did you encounter, and how did you overcome them?To be fair i used a website called Flexbox Froggy. I had a problem with layouts, especially putting the layouts in the middle of the website. With the help of Flexbox Froggy, it went good!
What specific areas of your project would you like help with?Im a new student taking a bachelor degree in technology. This is my first time making a website. I have few question to whoever who reads this message:
Hi @ramiadi,
I think you made a good rough draft, and just need to add some finishing touches.
Just looking at the comparison, your sizing is a bit off and you should check your colors on the font. Mostly it's just playing with the padding.
Going into your code, the first thing I would challenge you to do is to get comfortable using a css stylesheet. It is a best practice to separate out your styling to CSS. There is a concept called separation of concerns about having your HTML be the structure, CSS be styling, and JS be function. It's a good way to look at things as you are learning.
You have an 'alt' on your image! Awesome! I totally forgot to do that for my first few projects. It's a key part of accessibility. Another part is using semantic HTML, and you are using HTML tags pretty well. The next step is to make sure you use header, footer, and main tags to organize the body of your code. Headers and footers are optional, but you should have a main (only 1) that contains the "main" part of your page.
Don't be afraid to use header tags. I think you could improve the contents of your card by changing up your structure a bit. The first line "Improve your..." could be a "heading", with the paragraph following it being the "content". Having that heading as an h1 would also give screen readers a place to start.
Quick tip - when you start adding these you can use grid to move the attribution to the bottom of the page easily. grid-template-columns: auto 1fr on your body if you only have a main and footer.
Nothing you did was "bad." The whole point is to learn, which is what you are doing. As far as how to start building a site, I can only share my process. With these challenges I:
All of this said, I am still learning too. I hope some of this helps. Stay awesome!
learning how to deal with background images and proud that I didn't see any video or tutorial to help me out
What challenges did you encounter, and how did you overcome them?how to CSS a photo in the SVG extension
What specific areas of your project would you like help with?Focus more on CSS and Train more
Hi Omar,
Your blog preview card looks pretty good. There's only some minor differences in size and the typography on your date.
There are a few things in your code you may want to look at. In your HTML, it's a good idea to use the HTML tags to maintain semantic HTML. You have a div class img and used a background URL, which has it's place in dynamic designs but isn't great for screen readers. Similarly, I don't see a main tag, which is also an accessibility thing.
In your css, I like that you have the beginnings of a reset. After starting to use one myself, I have really liked how easy it made it. I might caution you against using the * selector for it, as it can do some funky stuff when your projects get bigger.
Another thing to keep in mind when looking at larger projects is the size of your selectors. There is quite a bit going on in your selectors, and that can get difficult to manage on more complex projects. A lot of the content I look at is moving toward smaller, modular classes. Take a look at bootstrap and tailwind and you will see how they use selectors.
Longer post than I meant it to be! You did a great job, stay awesome!
I am mostly proud of my website because I manage to position every element in correct place
What challenges did you encounter, and how did you overcome them?Positioning was the biggest challenge and i was just trying multiple times to find a solution
What specific areas of your project would you like help with?I dont know if my method of positioning things like divs and text is correct because i mostly use padding to achieve height and then I am trying to move it left and right with centerings or text-align and this is only method that i know and it worked on my website
Your preview card looks pretty good. There are some small sizing differences, but overall it's close.
There are some things in the code that you might want to look at.
First, you want to get used to dropping your styling into a css file. It just makes it easier to review your code.
It's awesome that you are focusing on using reactive units! I have not seen them used the way that you are using them. In my understanding the typical rem is 16px. When you use tenths of an rem you get some strange fractions. .1rem is 1.6px. I don't know what kind of effect that has, but I have always used eights to do rem, where .125rem = 2px. Maybe someone on here with more knowledge can speak to the effects.
There are also some semantic HTML elements that I would look at. I use headings like the contents section in a book. H1 as the book title (this is also what screen readers look for to start the page), with h2 being the next level (sections) then h3 next (chapters) and so on. I'm still tweaking how I do this, but starting to think about them that way helped me start organizing my thought better about building.
I hope this helps. Stay awesome!
It looks pretty good. The only issues I see are with the color in your prep section and some minor spacing issues that make some text look a bit muddled. Pretty minor stuff.
Keep up the good work and have fun!
Your project looks great. I like that you added your own personal touches.
You didn't use the flagposts (h1, main, etc) in your code. When you submitted did it give you an error?
Good work and have fun on your next project?
Your solution looks great.
I saw that you used a margin utility class. I hadn't thought of that, but it's a great idea for a layout like this.
Is there a reason for using <div class = "main"> instead of <main>?
Keep up the good work and have fun!
@MohammadMemon
Your project looks good. There is a little less whitespace than the original design, but otherwise good work.
Would having the h1 following another element, the img, cause anything funny to happen with screen readers? I'm new to designing for them, so I'm not sure of the nuances, but I thought a lot of them skipped straight to the h1 when reading the page.
Keep up the good work and have fun!
