#Nicola Reyes
- In section 1, I added the github repository and configured my files to the Vagrant Box
- In Section 2, I began working on the project with all of the starter files (1 hr 45 minutes)
- Created Section Intro and header
- Covered reset styles and the order of CSS structure ( it should match the html document order )
- Covered CSS Animations and creating them from scratch using keyframes
- Built a complex animated button using pseudo-elements and pseudo-classes
- In section 3, I learned about the BEM method and we talked about how CSS is rendered. Not much changes to the project happened here.
- In section 4, I was introduced to SASS and npm, and we began converting the files.
- I was able to get this installed on my work and home computer with Git Bash and terminal to command-line my changes into a repository.
- We covered Variables and Nesting
- Mixins, Extends, Functions
- Installing Sass locally and compiling SCSS
- Sass Architecture was also very important, as it was applied to the rest of the project and helps make CSS easier to write.
- Bonus: Installed Emmet for my IDE's at work and home.
- In section 5, we built the rest of the page
- We made background videos for sections
- Flip cards
- Figures and figcaptions with cool hover effects
- Form styling
- Build Navigation
- Checkbox Hack, Solid-color gradients, how and when to use transform-origin, which was not used in this project
- Built Pure CSS popup
- In section 6, we are focusing on media queries and responsive design
-
Use mixins to write media queries
-
Responsive images,
-
@supports tags,
-
and more!
-
Section Bonus / Challenge: Popup Responsive Styles - I removed the left side on the pop-up and gave it a set height so the text would overflow and remain responsive on anything smaller than a tablet device.
-
- In section 7, we begin looking into flex-box design, custom css properties, masks and SVGs
- Learned intricacies and simplicities of flexbox layout
- X axis is called the Main Axis
- Y axis is called the Cross Axis
- Container: HOLDS ITEMS. flex-direction, flex-wrap, justify-content, align-content.
- Items: CAN HOLD MORE CONTAINERS. align-self, order, flex (grow shrink basis).
- Used flexbox layout to create:
- A header which contained a logo, a search bar with svg icon, and a user navigation
- A sidebar with the main navigation of an application
- A main element where the web app content or views are displayed
- Used cubic-bezier to create an advanced hover animation over the main nav
- Implemented an SVG font from icomoon
- I used NPM libraries to minify the code and to add missing pre-fixes
- Responsive layout was a breeze with the organizing tools flexbox provides
- Learned intricacies and simplicities of flexbox layout
- In section 8, CSS grid lectures and starting Nexter
- In section 9, I am building Nexter with grid and flex
This repo contains starter files and the finished project files for all the projects contained in the course.
Plus, I made all the course slides available for download, to make it easier to follow along the conceptual videos.
👇 Please read the following Frequently Asked Questions (FAQ) carefully before starting the course 👇
A: If you're new to GitHub and just want to download the complete package, hit the green button saying "Clone or download", choose the "Download ZIP" option, and you're good to go.
Unfortunately, this is quite common. I listed some possible fixes in this document.
A: Have you extensively tried fixing the problem on your own? If you failed at fixing it, please post a detailled description of the problem to the Q&A area of that video over at Udemy, along with a codepen containing your code. You will get help as fast as possible! Please don't send me a personal message or email to fix coding problems.
A: It's on my website at http://codingheroes.io/resources. You can subscribe for updates 😉
A: I use Oceanic Next (dimmed bg) for all my coding and course production. Here is my complete VSCode setup.
A: They are all available on my public codepen profile. The ones you're looking for might be buried under some newer ones.
A: Sure, I have an online version of all three. Here they are: Natours (advanced CSS, Sass and responsive design), Trillo (flexbox) and Nexter (CSS Grid).
A: Unfortunately, there is nothing I can do about it. The course is hosted on Udemy's platform, and sometimes they have small technical issues like this one. Please just come back a bit later or contact their support team.
A: Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please contact the Udemy support team.
A: Yes, I made all videos downloadable on the Udemy platform so you can learn even without an internet connection. To download a video, use the settings icon in the right bottom corner of the video player.
A: First, you can subscribe to my email list at my website. Plus, I make important announcements on twitter @jonasschmedtman, so you should definitely follow me there 🔥
A: A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please contact the Udemy support team.
A: No, for the simple reason that I want this repository to contain the exact same code that is shown in the videos. However, please feel free to add an issue if you found one.