Este ejercicio fue tomado de Frontend Mentor
Your challenge is to build out this landing page from the designs provided.
Use the starter code and go through the README.md file. This will provide further details about the project. The style-guide.md file is where you'll find colors, fonts, etc.
Keep your code as clean as possible. Be sure to use semantic HTML5 markup and reusable CSS classes.
- Your design must be mobile first
- You must make use of fexbox and/or css grid
- You must use a style compiler tool such as sass, less or stylus.
Your task is to build out the project to the designs inside the /design folder. You will find both a mobile and a desktop version of the design to work to.
The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as font-size, padding and margin. This should help train your eye to perceive differences in spacings and sizes.
You will find all the required assets in the /images folder. The assets are already optimized.
There is also a style-guide.md file, which contains the information you'll need, such as color palette and fonts.
Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
- Configure your repository to publish your code to GitHub Pages, Netlify or Vercel.
- Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
- Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
- Write out the base styles for your project, including general content styles, such as
font-familyandfont-size. - Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
- Código fuente en Github
- Publicación de la página en Netlify, Github Pages o Vercel
- Actualizar la sección Página Web con la dirección para el acceso a la página web publicada
- Flebox Forggy: A game for learning CSS flexbox
- Flexbox Defense: A game for learning CSS
- MarkSheet: A free HTML & CSS Tutorial
- A free visual guide to CSS
- A free guide to HTML
- Awesome Flexbox
- Dash API
- A Complete Guide to Flexbox
- Flexbox Grid
- Don't Overthink it (Flexbox) Grids
- Scalable and Modular Architecture for CSS
- Explore and Master Chrome Dev Tools
- Learn CSS Variables in 5 minutes
- The boyscout rule
- Unificando estilos de programación con EditorConfig
- Super Mario World made only with CSS gradients - no JS
- Learn CSS Grid
- Learn CSS Grid With Wes Bos
- Sass
- Less
- Stylus