jhdezj / mc-project6 Goto Github PK

1.- Implement mobile-first as a strategy
2.- When starting the implementation be careful to not lose any information
3.- Establish the breakpoints where things change (basically three sizes)
4.- Produce the media queries and make sure the final product doesn't break.
5.- Go through the main curriculum and watch the Wes Bos videos.
6.- Don't miss parts through the course.

1.- Things missing so far:

• Links
• Code cleaning and validation
• Readme file update
• Transitions

2.- Check out for semantics because there is a section with no h1. Use a class to hide it by using display none. https://gsnedders.html5.org/outliner/
3.- Adjust the queries on the footer section for mobile. You have twice the Facebook icon. There should be only 6 instead of 7.
4.- Use span elements in the footer section.

• Good progress on the page. You are almost there!
• If you need to go fast, repeating images is a way to go.
• Nevertheless, this project (also Newsweek and the HTML capstone) is a good portfolio showcase so you might consider include the complete set of pictures. It will take time, but definitely will stand out. You could come back later (at portfolio time) but it will be a pain to update all pictures then...
• Footer icons: You could use font awesome icons and place them in a UL

<ul>
    <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
    <li><a href="#"><i class="fab fa-twitter"></i></a></li>
    <li><a href="#"><i class="fab fa-youtube"></i></a></li>
    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
    <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
    <li><a href="#"><i class="fas fa-rss"></i></a></li>
    <li><a href="#"><i class="far fa-envelope"></i></a></li>
</ul>

. The other option is to copy the SVG code into each <li> and use fill property on CSS to change the color.

0. Page looks awesome and professional.
1. Check links breaking in funding rounds section.
2. Make sure links and text in footer section wrap on small screens as in the original page. Remove rss feed icon, and consider using flex-wrap: wrap for the text and icons in footer.
3. Use browser developer tools to view different screen sizes, instead of shrinking browser window.

Ok, first, you should have created a new branch - I usually call it develop - and made it the default branch in your project. You still have time. Go to master, create a new one, and make it the default. Your pull request should be made for this new branch.

Like I told you yesterday, I believe you should do one thing at the time. First, do all the HTML, then go to CSS and then go to media queries. I believe you can go faster like this. Don't worry about reproducing exactly the articles on the page. If 3 articles are the same just copy and paste the first one, or use the Lore Ipsum technique.

You shouldn't use
, is a bad practice in web dev. You can position everything with flex or grid.

I think that's it for now. Your project is good, but you have to dedicate more.

0. Right approach in general. Good responsiveness. Carry on!
1. Try to have one single CSS file at the end of the project for performance issues arising from more HTTP requests.